Qt Quick系列(6)—多风格UI页面

news2025/2/8 19:50:48

🚀作者：CAccept
🎂专栏：Qt Quick
在这里插入图片描述

文章目录

  • 前言
  • 桌面版本的UI界面
    • 代码示例
    • 相关知识点
  • 移动版风格的UI界面
    • 代码示例
  • 嵌套页面
    • 代码示例
    • 相关知识点
  • 并排页面
    • 代码示例
    • 相关知识点

前言

Qt Quick控件用于创建由标准化组件（如按钮、标签、滑块等）构建的用户界面。

  • QtQuick.Controls：基本控件。
  • QtQuick.Templates：为控件提供行为化的、非可化视的基本类型。
  • QtQuick.Controls.Imagine：为Imagine主题风格提供支持。
  • QtQuick.Controls.Material：为Material主题风格提供支持。
  • QtQuick.Controls.Universal：为Universal主题风格提供支持。
  • Qt.labs.platform：支持常用对话框，如文件、颜色等，以及系统图标和标准路径。

有时候我们会分不清哪个是menuBar，哪个是ToolBar，现在下面这个小小的应用程序给您答案，一定别又忘咯
在这里插入图片描述

在这篇文章中将会给大家分享各种”风格“的UI页面，希望您能够耐心看下去

桌面版本的UI界面

桌面版本的UI界面一般有菜单栏+工具栏+内容+提示状态栏，打开你的WPS就知道应该是什么样的啦

代码示例

要求：完成一个程序，有打开文件按钮和帮助按钮，当点击打开按钮时，会打开文件夹，当我们选中照片后，照片会在程序的中央进行显示，而点击帮助按钮则会显示一个提示框

main.qml

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.5
import Qt.labs.platform 1.0 as Platform
ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")


    background: Rectangle
    {
        color:"darkGray"
    }
    Image
    {
        id:image
        anchors.fill:parent
        //适应模式
        fillMode: Image.PreserveAspectFit
    }
	//设置工具栏ToolBar
    header:ToolBar{
        Flow{
            anchors.fill:parent
            ToolButton{
                text:"打开"
                icon.source:"images/open.png"
                //点击按钮触发打开文件夹
                onClicked: {
                    fileOpenDialog.open()
                }
            }
        }
    }
	//用于打开文件夹
    Platform.FileDialog
    {
        id:fileOpenDialog
        title:"选择照片"
        nameFilters: [
        	//用于筛选文件类型
            "Images files(*.png *jpg)","all files(*.*)"
        ]
        //点击后返回的fileOpenDialog.file就是图片路径
        onAccepted: {
            image.source = fileOpenDialog.file
        }
    }
    //设置menuBar
    menuBar:MenuBar{
        Menu{
            title:"&File"
            MenuItem{
                text:"&Open..."
                icon.source:"images/open.png"
                onTriggered: fileOpenDialog.open()
            }
        }
        Menu{
            title:"&Help"
            MenuItem{
                text:"&About..."
                icon.source:"images/open.png"
                onTriggered: aboutDialog.open()
            }
        }
    }
	//模拟”帮助对话框“
    Dialog
    {
        id:aboutDialog
        width: 300
        height: 150
        anchors.centerIn:parent
        title:"About"
        Label{
            anchors.fill:parent
            text:"这是about页面"
            horizontalAlignment: Text.AlignHCenter
        }
        //只有一个OK按钮
        standardButtons: Platform.StandardButton.Ok
    }
}

运行效果:
在这里插入图片描述

相关知识点

1、设置menuBar使用

menuBar:MenuBar{
		//菜单1
        Menu{
            title:"&File"
            MenuItem{
       			//子项功能
       			text:
                icon.source:
                onTriggered: 
            }
            MenuItem{
       			//子项功能
       			text:
                icon.source:
                onTriggered:
            }
        }
        //菜单2
        Menu{
            title:"&Help"
            MenuItem{
                //子项功能
       			text:
                icon.source:
                onTriggered:
            }
        }
    }

2、使用Platform.FileDialog来对文件夹进行打开选择

