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綁定到容器的狀態。