将 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。

Here您可以找到如何做出正确选择的概述。

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

因为你选择了anchors，在我看来你应该坚持这一点——意思是：改变锚定，这样右锚线将锚定在窗口的左边，而不是对象的左锚线。

看起来像这样：

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