代码编织梦想

堆叠式界面的实现的核心组件就是StackView。StackView是一个基于栈的导航浏览模型,可以与一组关联的页面一起使用。当用户浏览深层页面时,深层页面被推到栈顶,当用户选择返回时,之前浏览的页面会再次弹出。

堆叠式界面的效果

上述演示中,界面一共有四个:分别是home、profile、about和editprofile

上述四个界面中使用的核心组件是Page,该组件在QtQuick.Controls中,Page是一个容器控件,可以方便地添加页眉、页脚以及其他item。page的结构如下

上述四个界面的实现如下

Home.qml

import QtQuick 2.6
import QtQuick.Controls 2.5

Page {
    title: qsTr("Home")
    Label {
        anchors.centerIn: parent
        text: qsTr("Home Screen")
    }
}

 

Profile.qml

import QtQuick 2.0
import QtQuick.Controls 2.5

Page {
    title: qsTr("Profile")

    Column {
        anchors.centerIn: parent
        spacing: 10
        Label {
            text: qsTr("Profile page")
            anchors.horizontalCenter: parent.horizontalCenter
        }

        Button {
            text: qsTr("Edit")
            anchors.horizontalCenter: parent.horizontalCenter
            onClicked: {
                stackview.push("EditProfile.qml")
            }
        }
    }
}

 

About.qml

import QtQuick 2.6
import QtQuick.Controls 2.5

Page {
    title: qsTr("About")

    Label {
        text: qsTr("About page")
        anchors.centerIn: parent
    }
}

 

EditProfile.qml

import QtQuick 2.6
import QtQuick.Controls 2.5

Page {
    title: qsTr("EditProfile")

    Label {
        text: qsTr("edit profile")
        anchors.centerIn: parent
    }
}

上述四个界面实现完之后,就是如何用StackView组件将四个界面串起来,具体代码如下

import QtQuick 2.14
import QtQuick.Window 2.14
import QtQuick.Controls 2.5

ApplicationWindow {
    id:root
    visible: true
    height: 480
    width: 640

    header: ToolBar {
        ToolButton {
            id:toolbtn
            text: stackview.depth>1?"\u25C0" : "\u2630"
            //button的图标是根据stackview的层级来决定显示哪个,而且,内容是有Unicode吗组成,\u2630是三个横线,而\u25C0是三角号
            //depth表示的是stackview中item的数目
            onClicked: {
                if (stackview.depth>1) {//当depth大于1时,表示已经进入了深层的界面中,所以此时的toolbutton的图标是三角号,所以此时要执行pop
                    stackview.pop()//将一个或多个元素从栈顶移除,从而达到界面回退的效果
                }
                else {
                    drawer.open()//打开draw组件
                }
            }
        }

        Label {
            text: stackview.currentItem.title//显示栈顶item的title
            anchors.centerIn: parent
        }
    }

    Drawer {//Drawer提供了一个基于滑动的侧面板,以提供导航界面的标题。
        id:drawer
        width: root.width*0.6
        height: root.height

        Column {
            anchors.fill: parent
            ItemDelegate {//ItemDelegate显示标准视图项。ItemDelegate相当于一个图形界面的代理,当点击ItemDelegate时,才会真正的显示图形界面,这里是将Profile放于stackview的顶部显示
                text: qsTr("Profile")
                width: parent.width
                onClicked: {
                    stackview.push("Profile.qml")//点击Profile时,将组件Profile压栈,呈现出画面前进的效果
                    drawer.close()
                }
            }

            ItemDelegate {
                text: qsTr("About")
                width: parent.width
                onClicked: {
                    stackview.push(aboutpage)
                    drawer.close()
                }
            }
        }
    }

    StackView {
        id:stackview
        anchors.fill: parent
        initialItem: Home {//指定初始界面。此时depth的值为1
        }
    }

    Component {//about组件
        id:aboutpage
        About {

        }
    }
}

其中,StackView中的initialItem属性指定了初始界面是Home,Component就是个组件元素,用来封装QML类型。

然后看一下ApplicationWindow的header属性,header是个ToolBar,在这个ToolBar中,有个ToolButton,button的图标是根据stackview的层级来决定显示哪个,而且,内容是有Unicode吗组成,\u2630是三个横线,而\u25C0是三角号

Drawer提供了一个基于滑动的侧面板,以提供导航界面的标题。

 

参考

《qml book》

 

欢迎大家评论交流,作者水平有限,如有错误,欢迎指出

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接: https://blog.csdn.net/Master_Cui/article/details/111059754

一次Config结果保存不成功的修复-爱代码爱编程

一次Config结果保存不成功的修复 背景 (Zynq)Arm,QT界面实现,测试人员发现,UI界面配置修改后,马上关机后重启,UI设置值不正确;启动过程中有一定概率出现卡顿。【(别人定制的系统和程序实现)配置显示使用QSetting实现】 Invetigation&Debug 1.文件系统只读问题 第一印象,这个问题简单,应该是保存完没

QT 5.15 QSslSocket::connectToHostEncrypted: TLS initialization failed 问题-爱代码爱编程

