QML共享状态和转换

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