QML嵌套页面的实现学习记录

StackView是一个QML组件,用于管理和显示多个页面。它提供了向前和向后导航的功能,可以在堆栈中推入新页面,并在不需要时将页面弹出。

ApplicationWindow {id:rootvisible: truewidth: 340height: 480title: qsTr("Stack")// 抽屉: 侧滑菜单
Drawer{id:drawerwidth:parent.width*0.66 // 设置抽屉的宽度为父项宽度的 0.66 倍height: parent.height // 设置抽屉的高度为父项的高度Column {anchors.fill: parent // 将列填充满父项ItemDelegate { // 第一个 ItemDelegate,用于“Profile”选项text: "Profile"width: parent.width // 将宽度设置为父项的宽度highlighted: ListView.isCurrentItem // 当前项是否被高亮显示onClicked: {stackview.push("Profile.qml") // 点击时将 "Profile.qml" 页面推送到 StackView 中drawer.close() // 关闭抽屉}}ItemDelegate { // 第二个 ItemDelegate,用于“About”选项text: "About"width: parent.width // 将宽度设置为父项的宽度highlighted: ListView.isCurrentItem // 当前项是否被高亮显示onClicked: {stackview.push("About.qml") // 点击时将 ""About.qml"" 页面推送到 StackView 中drawer.close() // 关闭抽屉}}}
}header: ToolBar { // 标题栏Material.background: Material.Orange // 标题栏的背景颜色Label { // 标题栏的标题text: stackview.currentItem.title // 显示当前页面的标题font.pixelSize: 25 // 字体像素大小anchors.centerIn: parent // 居中对齐于父项}ToolButton { // 标题栏的工具按钮text: stackview.depth > 1 ? "◀" : "☰" // 根据 StackView 的深度设置文本,大于1显示"◀",否则显示"☰"font.pixelSize: Qt.application.font.pixelSize * 1.6 // 字体像素大小onClicked: {if(stackview.depth > 1) {stackview.pop() // 当深度大于1时,返回上一页} else {drawer.open() // 否则,打开抽屉}}}
}StackView {id: stackview // 用于显示页面的 StackViewanchors.fill: parent // 填充父项initialItem: Home{} // 初始页面为 Home.qml
}}

Home.qml

import QtQuick 2.0
import QtQuick.Controls 2.3
Page {title: "Home"Label{anchors.centerIn: parenttext: "Home Screen"}
}

“About.qml”

import QtQuick 2.0
import QtQuick.Controls 2.3
Page {title: "About"Label{anchors.centerIn: parenttext: "About Screen"}
}

Profile.qml

import QtQuick 2.0
import QtQuick.Controls 2.3
Page {title: "Profile"Label{anchors.horizontalCenter: horizontalCentertext: "Profile Screen"}}

这段代码展示了一个带有侧滑菜单和标题栏的界面,在StackView中显示多个页面。
Drawer界面是一个侧滑菜单,它包含了两个ItemDelegate:Profile和About。当点击其中一个ItemDelegate时,它会通过stackview.push()方法将相应的页面推送到StackView中,并关闭Drawer。
标题栏位于Drawer之上,并包含一个Label用于显示当前页面的标题。标题栏还包含一个ToolButton,其文本基于StackView的深度设置。当StackView的深度大于1时,ToolButton文本显示为"◀",表示返回上一页;否则,文本显示为"☰",表示打开Drawer。
StackView是实际用于显示页面的部分。在上面的代码中,它设置为填充父项,并且初始页面是Home。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/1323653.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

计算机的发展历程

