企业官网建设流程全解析

在 QML 中，多个页面之间的切换有多种实现方式，每种方式都适用于不同的场景。根据你的应用（全屏、EGLFS 环境、包含主界面、锁屏、设置、对话框等），这里列出最常用的几种方法。

一、StackView（推荐用于导航栈）

StackView是 QtQuick.Controls 提供的页面栈管理器，非常适合有层级导航的场景（例如：主页面 → 设置页面 → 子设置页面），支持 push/pop 过渡动画。

main.qml

import 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.qml

import 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.qml

import 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.qml

import 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.qml

import 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 和普通电脑开发环境的区别：