QML share states and transitions

Question

In my application I have a configuration screen defined in a file: "ConfigScreen.qml". It contains states, and transitions defined between them to make it appear and disappear smoothly:

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 }
    }
}

The rectangle enters the scene and leaves it accordingly to the current state (that is set somewhere in parent).

Now I would like to create some more views (separate files) having the same effect as above, but different contents. In case some update is needed to this effect in the future, I'd like to change it in one place, not in every screen that makes use of it.

Could this be done in QML in some way?

Answer 1

You could define it as an item and give it a property to specify the object it operates on. The general concept could be seen here:

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
    }
}

Now set textState.state = "center" and you should see it happen. If you want to make it a little less cumbersome, you can probably do things like default the container property to the parent and bind SlidingTransition.state to the container's state.