本文 我们来说说计算机的发展历程 世界上第一台计算机 1946年2月世界上第一台计算机埃尼阿克ENIAC (Electronic Numerical Integrator AndComputer 电子数字积分式计算机) 在美国诞生 是由宾夕法尼亚大学物理学家约翰.莫克利(J.Mauchly) 和工程师普雷斯伯.埃克特(J.P.Eckert…

redis事务(redis features)

redis支持事务,也就是可以在一次请求中执行多个命令。redis中的事务主要是通过MULTI和EXEC这两个命令来实现的。 MULTI命令用来开启一个事务,事务开启之后,所有的命令就都会被放入到一个队列中,最后通过一个EXEC命令来执行事务中…

windows@软件显示模糊@屏幕显示器分辨率和精细度

文章目录 refsDPIPPIPPI (Pixels Per Inch)DPI (Dots Per Inch) 屏幕尺寸数windows中DPI设置对单个应用设置DPI兼容性设置使用系统全局设置 获取屏幕(监视器)信息👺获取监视器的型号pnp 监视器windows 获取屏幕分辨率 高分辨率屏幕高分辨率和高精细度屏幕&#x1f4…

数字化赋能农业创新:数字乡村促进农村产业融合

随着信息技术的迅猛发展和广泛应用,数字化已经成为推动农业创新发展的重要引擎。数字乡村建设通过引入现代信息技术,为农业产业带来了前所未有的发展机遇,促进了农村产业的深度融合与升级。本文将从数字化赋能农业创新的角度,探讨…

ubuntu安装sublime3并设置中文

安装Sublime Text 3 在Ubuntu上安装Sublime Text 3可以通过以下步骤进行: 打开终端。 导入Sublime Text 3的GPG密钥: wget -qO- https://download.sublimetext.com/sublimehq-pub.gpg | sudo apt-key add - 添加Sublime Text 3的存储库: …

2024最新AI创作系统ChatGPT源码+Ai绘画网站源码,GPTs应用、AI换脸、插件系统、GPT文档分析、GPT语音对话一站式解决方案

一、前言 SparkAi创作系统是基于ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统,支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美,那么如何搭建部署AI创作ChatGPT?小编这里写一个详细图文教程吧。已支持GPT…

vivado适用于 UltraScale 和 UltraScale+ 器件的 eFUSE 寄存器访问和编程

FUSE_DNA : 唯一的器件 DNA 每个 UltraScale 器件都有唯一的器件 ID , 称为器件 DNA , 且赛灵思已将此 DNA 编程到器件中。用户无法对 FUSE_DNA 进行编程。 UltraScale 器件具有 96 位 DNA 。您可在 Vivado Design Suite Tcl 控制台中…

Qt项目通过.pri文件将众多文件按功能模块分类显示,开发大型项目必备

Chapter1 Qt项目通过.pri文件将众多文件按功能模块分类显示,开发大型项目必备 Chapter2 在Qt项目中添加pri文件 原文链接:在Qt项目中添加pri文件_qtpri-CSDN博客 前言 一般我们创建Qt项目工程的时候,都是直接把所有的项目,头文…

代码随想录阅读笔记-二叉树【合并二叉树】

题目 给定两个二叉树,想象当你将它们中的一个覆盖到另一个上时,两个二叉树的一些节点便会重叠。 你需要将他们合并为一个新的二叉树。合并的规则是如果两个节点重叠,那么将他们的值相加作为节点合并后的新值,否则不为 NULL 的节…

Day18-【Java SE进阶】多线程

一、线程 1. 什么是线程? 线程(Thread)是一个程序内部的一条执行流程。程序中如果只有一条执行流程,那这个程序就是单线程的程序。 2. 多线程 多线程是指从软硬件上实现的多条执行流程的技术(多条线程由CPU负责调度执行) 3. 如何在程序中创建出多条线程? Ja…

软件设计师27--规范化理论

软件设计师27--规范化理论 考点1:规范化理论基本概念函数依赖规范化理论--Amstrong公理体系候选键主属性与非主属性例题: 考点2:范式判断规范化理论规范化理论 - 范式例题: 考点3:范式分解保持函数依赖分解无损分解模式…

【大数据存储】实验4 NoSQL数据库

实验4 NoSQL数据库 NoSQL数据库的安装和使用实验环境: Ubuntu 22.04.3 Jdk 1.8.0_341 Hadoop 3.2.3 Hbase 2.4.17 Redis 6.0.6 mongdb 6.0.12 mogosh 2.1.0 Redis 安装redis完成 新建终端启动redisredis-server新建一个终端redis-cli 建表操作 尝…

文心一言指令词宝典之旅行篇

作者:哈哥撩编程(视频号、抖音、公众号同名) 新星计划全栈领域优秀创作者博客专家全国博客之星第四名超级个体COC上海社区主理人特约讲师谷歌亚马逊演讲嘉宾科技博主极星会首批签约作者 🏆 推荐专栏: 🏅…

OSPF中配置静态路由负载分担实验简述

OSPF中配置静态路由负载分担 实验简述 在静态路由负载分担中,多个路由器被配置为共享负载的目标,以实现流量的均衡分配。 到达目的地有N条相同度量值的路径,默认值60,N条路由是等价路由,数据报文在N条链路上轮流发送。…

单机多实例mysql8.x数据库主从配置

单机配置多实例mysql8.x集群 要求: 在一台服务器上配置两个(一主一从)mysql8.X版本数据库,两台服务ip相同,端口不同 数据库版本 mysql-8.0.31-linux-glibc2.12-x86_64.tar 下载地址:https://downloads.m…

SVD图像处理(MATLAB)

使用SVD处理图像模拟演示 参考文献 https://github.com/matzewolf/Image_compression_SVD/blob/master/svd_compress.m MATLAB代码 clc; clearvars; close all;A_orgimread("lena256.bmp"); compr20; A_orgdouble(A_org);A_red svd_compress( A_org, compr ); s…

瀚海贫者福,铜子恣意游

上学时打饭追求性价比的习惯一直不改,半个大鱼头三块钱,一份豆腐一块钱,还有一个红烧茄子2块5,再加三毛钱的饭,共6块8毛钱,早晚餐也会有这类性价比高又营养的选择,科大食堂现在越来越人性化&…

从redux的基本概念渐进式理解redux/toolkit的用法

概念 Redux toolkit是帮助提高redux开发效率的一个库 React-redux 是将React和Redux toolkit绑定在一起的一个库 action 是一个对象,里面有一个type属性 action creator是一个函数,这个函数可以返回上面的action对象。 reducer 是一个函数,接受两个参数(initilastate, acti…

React19 新特性 – 附带代码示例的更新

ReactJS 是前端开发世界中最流行的 UI 库之一。我喜欢 React 的原因之一就是它背后的团队以及社区对它的热情。 当社区提出对新功能和改进的需求时,团队会倾听。 React 的未来令人兴奋而有趣。如果我必须用一句话来总结,我会说这几乎概括了一切&#x…

【基础篇】1.6 开发环境搭建

写在前面 学习STM32的开发,我们需要选选择合适型号,STM32开发板。通过前面的博客,我们知道它通常包含了微控制器、外设接口和必要的电路组件。 在搭建STM32开发环境时,开发者需要首先安装选定的IDE(如Keil MDK&#…