Platform.FileDialog
    {
        id:fileOpenDialog
        title:"选择照片"
        nameFilters: [
        	//用于筛选文件类型
            "Images files(*.png *jpg)","all files(*.*)"
        ]
        //点击后返回的fileOpenDialog.file就是文件点击后的路径
        onAccepted: {
            //相应操作
        }
    }

移动版风格的UI界面

移动版风格的UI界面一般是用侧滑菜单（Drawer）替换菜单，并且样式也一般会有所不同，接下来看我的例子吧👇

代码示例

功能还是和上面的一样只是将风格变成侧滑菜单，同样还是打开文件显示图片内容

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.5
//一些文件操作就可以用这个包
import Qt.labs.platform 1.0 as Platform
import QtQuick.Controls.Material  2.0
ApplicationWindow {
    visible: true
    width: 320
    height: 480
    title: qsTr("Hello World")


    background: Rectangle
    {
        color:"darkGray"
    }
    Image
    {
        id:image
        anchors.fill:parent
        //适应模式
        fillMode: Image.PreserveAspectFit
    }

    header:ToolBar{
        Material.background: Material.Orange
        ToolButton
        {
            icon.source: "images/baseline-menu-24px"
            onClicked: drawer.open()
        }

        Label
        {
            anchors.centerIn: parent
            text:"Image Viewer"
            font.pixelSize: 20
        }
    }
    Platform.FileDialog
    {
        id:fileOpenDialog
        title:"选择照片"
        nameFilters: [
            "Images files(*.png *jpg)","all files(*.*)"
        ]
        //点击后返回的fileOpenDialog.file就是图片路径
        onAccepted: {
            image.source = fileOpenDialog.file
        }
    }

    Drawer
    {
        id:drawer
        width:parent.width/3*2
        height: parent.height
        //ListView风格
        ListView
        {
            anchors.fill: parent
            //ListView里面要显示的数据都在model里面
            model:ListModel
            {
                ListElement
                {
                    text:"open..."
                    triggered:function()
                    {
                        fileOpenDialog.open();
                    }
                }
                ListElement
                {
                    text:"about..."
                    triggered:function()
                    {
                        aboutDialog.open();
                    }
                }
            }
            //使用delegate将model的数据进行显示
            delegate: ItemDelegate
            {
                text:model.text
                highlighted:ListView.isCurrentItem
                onClicked:{
                    drawer.close()
                    //触发triggered:function
                    model.triggered()
                }
            }

        }
    }

    Dialog
    {
        id:aboutDialog
        width: 300
        height: 150
        anchors.centerIn:parent
        title:"About"
        Label{
            anchors.fill:parent
            text:"这是about页面"
            horizontalAlignment: Text.AlignHCenter
        }
        standardButtons: Platform.StandardButton.Ok
    }
}

运行效果:
在这里插入图片描述

嵌套页面

我们将创建一个页面树，可以通过上级页面访问下级页面👇
在这里插入图片描述

该用户界面的关键组件是StackView。它允许我们将页面放在一个堆栈（stack）上，当用户想要返回时，可以弹出（pop）该堆栈，也可以压入（push）该堆栈，当哪个Page处于栈顶，那么就在主页面显示哪个Page。

代码示例

先提供Home.qml、Profile.qml、About.qml、EditProfile.qml各个页面的实现

Home.qml

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

Profile.qml

import QtQuick 2.0
import QtQuick.Controls 2.0

Page {
    title: "Profile"

    Column{
        anchors.centerIn: parent
        spacing: 10
        Button{
            anchors.horizontalCenter: parent.horizontalCenter
            text:"Edit"
            //点击的话将EditProfile组件进行追加
            onClicked: stackView.push("EditProfile.qml")
        }

        Label{
            anchors.horizontalCenter: parent.horizontalCenter
            text:"Profile Screen"
        }
    }
}

EditProfile.qml

import QtQuick 2.0
import QtQuick.Controls 2.0
Page {
    title:"EditProfile"
    Column{
        spacing:10
        anchors.centerIn: parent
        Label{
            anchors.horizontalCenter: parent.horizontalCenter
            text:"EditProfile Screen"
        }

    }
}

About.qml

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

main.qml

import QtQuick 2.0
import QtQuick.Controls 2.0

