QML中多个页面之间切换

在 QML 中多个页面之间的切换有多种实现方式每种方式都适用于不同的场景。根据你的应用全屏、EGLFS 环境、包含主界面、锁屏、设置、对话框等这里列出最常用的几种方法。一、StackView推荐用于导航栈StackView是 QtQuick.Controls 提供的页面栈管理器非常适合有层级导航的场景例如主页面 → 设置页面 → 子设置页面支持 push/pop 过渡动画。main.qmlimport QtQuick 2.15 import QtQuick.Window 2.15 import QtQuick.Controls 2.15 import QtQuick.Layouts 1.15 ApplicationWindow { id:mainWindow width: 1920 height: 1080 visible: true StackView { id: stackView anchors.fill: parent initialItem: mainPage } Component { id: mainPage Rectangle { color: lightgray Button { text: 去设置 onClicked: stackView.push(settingPage) } } } Component { id: settingPage Rectangle { color: lightblue Button { text: 返回 onClicked: stackView.pop() } } } }二、Loader动态加载Loader可以按需加载一个 QML 组件适合临时性页面或资源占用大的页面如相机预览可以延迟加载以提高启动速度。main.qmlimport QtQuick 2.15 import QtQuick.Window 2.15 import QtQuick.Controls 2.15 import QtQuick.Layouts 1.15 ApplicationWindow { id:mainWindow width: 1920 height: 1080 visible: true signal setTextToSubPageNotify(string text) RowLayout{ width: parent.width height:parent.height anchors.margins: 5 spacing: 10 ColumnLayout{ Layout.preferredWidth: 100 Layout.fillHeight:true anchors.margins: 5 spacing: 10 Layout.alignment: Qt.AlignTop Button { text: 打开设置 onClicked: { pageLoader.source SettingsPage.qml // 可以通过 pageLoader.item 访问加载的根对象 } } Button { text: 关闭设置 onClicked: { closeSettings() } } Button { text: 与子界面交互 onClicked: { setTextToSubPageNotify(test) } } } Item{ Layout.fillWidth: true Layout.fillHeight:true visible: true Loader { id: pageLoader anchors.fill: parent source: // 默认空 } } } function closeSettings() { pageLoader.source // 卸载页面 } Connections { target: pageLoader.item // 监听的目标对象 function onCloseClickedNotify() { closeSettings() console.log(子组件传来.) } } }SettingsPage.qmlimport QtQuick 2.15 import QtQuick.Controls 2.15 Rectangle{ id:root width: parent.width height: parent.height color: red signal closeClickedNotify Label{ id:name text: hello world. color:white } Button { text: 设置 anchors.centerIn: parent onClicked: { root.closeClickedNotify() console.log(矩形被点击了) } } Connections { target: mainWindow // 监听的目标对象 function onSetTextToSubPageNotify(text) { name.text text console.log(子组件传来.) } } }两个页面之间交互数据使用信号槽机制。三、SwipeView手势滑动切换SwipeView支持左右滑动切换页面适合平级页面如标签页、轮播图。main.qmlimport QtQuick 2.15 import QtQuick.Window 2.15 import QtQuick.Controls 2.15 import QtQuick.Layouts 1.15 ApplicationWindow { id:mainWindow width: 1920 height: 1080 visible: true SwipeView { id: swipeView anchors.fill: parent Rectangle { color: red; Text { text: 页面1 } } Rectangle { color: green; Text { text: 页面2 } } Rectangle { color: blue; Text { text: 页面3 } } } }四、多个 Item visible 切换简单直接所有页面作为根容器的直接子元素通过控制visible和z来切换。这是你目前使用的方式锁屏、设置界面等。main.qmlimport QtQuick 2.15 import QtQuick.Window 2.15 import QtQuick.Controls 2.15 import QtQuick.Layouts 1.15 ApplicationWindow { id:mainWindow width: 1920 height: 1080 visible: true // 主页面 Rectangle { id: mainPage anchors.fill: parent color:red visible: true Button{ text: show setting onClicked: { showSettings() } } } // 设置页面 Rectangle { id: settingsPage anchors.fill: parent color:green visible: false Button{ text: hide setting onClicked: { hideSettings() } } } // 锁屏层 Rectangle { id: lockScreen anchors.fill: parent visible: false z: 9999 } function showSettings() { mainPage.visible false settingsPage.visible true } function hideSettings() { mainPage.visible true settingsPage.visible false } }在 Qt 的官方定义中EGLFS 就是为嵌入式 Linux 设备量身打造的平台插件。EGLFS 的设计目标就是在没有完整窗口系统如 X11 或 Wayland的轻量级环境下提供高效的图形显示。这完全契合嵌入式系统的特点硬件资源有限追求精简和高效。EGLFS 和普通电脑开发环境的区别特性EGLFS 环境 (嵌入式)桌面环境 (Windows/Linux/X11)窗口系统无(直接渲染)有(如 X11, Wayland, Windows)图形栈轻量级直接对接硬件驱动重量级通过系统 compositor多窗口支持受限通常仅支持一个全屏窗口完整支持多个窗口随意切换典型设备工控机、平板、智能设备、开发板个人电脑、服务器资源占用极低较高