QML toggle PropertyChanges onclick - position

Question

I try to toggle my navigation with a toggle function. I want to change "x" position.
So here is what i got so far. But don't work. I try to use a toggle function to chnage state on click. I set two different state one that the navigation is visible and one that the navigation is hidden.
I get this error "ReferenceError: toggle is not defined"
Item {
id: toggleswitch
width: 200
height: 200
property bool on: false
function toggle() {
if (toggleswitch.state == "on")
toggleswitch.state = "off";
else
toggleswitch.state = "on";
}
Rectangle {
id: open
width: parent.width
height: 35
color: "#33000000"
Text {
anchors.centerIn: parent
text: "open"
color: "white"
font.family: "Helvetica"
font.pixelSize: 25
}
MouseArea { anchors.fill: parent; onClicked: toggle() }
}
states: [
State {
name: "on"
PropertyChanges { target: navigation; x: 0 }
PropertyChanges { target: toggleswitch; on: true }
},
State {
name: "off"
PropertyChanges { target: navigation; x: -300 }
PropertyChanges { target: toggleswitch; on: false }
}
]
}

Answer 1

Some small slider example:
import QtQuick 2.2
Rectangle {
width: 360
height: 360
Rectangle {
anchors {
left: parent.left
top: parent.top
bottom: parent.bottom
}
id: slider
state: "close"
states: [
State {
name: "close"
PropertyChanges {
target: slider
width: 50
}
},
State {
name: "open"
PropertyChanges {
target: slider
width: 360
}
}
]
transitions: [
Transition {
NumberAnimation {
target: slider
property: "width"
duration: 500
easing.type: Easing.InOutBack
}
}
]
color: "green"
}
MouseArea {
anchors.fill: parent
onClicked: {
if (slider.state == "close")
slider.state = "open";
else
slider.state = "close";
}
}
}
transitions is optional here

Answer 2

You can say to QML which object is your function.
Item {
id: toggleswitch
width: 200
height: 200
state: "off" //INIT YOUR STATE !!
property bool on: false
function toggle() {
if (toggleswitch.state == "on")
toggleswitch.state = "off";
else
toggleswitch.state = "on";
}
Rectangle {
id: open
width: parent.width
height: 35
color: "#33000000"
Text {
anchors.centerIn: parent
text: "open"
color: "white"
font.family: "Helvetica"
font.pixelSize: 25
}
MouseArea { anchors.fill: parent; onClicked: toggleswitch.toggle() } //here
}
states: [
State {
name: "on"
PropertyChanges { target: navigation; x: 0 }
PropertyChanges { target: toggleswitch; on: true }
},
State {
name: "off"
PropertyChanges { target: navigation; x: -300 }
PropertyChanges { target: toggleswitch; on: false }
}
]

Answer 3

What I would do here is not manipulate the state directly but toggle on the property directly, and bind the states to that property.
To me it feels more readable, semantical and reduce the coupling between the object and its visual states.
This also has the advantage of having states always coherent with the on property and provides a better abstraction. When using this component you can freely change the on property programmatically and the component display will update accordingly.
That's what I would probably end up with :
Item {
id: toggleswitch
width: 200
height: 200
property bool on: false
function toggle() {
on = !on //simpler toggle function
}
Rectangle {
id: open
width: parent.width
height: 35
color: "#33000000"
Text {
anchors.centerIn: parent
text: "open"
color: "white"
font.family: "Helvetica"
font.pixelSize: 25
}
MouseArea { anchors.fill: parent; onClicked: toggleswitch.toggle() }
}
states: [
State {
name: "on"
when: toggleswith.on
PropertyChanges { target: navigation; x: 0 }
},
State {
name: "off"
when: !toggleswith.on
PropertyChanges { target: navigation; x: -300 }
}
]