ApplicationWindow {
    id:window
    width: 320
    height: 480
    visible: true
    title: qsTr("Stack")

    header:ToolBar{
        ToolButton{
            //"\u25C0"是三角形状，"\u2630"是三条杠
            text:stackView.depth>1?"\u25C0":"\u2630"
            font.pixelSize: Qt.application.font.pixelSize*1.6
            onClicked: {
                if(stackView.depth>1){
                    //页面进行弹出（回滚到上个页面）
                    stackView.pop()
                }else{
                    //如果目前只有一个Home页面就对做边框进行打开
                    drawer.open()
                }
            }
        }
        Label{
            //文本是当前页面的title
            text:stackView.currentItem.title
            anchors.centerIn: parent
        }
    }

    //左边的抽拉式页面进行打开
    Drawer{
        id:drawer
        width: window.width*0.66;height: window.height

        Column{
            anchors.fill:parent

            ItemDelegate{
                text:"Profile"
                width: parent.width
                onClicked: {
                    //使用push来让stackView进行页面插入
                    stackView.push("Profile.qml")
                    drawer.close()
                }
            }
            ItemDelegate{
                text:"About"
                width: parent.width
                onClicked: {
                    stackView.push(aboutPage)
                    drawer.close()
                }
            }
        }
    }

    StackView{
        id: stackView
        anchors.fill: parent
        //初始化页面是Home
        initialItem: Home{}
    }

    Component{
        id:aboutPage
        About{}
    }
}

运行效果：
在这里插入图片描述

相关知识点

1、这种嵌套式的页面使用StackView控件来实现
常用到的属性有：initialItem: 指定初始页面的项（Item）。
常用到的方法有：
①push(item, properties): 将指定的项（Item）推入页面堆栈，并可以传递属性值给新的页面（属性值也可以为空）。
②pop(): 从页面堆栈中弹出当前页面。
③clear(): 清空页面堆栈，将堆栈恢复到初始状态，直接变成空

2、“\u25C0"是三角形状，”\u2630"是三条杠，可用作text属性的设置
在这里插入图片描述

在这里插入图片描述

并排页面

什么叫做并排页面呢，就像👇
在这里插入图片描述
我们创建了一个用户界面，该界面由三个页面组成，用户可以在其中切换。
在这里插入图片描述

代码示例

要实现并排页面，关键组件是SwipeView。而PageIndicator（底部的三个点）显示用户当前处于活动状态的页面，这有助于导航。
还是采用嵌套页面中的Home.qml、Profile.qml、About.qml、EditProfile.qml四个组件页面。

我们只需要将嵌套页面中的StackView控件改成SwipeView再加上PageIndicator导航就可以了，看我的main.qml就知道了👇

main.qml

import QtQuick 2.0
import QtQuick.Controls 2.0

ApplicationWindow {
    id:window
    width: 320
    height: 480
    visible: true
    title: qsTr("side by side")
    
    SwipeView{
        id: swipeView
        anchors.fill: parent
		//直接初始化四个界面
        Home{}
        About{}
        EditProfile{}
        Profile{}
    }
    //下面点点导航
    PageIndicator
    {
        anchors.bottom:parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
		//和SwipeView的各种信息进行绑定
        currentIndex: swipeView.currentIndex
        count:swipeView.count
    }

}

运行效果:

在这里插入图片描述

相关知识点

1、这种并排式的页面使用SwipeView控件来实现
常用到的属性有：
①currentIndex: 当前显示页面的索引。
②interactive: 指定是否允许用户通过手势交互来滑动页面。
③orientation: 指定滑动方向，可以是 Qt.Horizontal（水平）或 Qt.Vertical（垂直）。
常用到的方法有：
①setCurrentIndex(index): 将指定索引的页面设置为当前显示的页面。

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

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

相关文章

OpenCV迭代去畸变undistortPoints 与vins的迭代不同 vins前端与imu预积分

OpenCV迭代去畸变undistortPoints 与vins的迭代不同 vins前端与imu预积分

