Question

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

Answer 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绑定到容器的状态。

QML共享状态和转换

1 个答案: