GUI 屏幕转换如何在 qml 中工作

Question

我是一名 C++ 开发人员，正在研究在 QtQuick 中使用 QML 进行 GUI 开发。

在 GUI 创建中，用户只能看到一个屏幕。并根据用户交互，切换屏幕。但背后究竟发生了什么？

只有关于如何设计单个屏幕的信息很多，但关于如何管理其状态转换的资源却很少。

是否在启动应用程序时加载了所有屏幕和组件，并将图层顺序更改为显示一次屏幕，

或

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

这种处理的术语是什么。

指出在哪里可以找到此类信息会很有帮助。

如果你不明白我的问题，请告诉我。我会重新写的！！

Answer 1

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

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

Answer 2

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

示例：

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

Answer 3

有一个方便的现成解决方案可用：StackView。它为 slide/fade 进出的页面提供内置转换。

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

StackView 允许您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 堆栈中的一项或多项。当从堆栈中弹出或替换动态创建的项目时，它会在相应的转换完成后自动销毁实例。

GUI 屏幕转换如何在 qml 中工作

How GUI screen transition works in qml

qt

user-interface

qml

ram

qtquick2