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

news2024/11/22 14:21:04

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

ApplicationWindow {
    id:root
    visible: true
    width: 340
    height: 480
    title: qsTr("Stack")

   // 抽屉: 侧滑菜单
Drawer{
    id:drawer
    width: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 // 用于显示页面的 StackView
    anchors.fill: parent // 填充父项
    initialItem: Home{} // 初始页面为 Home.qml
}
    }

Home.qml

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

“About.qml”

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

Profile.qml

import QtQuick 2.0
import QtQuick.Controls 2.3
Page {
    title: "Profile"
    Label{

            anchors.horizontalCenter: horizontalCenter
            text: "Profile Screen"
        }
 

}

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

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

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

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

相关文章

语义分割交互式智能标注工具 | 澳鹏数据标注平台

随着人工智能应用的大规模落地,数据标注市场在高速增长的同时,也面临着标注成本的挑战。据IDC报告显示:数据标注在AI应用开发过程中所耗费的时间占到了25%,部分医学类应用一条数据的标注成本甚至高达20元。数据精度的高要求、强人…

【Django学习笔记(五)】JQuery介绍

JQuery介绍 前言正文1、JQuery 快速上手1.1 下载 JQuery1.2 应用 JQuery 2、寻找标签(直接)2.1 ID选择器2.2 样式选择器2.3 标签选择器2.4 层级选择器2.5 多选择器2.5 属性选择器 3、寻找标签(间接)3.1 找到上一个兄弟3.2 找父子 …

浪潮分布式存储AS13000G6-M36改扩配后管理界面不能识别和标记硬盘的处理方法

AS13000G6 改配出问题的场景 浪潮分布式存储AS13000G6-M36渠道备货的分布式存储通常是流量机型,实际出货可能会涉及改配 集群部署完以后建议在系统视图下查看一下盘是否能识别 这个是正常的情况,可以正确管理到盘,硬盘侧边有绿色的指示灯。 如图是管理…

【Linux】进程控制详解

目录 前言 进程创建 认识fork 写时拷贝 再谈fork 进程终止 进程退出码 用代码来终止进程 常见的进程终止的方式 exit _exit 进程等待 进程等待的必要性 进程等待的方式 wait waitpid 详解status参数 详解option参数 前言 本文适合有一点基础的人看的&#…

计算机笔记(3)续20个

