0

在我的应用程序中，我在文件中定义了一个配置屏幕：“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 中完成吗？

4

1 回答 1

1

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

滑动过渡.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 绑定到容器的状态。

于 2012-05-29T04:19:02.917 回答