QML中GUI屏幕过渡是如何工作的

Question

我是一名C++开发人员，现在正在学习使用QtQuick中的QML进行GUI开发。

在GUI创建过程中，用户只能看到一个屏幕。根据用户的交互，屏幕会切换。但实际上背后发生了什么呢？

有很多关于如何设计单个屏幕的信息，但是如何管理它们状态之间的转换的资源却非常少。

当应用程序启动并更改图层顺序以显示一个屏幕时，所有屏幕和组件是否都已加载，

还是

在用户操作之后，新屏幕被构建、加载并且旧屏幕被销毁（一次只有一个屏幕在内存中）？

这种类型的处理术语是什么？

如果能指出我可以找到这样的信息的地方，那将会非常有帮助。

如果您无法理解我的问题，请告诉我。我会重新写一遍！

- Daniel Sampras

Answer 1

有一个方便的现成解决方案可用：StackView。它提供了内置的页面切换效果，可以让页面滑动/淡入淡出。

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

StackView 允许您 推送 项目、URL 和组件。当推送后两者之一时，StackView 会在适当的时候自动创建和销毁实例。例如，如果您推送多个 URL 或组件，则仅实例化成为堆栈上当前项目的顶部项目。一旦您从堆栈中 弹出 项目，它将按需创建下面的项目实例，一旦它成为堆栈上当前最顶部的项目。StackView 还允许您 替换 堆栈中的一个或多个项目。当从堆栈中弹出或替换动态创建的项目时，它会在相应的转换完成后自动销毁实例。

- jpnurmi

---

有没有办法关闭 Stackview 默认提供的屏幕转换动画？ - Frank Liu

是的，您可以将 StackView.Immediate 作为 push()、pop() 或 replace() 的最后一个参数传递。 - jpnurmi

@jpnurmi，是否可以根据特定屏幕的StackView状态在getTransition()中启动转换，例如如果它处于活动状态，则开始向该屏幕的转换？ - jxgn

Answer 2

使用状态之一可以在不同屏幕之间切换的可能选项：

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

- Velkan

Answer 3

您可以使用Loader来加载不同的qml文件或qml组件。 示例：

import QtQuick 2.0
Item {
    width: 200; height: 200
    Loader { id: pageLoader }
    MouseArea {
        anchors.fill: parent
        onClicked: pageLoader.source = "Page1.qml"
    }
}

- Konstantin T.