OpenCV去畸变undistortPoints原理解析 不动点迭代法—单变量非线性方程近似根matlab求解 淦VINS-MONO源码 03–openCV与VINS中去畸变方法的不同 这里用的方法和openCV不同，假设现在求A点的去畸变坐标，那么我们将A的坐标直接代入畸变模型中，求…
阅读更多...
Pytest教程__用例执行顺序（5）

Pytest教程__用例执行顺序（5）

在unittest中，测试用例的执行顺序与测试用例的名称有关，按照名称的ascii码排序的，并不是按照用例的编写顺序执行的。 pytest默认是按用例的编写顺序执行的 我们可以通过第三方包 pytest-ordering 来自定义我们用例的执行顺序。 方法是使用装…
阅读更多...
14. 100ASK-V853-PRO开发板 ADB测试指南

14. 100ASK-V853-PRO开发板 ADB测试指南

100ASK-V853-PRO开发板 ADB测试指南 硬件要求： 100ASK-V853-PRO开发板 软件要求： 固件下载地址：链接：百度网盘 提取码：sp6a 固件位于资料光盘中的10_测试镜像/4.测试ADB/v853_linux_100ask_uart0.img 1.硬件连接 …
阅读更多...
JMeter循环读取CSV文件实现接口批量测试

JMeter循环读取CSV文件实现接口批量测试

目录 前言： 1、添加线程组 2、添加HTTP信息头管理器 3、添加HTTP请求 4、添加察看结果树 5、添加循环控制器 6、在循环控制器下添加CSV配置文件 7、其他配置文件需要修改写入形式 8、执行CSV文件，查看结果 前言： JMeter可以通过CSV…
阅读更多...
安装Canal

安装Canal

安装和配置Canal 安装和配置Canal1.开启MySQL主从1.1.开启binlog1.2.设置用户权限2.安装Canal2.1.创建网络2.3.安装Canal安装和配置Canal 下面我们就开启mysql的主从同步机制，让Canal来模拟salve 1.开启MySQL主从 Canal是基于MySQL的主从同步功能，因此必须先开启MySQL的主…
阅读更多...
不同等级的高速PCB工程师，薪资差距有多大？

不同等级的高速PCB工程师，薪资差距有多大？

高速PCB设计在现代电子领域中扮演着很重要的角色，而高速PCB工程师的技能水平和经验对于项目的成功至关重要，下面本文将从地区分布、薪资水平、工作内容等多方面讨论对比不同等级的高速PCB工程师。 NO.1 初级高速PCB工程师 ①薪资水平 初级高速PCB工程师…
阅读更多...
用代码实现一个简单计算器

用代码实现一个简单计算器

作者主页：paper jie的博客_CSDN博客-C语言,算法详解领域博主 本文作者：大家好，我是paper jie，感谢你阅读本文，欢迎一建三连哦。 本文录入于《C语言》专栏，本专栏是针对于大学生，编程小白精心打造…
阅读更多...
管理类联考——逻辑——知识篇——第四章 联言、选言（且、或）（5题，必考）

管理类联考——逻辑——知识篇——第四章 联言、选言（且、或）（5题，必考）

第四章 联言、选言（且、或）（5题，必考） 一、联言命题 联言命题是反映事物的若干种情况或者性质同时存在的复合命题 1.常见表达形式：A且B⟺即A又B⟺AB⟺虽然A但是B（语气强调B，逻辑是…
阅读更多...
配置GitLab账号登录SonarQube

配置GitLab账号登录SonarQube

gitlab账号集成到sonarqube 创建个人访问令牌 确认之后可获得 来到sonarqube界面，创建gitlab配置 gitlab地址后面加上/api/v4 将访问令牌粘贴过来 保存即可 回到gitlab添加应用，名称随意最好有意义一眼知道是干嘛的 URI是sonarqube地址/oauth2/callback…
阅读更多...
JavaSE进阶——网络编程

JavaSE进阶——网络编程

文章目录 前言一、网络编程二、通信1、两个重要的要素2、通信协议 三 、Socket四、基于TCP的网络编程1、单向通信1.1 服务端1.2 客户端 2、双向通信2.1 服务端2.2 客户端 3、传输对象3.1 服务端3.2 客户端 4、保持通信4.1 服务端4.2 客户端 五、基于UDP的网络编程1、单向通信1.…
阅读更多...
软件开发流程管理中的6个重点

