CODEWITHSUNDEEP
qtqml
KO70
KO70

Reputation: 187

Moving qml Item out of left side of window

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.

Upvotes: 1

Views: 2563

Answers (1)

derM
derM

Reputation: 13691

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

Upvotes: 2

Related Questions