在 QML 中，有几种常见的方法可以实现界面的切换。以下是几种常见的方式：
1. 使用 StackView
StackView 是用于管理界面堆叠的控件，它允许你以栈的方式进行界面切换。你可以将多个 Item（界面）推入或弹出堆栈，从而实现切换。
示例：
qml
i
mport QtQuick 2.15 import QtQuick.Controls 2.15 ApplicationWindow { visible: true width: 640 height: 480 StackView { id: stackView anchors.fill: parent initialItem: Page1 { } Component.onCompleted: { // 在初始界面显示后，可以通过代码推送新的界面 stackView.push(Page2) } } Component { id: page1 Page1 { // 内容 } } Component { id: page2 Page2 { // 内容 } } } Page1.qml --------- import QtQuick 2.15 import QtQuick.Controls 2.15 Rectangle { width: 640 height: 480 Button { text: "Go to Page 2" onClicked: stackView.push(page2) } } Page2.qml --------- import QtQuick 2.15 import QtQuick.Controls 2.15 Rectangle { width: 640 height: 480 Button { text: "Back to Page 1" onClicked: stackView.pop() } }
2. 使用 Loader
Loader 可以动态加载 QML 组件，可以用它来实现界面切换。当你需要加载不同的界面时，Loader 会替换其 source 属性的内容。
示例：
qml
import QtQuick 2.15 import QtQuick.Controls 2.15 ApplicationWindow { visible: true width: 640 height: 480 Loader { id: loader anchors.fill: parent source: "Page1.qml" } Button { text: "Switch to Page 2" anchors.bottom: parent.bottom anchors.horizontalCenter: parent.horizontalCenter onClicked: loader.source = "Page2.qml" } }
3. 使用 Repeater 和 StackLayout
如果你有多个页面需要切换，并且它们之间有类似的布局，可以使用 Repeater 配合 StackLayout 来动态生成和管理页面。
示例：
qml
import QtQuick 2.15 import QtQuick.Controls 2.15 import QtQuick.Layouts 1.15 ApplicationWindow { visible: true width: 640 height: 480 StackLayout { id: stack anchors.fill: parent Repeater { model: 2 // Number of pages delegate: Rectangle { width: stack.width height: stack.height color: index % 2 === 0 ? "lightblue" : "lightgreen" Button { text: index % 2 === 0 ? "Page 1" : "Page 2" anchors.centerIn: parent onClicked: stack.currentIndex = (stack.currentIndex + 1) % 2 } } } } }
4. 使用 States 和 Transitions
States 和 Transitions 提供了一种基于状态的界面切换方法，适合用于简单的视图切换场景。
示例：
qml
import QtQuick 2.15 import QtQuick.Controls 2.15 ApplicationWindow { visible: true width: 640 height: 480 Rectangle { width: 640 height: 480 state: "page1" states: [ State { name: "page1" when: currentState === "page1" PropertyChanges { target: page1 visible: true } PropertyChanges { target: page2 visible: false } }, State { name: "page2" when: currentState === "page2" PropertyChanges { target: page1 visible: false } PropertyChanges { target: page2 visible: true } } ] transitions: [ Transition { from: "page1" to: "page2" reversible: true ParallelAnimation { NumberAnimation { properties: "opacity"; from: 0; to: 1; duration: 500 } } } ] Rectangle { id: page1 width: 640 height: 480 color: "lightblue" visible: true Button { text: "Go to Page 2" onClicked: currentState = "page2" } } Rectangle { id: page2 width: 640 height: 480 color: "lightgreen" visible: false Button { text: "Back to Page 1" onClicked: currentState = "page1" } } } }
总结
StackView：适用于复杂的界面堆叠和导航场景。
Loader：适合动态加载和切换不同的 QML 组件。
Repeater 和 StackLayout：用于动态生成和管理多个类似界面。
States 和 Transitions：适用于状态驱动的视图切换和动画效果。
