将QML项目移出窗口的左侧

Question

我想将QML项目移出应用窗口的左侧。虽然此任务通过定义这样的状态

可以很好地适用于窗口的右侧

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

并定义适当的过渡，我无法在主窗口的左侧工作，因为不允许负X坐标。IE。这不起作用：

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

如何完成此任务？我正在使用QT 5.8和Qtquick 2.0。

Answer 1

在我看来，应该努力忠于一种定位方式，因此您应该使用anchors或x/y -Coordinates。

在这里您可以找到一个概述如何做出正确的选择。

简而言之：如有疑问，请使用锚。当定位仅相对于父(静态(使用x和y时，即使不能相对于父母，也可以这样做。

当您选择anchors时，我认为应该坚持下去 - 含义：更改锚固，以便将右锚线固定在窗口的左侧。P>

这看起来像这样：

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

一个例子，外观，如果您选择修改x值，则可能看起来像：

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