QtQuick 2 - 側面板示例

Question

有人可以幫助我理解此代碼的行爲嗎？我寫了一個簡單的側面菜單示例（現在只是模板），並且使用onMenuVisibleChanged插槽有問題（但我需要的實際工作，只是想了解爲什麼另一種方式不需要）。從邏輯上講，它應該將面板矩形的x更改爲指定值，但不是。請幫我理解這件事的正確方法。

main.qml

import QtQuick 2.3 
import QtQuick.Controls 1.3 
import QtQuick.Window 2.2 
import QtQuick.Dialogs 1.2 

ApplicationWindow { 
    title: qsTr("Hello World") 
    width: 640 
    height: 480 
    visible: true 
    menuBar: MenuBar{ 
     Menu{ 
      title: "File" 
     MenuItem{ 
      text: "Exit" 
      onTriggered: Qt.quit() 
     } 
     } 
    } 
    SidePane{ 
     id: sidePane 
     menuWidth: 350 
     z: 2 
    } 
} 

SidePane.qml

import QtQuick 2.3 
import QtQuick.Window 2.2 

Item { 
    id: screenItem 
    anchors.fill: parent 
    function show() { 
     rect.x = 0 
     menuVisible = true 
    } 
    function hide() { 
     rect.x = -rect.width 
     menuVisible = false 
    } 
    property int animationDuration: 200 
    property bool menuVisible: false 
    property int dragThreshold: 120 
    property int menuWidth: 300 
    Rectangle { 
     id: rect 
     width: menuWidth 
     x: -rect.width 
     height: Screen.height 
     color: "lightsteelblue" 
     Drag.active: menuDragArea.drag.active 
     Behavior on x { 
      NumberAnimation { 
       duration: animationDuration 
       easing.type: Easing.InOutQuad 
      } 
     } 
     MouseArea { 
      property int dragX: 0 
      property int startX: 0 
      property int diffX: 0 
      id: menuDragArea 
      hoverEnabled: true 
      height: rect.height 
      width: rect.width + 40 
      anchors.left: rect.left 
      drag.target: rect 
      drag.axis: Drag.XAxis 
      drag.minimumX: -rect.width 
      drag.maximumX: 0 
      onPressed: startX = rect.x + rect.width 
      onReleased: { 
       dragX = rect.x + rect.width 
       diffX = Math.abs(startX - dragX) 
       if ((diffX > dragThreshold) && (startX == 0)){ 
        rect.x = 0 
        menuVisible = true 
       } else if ((diffX < dragThreshold) && (startX == 0)){ 
        rect.x = -rect.width 
        menuVisible = false 
       } 
       if ((diffX > dragThreshold) && (startX == rect.width)){ 
        rect.x = -rect.width 
        menuVisible = false 
       } else if ((diffX < dragThreshold) && (startX == rect.width)){ 
        rect.x = 0 
        menuVisible = true 
       } 
      } 
     } 
    } 
    Rectangle{ 
     id: shadowRect 
     anchors.left: rect.right 
     anchors.right: screenItem.right 
     opacity: (rect.x + rect.width)/(rect.width * 2.2) 
     color: "black" 
     height: screenItem.height 
     MouseArea{ 
      id: shadowArea 
      anchors.fill: shadowRect 
      visible: menuVisible ? true : false 
      hoverEnabled: true 
      onClicked: { 
       if (menuVisible == true){ 
        rect.x = -rect.width 
        menuVisible = false 
       } 
      } 
     } 
     Rectangle{ 
      id: shadowRect2 
      color: "black" 
      anchors.left: parent.left 
      width: 5 
      opacity: (rect.x + rect.width)/(rect.width * 2) 
      height: screenItem.height 
     } 
     Rectangle{ 
      id: shadowRect3 
      color: "black" 
      anchors.left: parent.left 
      width: 3 
      opacity: (rect.x + rect.width)/(rect.width * 1.9) 
      height: screenItem.height 
     } 
    } 
    onMenuVisibleChanged: menuVisible ? rect.x = 0 : rect.x = -rect.width 
} 

得到任何幫助。只是一個QML初學者。最大的目的是在android應用程序中使用這個面板。如果您願意，請隨意使用此代碼。

Answer 1

酒店drag使可拖動的x值

如果通過mouseX實現它onPressed/onReleased，rect.x將0或-rect.width onMenuVisibleChanged

MouseArea { 
     property int dragX: 0 
     property int startX: 0 
     property int diffX: 0 
     id: menuDragArea 
     hoverEnabled: true 
     height: rect.height 
     width: rect.width + 40 
     anchors.left: rect.left 

     onPressed: { 
      startX = mouseX; 
      console.log(rect.x) 
     } 
     onReleased: { 
      diffX = Math.abs(startX - mouseX) 
      console.log("diff:"+diffX) 
      if ((diffX > dragThreshold) && (mouseX > startX) && (rect.x !=0)){ 
       rect.x = 0 
       menuVisible = true 
      } else if ((diffX > dragThreshold) && (mouseX < startX) && (rect.x == 0)){ 
       rect.x = -rect.width 
       menuVisible = false 
      } 
     } 
    } 

視覺拖，對不起，它的醜陋：

MouseArea { 
     property int startX: 0 
     property int diffX: 0 
     property int startRectX: 0 
     property bool isPressed: false 
     id: menuDragArea 
     hoverEnabled: true 
     height: rect.height 
     width: rect.width + 40 
     anchors.left: rect.left 
     onPressed: { 
      startX = mouseX; 
      startRectX = rect.x 
      isPressed = true 
      console.log(rect.x)} 
     onMouseXChanged: { 
      if(isPressed) 
       rect.x = (mouseX>rect.width)? 0 : (mouseX-rect.width) 
     } 
     onReleased: { 
      isPressed = false 
      diffX = Math.abs(startX - mouseX) 
      console.log("diff:"+diffX) 
      if ((mouseX >= startX) && (startRectX == -rect.width)){ 
       if(diffX > dragThreshold) 
       { 
        rect.x = 0 
        menuVisible = true 
       } 
       else 
        rect.x = startRectX 
      } else if ((mouseX <= startX) && (startRectX == 0)){ 
       if(diffX > dragThreshold) 
       { 
        rect.x = -rect.width 
        menuVisible = false 
       } 
       else 
        rect.x = startRectX 
      } 
      else 
       rect.x = startRectX 
     } 
    }