How GUI screen transition works in qml

Question

I'm a C++ developer, now studying about GUI development using QML in QtQuick.

In GUI creation, only one screen is visible to the user. And based on user interaction, the screens are switched. But what actually happens behind?

There are lot of info only on how to design a single screen, but very less resource for how to manage the transitions of their states.

Are all the screens and components loaded when starting the application and change the layer order to display once screen,

OR

after an user action, the new screen is built, loaded and old is destroyed ( only one screen is in memory at a time)

What is the term for this type of handling.

It would be so helpful to point to where i can find such information.

If you can't understand my question,please let me know. I will rewrite again!!

Answer 1

There is a convenient ready-made solution available: StackView. It provides built-in transitions for pages that slide/fade in and out.

StackView {
    id: stack
    initialItem: Page {
        Button {
            text: "Push"
            anchors.centerIn: parent
            onClicked: stack.push(Qt.resolvedUrl("OtherPage.qml"))
        }
    }
}

StackView allows you to push items, URLs and components. When pushing either of the latter two, StackView automatically creates and destroys the instance when appropriate. For example, if you push multiple URLs or components, it will only instantiate the top-most one that becomes the current item on the stack. Once you pop items off the stack, it creates an instance of the item underneath on demand once it becomes the current top-most item on the stack. StackView also allows you to replace one or more items in the stack. When popping or replacing dynamically created items off the stack, it automatically destroys the instances after the respective transitions are finished.

Answer 2

One of the possible options to switch between different screens using states:

ColumnLayout {
    id: controls

    states: [
        State {
            id: state1
            name: "STATE1"

            property list<Item> content: [
                Loader {
                    ...
                },
                MyItem {
                    ...
                }
            ]

            PropertyChanges {
                target: controls
                children: state1.content
            }
        },
        State {
            id: state2
            name: "STATE2"

            property list<Item> content: [
                MyHud {
                    ...
                }
            ]

            PropertyChanges {
                target: controls
                children: state2.content
            }
        }
    ]
}