Общие состояния и переходы 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" и вы должны увидеть это. Если вы хотите сделать это немного менее громоздким, вы, вероятно, можете сделать что-то вроде свойства default container родительскому объекту и привязать SlidingTransition.state к состоянию контейнера.