QtQuick 2 - Side Panel example - qt

Question

Can someone help me to understand behaviour of this code? I wrote simple example of side panel menu (just template now) and there is problem to use onMenuVisibleChanged slot (but all I need actually works, just want to understand why another way don't). Logically it should change x of panel rectangle to specified values, but it didn't. Please help me ot understand correct approach for this thing.
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
}
Appreciate any help. Just a QML beginner. The most purpose is to use this panel in android application. Feel free to use this code if you want.

Answer 1

The property drag make the x value draggable
if you implement it by mouseX onPressed/onReleased, rect.x will be 0 or -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
}
}
}
with visual drag ,sorry it's ugly:
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
}
}