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

【问题标题】：How GUI screen transition works in qmlGUI 屏幕转换如何在 qml 中工作
【发布时间】：2017-02-01 00:01:24
【问题描述】：

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

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

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

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

或

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

这种处理方式的术语是什么。

指出我在哪里可以找到这些信息会很有帮助。

如果您不能理解我的问题，请告诉我。我再重写一次！！

【问题讨论】：

标签： qt user-interface qml ram qtquick2

【解决方案1】：

有一个方便的现成解决方案可用：StackView。它为滑动/淡入和淡出的页面提供内置转换。

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

StackView 允许您push 项目、URL 和组件。当推送后两者中的任何一个时，StackView 会在适当的时候自动创建和销毁实例。例如，如果您推送多个 URL 或组件，它只会实例化成为堆栈中当前项的最顶部的一个。一旦你pop 项目离开堆栈，一旦它成为堆栈上当前最顶层的项目，它就会按需创建该项目的实例。 StackView 还允许您replace 堆栈中的一项或多项。当从堆栈中弹出或替换动态创建的项目时，它会在相应的转换完成后自动销毁实例。

【讨论】：

Stackview默认提供的屏幕转换期间是否有关闭动画？
是的，您可以将StackView.Immediate 作为最后一个参数传递给 push()、pop() 或 replace()。
@jpnurmi 是否可以根据特定屏幕的 StackView 状态在 getTransition() 中启动转换，即如果它是 Active 则开始转换到屏幕？

【解决方案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
            }
        }
    ]
}

【讨论】：

【解决方案3】：

您可以使用Loader 加载不同的 qml-files 或 qml-components。

示例：

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

【讨论】：