QML 共享状态和转换答案

【问题标题】：QML share states and transitionsQML 共享状态和转换
【发布时间】：2012-05-28 20:49:43
【问题描述】：

在我的应用程序中，我在一个文件中定义了一个配置屏幕：“ConfigScreen.qml”。它包含状态，以及在它们之间定义的转换，以使其平滑地出现和消失：

Rectangle {
    id: container
    width: parent.width
    height: parent.height           
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.bottomMargin: 5      
    state: "start"
    states: [
        State {
            name: "start"
            AnchorChanges { target: container; anchors.verticalCenter: undefined }
            AnchorChanges { target: container; anchors.bottom: container.parent.top }
        },
        State {
            name: "center"
            AnchorChanges { target: container; anchors.bottom: undefined }
            AnchorChanges { target: container; anchors.verticalCenter: container.parent.verticalCenter }
        }
    ]

    transitions: Transition {
        AnchorAnimation { duration: 800; easing.type: Easing.InOutBack; easing.overshoot: 2 }
    }
}

矩形进入场景并根据当前状态（设置在父级中的某个位置）使其离开。

现在我想创建更多视图（单独的文件），具有与上述相同的效果，但内容不同。如果将来需要对此效果进行一些更新，我想在一个地方进行更改，而不是在每个使用它的屏幕上进行更改。

这可以在 QML 中以某种方式完成吗？

【问题讨论】：

标签： qt qml extensibility

【解决方案1】：

您可以将它定义为一个项目，并给它一个属性来指定它操作的对象。一般概念可以在这里看到：

SlidingTransition.qml:

Item {
    property Item container;

    state: "start"
    states: [
        State {
            name: "start"
            AnchorChanges { target: container; anchors.verticalCenter: undefined }
            AnchorChanges { target: container; anchors.bottom: container.parent.top }
        },
        State {
            name: "center"
            AnchorChanges { target: container; anchors.bottom: undefined }
            AnchorChanges { target: container; anchors.verticalCenter: container.parent.verticalCenter }
        }
    ]

    transitions: Transition {
        AnchorAnimation { duration: 800; easing.type: Easing.InOutBack; easing.overshoot: 2 }
    }
}

main.qml:

Text {
    id: example
    width: parent.width
    height: parent.height
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.bottomMargin: 5
    text: "Hello out there!"

    SlidingTransition {
        id: textState
        container: example
    }
}

现在设置textState.state = "center"，您应该会看到它发生。如果你想让它变得不那么麻烦，你可以做一些事情，比如默认 container 属性到父级并将 SlidingTransition.state 绑定到容器的状态。

【讨论】：

这正是我想要实现的。谢谢！