软件开发流程管理中的6个重点

1、需求的确定 充分了解用户真实需求，与用户保持沟通交流；需求文档需详尽、准确，明确功能和客户期望；确保需求的合理性、完整性和可行性，并对需求进行优先级排序。 软件开发流程管理中的6个重点 2、设计原则 设计包括概…
阅读更多...
【机器学习】一个简单的神经网络例子教你理解前向传播

【机器学习】一个简单的神经网络例子教你理解前向传播

在开始这个例子前，希望你已经了解了神经网络的相关内容，可以参见如下文章 https://blog.csdn.net/weixin_45434953/article/details/131048661 在计算机中，有一种很基础的运算称之为与运算，这是一个二元运算符， x 1 &…
阅读更多...
web前端-TypeScript学习

web前端-TypeScript学习

web前端-TypeScript学习 TypeScript 介绍TypeScript 初体验安装编译TS的工具包编译并运行TS代码 TypeScript 常用类型类型注解常用基础类型原始类型数组类型类型别名函数类型对象类型接口元祖类型推论类型断言字面量类型枚举any类型typedof TypeScript 高级类型class类class的基…
阅读更多...
6.Opencv-图像腐蚀、膨胀（开运算，闭运算）

6.Opencv-图像腐蚀、膨胀（开运算，闭运算）

1.图像腐蚀 这个操作会把前景物体的边界腐蚀掉。这是怎么做到的呢？卷积核沿着图像滑动，如果与卷积核对应的图像的所有像素值都是1，那么该区域的所有像素值就是1，否则为0。用于去除白噪声和断开两个连在一起的物体等。 语法&…
阅读更多...
剑走偏锋，无头浏览器是什么神奇的家伙

剑走偏锋，无头浏览器是什么神奇的家伙

大家好，我是风筝，公众号「古时的风筝」，专注于 Java技术 及周边生态。 我的个人网站：古时的风筝 浏览器是再熟悉不过的东西了，几乎每个人用过，比如 Chrome、FireFox、Safari，尤其是我们程序员&a…
阅读更多...
ASEMI代理台湾光宝LTV-3120光耦合器中文资料

ASEMI代理台湾光宝LTV-3120光耦合器中文资料

编辑-Z LTV-3120是一种高性能光耦，由于其可靠性、效率和多功能性，在各种应用中都很受欢迎。本文将全面了解LTV-3120其功能、应用以及它如何改进您的电子设计。 什么是光电耦合器？ 光耦，也称为光隔离器，是一种利用光在…
阅读更多...
时序数据库的流计算支持

时序数据库的流计算支持

一、时序数据及其特点 时序数据（Time Series Data）是基于相对稳定频率持续产生的一系列指标监测数据，比如一年内的道琼斯指数、一天内不同时间点的测量气温等。时序数据有以下几个特点： 历史数据的不变性数据的有效性数据的时效…
阅读更多...
Linux：cp、mv、rm命令

Linux：cp、mv、rm命令

1、cp命令：用于复制文件/文件夹，语法： cp [-r] 参数1 参数2 r参数可选，用于对文件夹进行复制，表示递归 参数1：Linux路径，表示被复制的文件或文件夹 参数2：Linux，表示要复…
阅读更多...
数据库期末复习第一章（看完包过）

数据库期末复习第一章（看完包过）

目录 第一章 第一章 主要是一些概念，了解几个基本概念，并且记住英文缩写 DB是数据库（database） 0.数据 Data 1.数据库 DB （database 数据库） 2.数据库管理系统 DBMS （M：mange 管…
阅读更多...
论文解读 | 基于蒙特卡罗树搜索的触觉目标识别主动末端执行器姿态选择

论文解读 | 基于蒙特卡罗树搜索的触觉目标识别主动末端执行器姿态选择

原创 | 文 BFT机器人 本论文提出了一种新颖的方法，使用仅触觉来进行主动物体识别。该算法通过蒙特卡罗树搜索来选择最佳的手腕姿态序列进行物体识别。 具体来说，该算法将问题建模为马尔可夫决策过程（MDP），并通过观察和…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023