Moving qml Item out of left side of window - qt

Question

I want to move a qml Item out of the left side of the app window.
While this task works perfectly for the right side of the window by defining a state like this
states: State {
name: "hidden"
when: is_hidden == true
AnchorChanges {
target: right_item_to_move
anchors.right: undefined
}
PropertyChanges {
target: right_item_to_move
x: main_window.width
}
}
and defining the appropriate Transition, I can't get it to work on the left side of the main window because negative x coordinates are not allowed.
I.e. this does not work:
states: State {
name: "hidden"
when: is_hidden == true
AnchorChanges {
target: left_item_to_move
anchors.left: undefined
}
PropertyChanges {
target: left_item_to_move
x: -left_item_to_move.width
}
}
How can I achieve this task? I'm using Qt 5.8 and QtQuick 2.0.

Answer 1

In my opinion, one should strive to stay true to one way of positioning, so you should either use anchors or x/y-coordinates.
Here you can find an overview how to make the right choice.
In short: When in doubt, use anchors. When the positioning is only relative to the parent (static) use x and y and if not possible otherwise do so even when not relative to the parent.
As you have chosen anchors, in my opinion you should stick to that - meaning: change the anchoring, so that instead of the left anchor line of the object, the right anchor line will be anchored to the window's left.
This would look like this:
import QtQuick 2.7
import QtQuick.Controls 2.0
ApplicationWindow {
id: myWindow
visible: true
width: 600
height: 600
color: 'white'
Rectangle {
anchors.centerIn: parent
width: 300
height: 600
color: 'green'
Button {
id: but
anchors {
verticalCenter: parent.verticalCenter
left: parent.left
}
onClicked: {
state = (state === 'left' ? '' : 'left')
}
states: [
State {
name: 'left'
AnchorChanges {
target: but
anchors.left: undefined
anchors.right: parent.left
}
}
]
transitions: [
Transition {
AnchorAnimation {
duration: 200
}
}
]
}
}
}
An example, how it might look, if you choose to modify the x value, it might look like this:
import QtQuick 2.7
import QtQuick.Controls 2.0
ApplicationWindow {
id: myWindow
visible: true
width: 600
height: 600
color: 'white'
Rectangle {
anchors.centerIn: parent
width: 300
height: 600
color: 'green'
Button {
id: but
property bool shown: true
anchors {
verticalCenter: parent.verticalCenter
}
onClicked: {
shown = !shown
}
x: (shown ? 0 : -width)
Behavior on x {
XAnimator {
duration: 200
}
}
}
}
}