在QT5.12版本时候碰到这个问题复制对应文件夹下的libeay32.dll和ssleay32.dll即可, 升级到5.15时候发现这样还不够,需要再复制libcrypto-1_1.dll和libssl-1_1.dll文件。QT5.15安装只能用在线安装器,安装时吧OPENSSL也选上就会有后面两个文件了。另外5.15的文件目录结构也有所变化,例如我的工程

QT入门学习中最基础的那些事儿-爱代码爱编程

QT 编译流程 qmake -project ->.pro qmake ->makefile 从而实现平台无关性 make ->可执行程序 执行qmake 构建 运行 程序发布: 选择 release 生成exe文件 ​ 3.新建窗口Qwidget QApplication a(argc, argv); 创建了一个QApplicat

Qt进阶-事件过滤器eventFilter的使用-爱代码爱编程

事件过滤器eventFilter的使用 如果不提升控件,可以在控件的父对象中为控件安装事件过滤器,从而在父对象中处理子控件的事件; 在父对象源文件中: //为控件安装事件过滤器 ui.pushButton->installEventFilter(this); ui.pushButton_2->installEventFilter

Qt实现一个支持QSS的Switch Button(开关按钮)-爱代码爱编程

目录 Qt实现一个支持QSS的Switch Button(开关按钮)问题解决思路实现方式其他不同的 Switch Button总结 Qt实现一个支持QSS的Switch Button(开关按钮) 本文会比较长,目的是为了提供一种实现自定义复杂控件的方式,对于使用 QSS 应用样式的项目可能会有帮助。 实现的过程会相对比较复杂和难理解,仅作为

PyQt常用控件的组合使用-爱代码爱编程

写作思路 这次使用到的空间有以下几种: 1、QPushButton 是我们之前用的按钮,也可以当作Toggle用 2、QCheckBox 3、QSlider 4、QCalendarWidget 5、QProgressBar 效果如下,可以改变QFrame的颜色,只有选中了对应Toggle才能改变对应的颜色通道,CheckBox可以控制Slider是否显示

快上车,年前最后一波福利!-爱代码爱编程

上个月我在公众号搞了一个免单抽奖活动,很受欢迎!最后抽了三个人免单,基本每个人免了1000元,美滋滋。 既然各位这么开心,也这么喜欢这个活动,那么这次活动继续,我还加大了活动力度,把恰饭的钱也拿出来回馈一下各位老哥老妹。 这次我自掏腰包4000块钱,抽四个幸运读者。今明两天通过拼多多百亿补贴买东西的,我会从今明两天下单的人抽4个人,进行免单,

这几款 IDEA 主题也太好看了吧!!-爱代码爱编程

经常有小伙伴问我:“Guide 哥,你的 IDEA 主题怎么这么好看,能推荐一下不?”。就实在有点不耐烦了,才索性写了这篇文章。 在这篇文章中,我精选了几个比较适合 Java 编码的 IDEA 主题供小伙伴们选择。另外,我自己用的是 One Dark theme 这款。 注意:以下主题按照使用人数降序排序。推荐指数仅为个人看法。 Materia

说完观察者和发布订阅模式的区别,面试官不留我吃饭了-爱代码爱编程

点击上方 IT牧场 ,选择 置顶或者星标 技术干货每日送达 来到心仪已久的公司面试,刚推开门还没等我说话HR 小姐姐就主动问我:你是来参加面试的吧? 我心想不对啊:难道是因为我长的帅,小姐姐一眼就看出来我将来是这栋楼的主人,所以才主动跟我打招呼。 我昂起头,略微点点头:是的。 HR小姐姐:面试官马上就过来,我先带你去会议室。

再送一台自用电脑,跑大数据没压力-爱代码爱编程

最近有粉丝留言让我多搞些抽奖活动,为了感谢大家对本公众号的大力支持本次联合了10个号主,送2020最新款DERE R9 pro笔记本,祝所有人新的一年工作顺利,工资芝麻开花节节高,希望本次抽奖可以给你带来好运。生活不易,望大家来年加倍努力,升职加薪,事业家庭双丰收。 赠送规则 本次活动联合了其他 10 个号主一起赞助,共同送笔记本电脑,扫码下

好家伙,微信能设置2个头像了!-爱代码爱编程

上一期为大家分享了一个微信小技能,改昵称。 没想到反响很不错, 小伙伴玩得不亦乐乎,留言区变成一片彩色的海洋, 既然大家对这类微信小技能如此感兴趣。 今天,再给小伙伴分享一个微信玩法——双头像。 效果如下图所示↓ ,安卓iOS都支持哦。 小图查看的不太清晰,给你们实际操作一遍仔细瞧瞧。 制作步骤非常简单,进入工具后,顶部显示的是

128G 高配华为手机真香!包邮送一部-爱代码爱编程

转眼间,又快到年底了! 今年可谓跌宕起伏的一年,发生了很多大事。但无论怎样,日子还得照过,工作还得继续。在工作和学习之余,这次给大家送点福利,赠送一部 华为荣耀X10 Max 8GB+128GB竞速蓝! 2020一起努力升职加薪! 上车规则 本次活动联合了其他 9 个号主一起赞助,共同送手机,扫下面每个二维码回复 加薪 可分别获得一张 抽