Moving qml Item out of left side of window

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.

negative x coordinates are allowed. Please make your example a MCVE, so we can look into your problem. — derM
You're right. I guess I misread something in the documentation and got something wrong in the implementation. Anyway, it works now, so thank you for pointing me in the right direction. — KO70

derM derM · Accepted Answer · 2017-05-31T11:56:36

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
                }
            }
        }
    }
}

Moving qml Item out of left side of window

1 Answers