41.WWW浏览器和Web服务器都遵循http协议 42.NTSC制式30帧/s 44.三种制式电视:NTSC,PAL,SECAM 45.IP,子网掩码白话文简述: A类地址:取值范围0-127(四段数字(127.0.0.0&#xff09…

Oil Deposits (DFS BFS)

//新生训练 #include <iostream> #include <algorithm> #include <cstring> #include <queue> using namespace std; using PII pair<int, int>; const int N 205; int n, m; int dis[N][N]; int dx[] {0, 0, -1, 1, -1, 1, -1, 1}; int dy[]…

JAVAEE之Spring, Spring Boot 和Spring MVC的关系以及区别

1.Spring, Spring Boot 和Spring MVC的关系以及区别 Spring: 简单来说, Spring 是⼀个开发应⽤框架&#xff0c;什么样的框架呢&#xff0c;有这么⼏个标签&#xff1a;轻量级、⼀ 站式、模块化&#xff0c;其⽬的是⽤于简化企业级应⽤程序开发 Spring的主要功能: 管理对象&am…

《pytorch深度学习实战》学习笔记第1章

第1章 深度学习和pytorch库简介 1.1 深度学习革命 机器学习依赖特征工程。而深度学习是从原始数据中自动找出这样的特征。 1.2 pytorhc深度学习 pytorch是一个python程序库。pytorch为深度学习提供了入门指南。pytorch的核心数据结构——张量&#xff0c;为一个多维数组&…

slowhttp攻击漏洞原理解析和防御,以及LiqunKit 综合漏洞利用工具详细使用

slowhttp攻击漏洞原理解析和防御,以及LiqunKit 综合漏洞利用工具详细使用。 Slowhttp攻击是一种拒绝服务(DoS)攻击,它利用了HTTP协议的一些特性来耗尽服务器资源,导致服务器对正常请求的响应变慢或无法响应。这种攻击的特点是长时间占用服务器的连接,而不是发送大量流量…

网工内推 | 国企运维,IA认证,大专以上即可,最高22K

01 深圳建广数字科技有限公司青岛分公司 招聘岗位&#xff1a;桌面运维工程师 职责描述&#xff1a; 1.根据运维服务请求完成关于操作系统、应用软件、办公设备、网络等方面的安装、管理与维护&#xff1b; 2.各种PC软硬件故障诊断、排查及升级&#xff1b; 3.桌面设备&…

爬虫 红网时刻 获取当月指定关键词新闻 并存储到CSV文件

目标网站&#xff1a;红网 爬取目的&#xff1a;为了获取某一地区更全面的在红网已发布的宣传新闻稿&#xff0c;同时也让自己的工作更便捷 环境&#xff1a;Pycharm2021&#xff0c;Python3.10&#xff0c; 安装的包&#xff1a;requests&#xff0c;csv&#xff0c;bs4&…

锂电池充电电压4.2V,那么充电器升压到9V、12V意义何在?

锂电池充电电压4.2V&#xff0c;那么充电器升压到9V、12V意义何在&#xff1f;PD、QC等快充又是如何工作&#xff1f;带着这些问题&#xff0c;笔者阅读了一些大佬的分析&#xff0c;在此整理下来&#xff0c;并略抒愚见。 手机快充协议简介&#xff0c;PD&#xff0c;PE&#…

01-XML-04XML处理

XML处理 DOM DOM解析要求解析器将整个XML文件全部加载到内存中&#xff0c;生成一个Document对象。 优点&#xff1a;元素和元素之间保留结构&#xff0c;关系&#xff0c;可以针对元素进行增删改查操作。 缺点&#xff1a;如果XML文件过大&#xff0c;可能会导致内存溢出。SA…

自动驾驶之心规划控制笔记

Search-based Path Planning Methods Path Finding Problem 一般来说指标有距离,耗费时间,能量,或者多目标。 左图是拓扑地图,蓝色的点就是顶点,绿色的线是连接关系。最后得到的是一个从哪里走的一个最优,并非精细解。 右图是栅格地图,这个搜索出来的是在相对分辨率比…

vue快速入门(四)v-html

注释很详细&#xff0c;直接上代码 上一篇 新增内容 使用v-html将文本以html的方式显示 源码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, …

147.【2024Java八股-全网最全-10w字】

100道Java经典面试题 (一)、准备篇1.HR如何筛选简历?2.部门负责人如何筛选简历?3.简历模块布局4.应届生如何找到合适的练手项目?5.深入学习哪些业务模块呢?6.Java程序员的面试过程 (二)、Redis篇1.redis经常使用在哪些场景?2.Redis进行查询的流程是什么?3.什么是缓存穿透…

软件设计师28--SQL语言

软件设计师28--SQL语言 考点1&#xff1a;普通查询SQL语言SQL语言 - 查询例题&#xff1a; 考点2&#xff1a;分组查询SQL语言 - 查询例题&#xff1a; 考点3&#xff1a;权限控制SQL语言例题&#xff1a; 考点1&#xff1a;普通查询 SQL语言 SQL语言 - 查询 例题&#xff1a;…

又一AI工具开源!企业应该如何搭上这趟AI快车

大模型技术在近两年来飞速发展&#xff0c;企业对大模型的认知更加理性、务实。大模型本身不会直接产生价值&#xff0c;但在大模型基础架构之上开发出的AI应用&#xff0c;带来技术创新及业务增长&#xff0c;成为企业真正关心的问题。 基于大模型开发的又一个AI工具诞生&…

基于JSP的农产品供销服务系统

背景 互联网的迅猛扩张彻底革新了全球各类组织的运营模式。自20世纪90年代起&#xff0c;中国的政府机关和各类企业便开始探索利用网络系统来处理管理事务。然而&#xff0c;早期的网络覆盖范围有限、用户接受度不高、互联网相关法律法规不完善以及技术开发不够成熟等因素&…

企业动态|同创永益中标人保集团2023年混沌工程平台采购项目

2024年1月&#xff0c;经过严格的技术评审和商务洽谈&#xff0c;同创永益从众多厂商中脱颖而出&#xff0c;以综合评分第一名的佳绩一举拔得头筹&#xff0c;成功中标人保集团2023年混沌工程平台采购项目&#xff0c;本项目是同创永益混沌工程平台首次在保险公司内应用。人保集…