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

已于 2023-06-14 15:12:05 修改
阅读量2.9k 收藏 14
点赞数 2
分类专栏： Qt Quick Qt 文章标签： qt ui 开发语言
于 2023-06-14 15:09:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jacksqh/article/details/131057233
版权
Qt 同时被 2 个专栏收录
34 篇文章 9 订阅
订阅专栏
Qt Quick
13 篇文章 5 订阅
订阅专栏

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

文章目录

前言

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): 将指定索引的页面设置为当前显示的页面。

CAccept
关注
  • 2
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
QT自制精美Ui模板系列（一）桃子风格模板 - 二次开发专用
09-03
本模板为美化QT界面系列中的一个，整体风格为桃子风格（效果预览链接：https://blog.csdn.net/hwc3737/article/details/108377607），搭配美化大部分常用控件，可直接使用。同时自带部分有用系统功能（最小化托盘运行），可在其基础上进行二次开发。需要基于QT Creator进行使用。
qt万能样式表模板
qq_45893999的博客
01-09 8036
文章目录一、效果二、样式代码三，加载样式表 在项目开发过程中，不可缺少的一部分就是界面的美化，软件做的怎么样，界面风格样式很重要。在qt中通过样式表，*.qss文件加载到程序中美化界面 一、效果 二、样式代码 代码如下： QWidget { color: rgb(255, 255, 255); /*字体颜色*/ background-color: rgb(3,21,106); /*背景色*/ } /*按钮正常状态*/ QPushButton { background-col
qt - 19种精美软件样式
最新发布
u013083044的博客
02-20 1293
【代码】qt - 19种精美软件样式。
QT 多语言 Quick Qwidget混合编程
09-26
QT 多语言 Quick Qwidget混合编程 包括中英文，qml Qwidget两种UI框架同时使用编程 测试跳转跟焦点问题
qt-无边框ui界面4
01-21
qt-无边框ui界面1
qt-无边框ui界面1
01-21
qt-无边框ui界面1
Qt漂亮界面
热门推荐
宁静致远的博客
03-22 3万+
Qt漂亮界面功能规划：一、去掉菜单栏和工具栏二、顶部导航栏的设计appinit.h头文件appinit.cpp的文件使用方式：三、阵列按钮的点击事件写法四、重写缩写界面、放大界面和关闭程序事件五、鼠标事件的处理 要做一个类似下面的qt界面，顶部是导航栏的样子——包含图标和程序名称，右边是界面切换按钮，然后放大、缩小和关闭按钮也在，还能拖动。这样，就更像一个商用的软件了。 功能规划： 1.去掉菜单栏、工具栏； 2.顶部导航栏包含程序图标、名称、界面切换按钮、放大缩小关闭按钮； 3.顶部导航栏可以拖动； 4
推荐优美的Pyqt/Pyside界面模板
sluck_0430的博客
12-01 1万+
分享一些积攒已久的比较美观的pyqt和pyside界面UI模板~
Qt自定义控件和模板分享
屁股大象的博客
07-30 2175
不定时把自己工作上写的常用的Qt控件分享到这里，当作个人记录，也希望能帮助到需要的人。，后面文章会在上面更新~分享的控件点击标题即可跳转到相关页面。控件代码的MainWindow都有对应的demo，直接运行即可。..................
Qt图形视图框架：QGraphicsWidget详解
友善啊，朋友的博客
06-01 5411
一、描述 1、QGraphicsWidget 是一个扩展的基础项，它在 QGraphicsItem 之上提供额外的功能。 它在很多方面与 QWidget 相似： 提供调色板、字体、样式。 有geometry()。 可使用 setLayout() 和 layout()支持布局。 支持使用grabShortcut() 和insertAction() 的快捷键和QAction。 与QGraphicsItem不同，QGraphicsWidget不是抽象类。 2、由于QGraphicsWidget与QWi
qtcreator UI界面范例（以某地铁项目为例）
一个闲杂的博客
07-13 1323
qtcreator UI范例
QT多线程—主界面卡死解决方案
05-31
由于耗时的操作会独占系统cpu资源 ，让界面卡死在那里，这时需要考虑多线程方案，将耗时的操作放在主线程之外的线程中执行。该demo通过多线程为主界面卡死提供一种解决方案。
Qt Quick 4小时入门
06-08
Qt Quick（QML）是Qt 5里推荐的UI开发框架，能够为各种设备搭建流畅且绚丽的用户界面。本课程删繁就简，精心选择主题，通过短短的几节课，即可让大家跨越Qt Quick的入门门槛，为进一步学习奠定坚实基础。
qt-无边框ui界面3
01-21
qt-无边框ui界面1
MaterialUI.zip_QML Material_qml_qml美化_qtquick_sunlightt4v
09-19
QML美化MaterialUI源码 用于QtQuick
qt-无边框ui界面2
01-21
qt-无边框ui界面1
Qt Quick之QML与C++交互方法PPT
05-13
Qt Quick技术使得开发者能够快速构建UI，而其所使用的语言——QML作为一种灵活高效的界面开发语言也得到业界的认可。Qt官方推荐使用QML构建界面，使用C++实现非界面的业务逻辑和复杂运算，大多数开发者也是基于这样...
QT自制精美Ui模板系列展示（一）桃子风格模板 - 二次开发专用
hwc3737的博客
09-03 1万+
QT精美Ui PeachDemo 说明书 原文链接： 效果预览： ①主界面 ②搭配自定义提示弹窗 ③配套常用控件全览 附加功能： ①自带最小化托盘运行功能，效果如下： ②支持全面板自由拖动 其他说明： 暂不支持拖动进行面板缩放。 下载： 链接： 价格： ...
QT课程 UI设计
southernbrid的博客
05-24 4317
QAbstractButton是按钮的抽象类，（第一遍）建议一个类如果有抽象基类，优先查看抽象基类的文档。按钮的相关属性有：需要注意的是单选按钮默认在同一个布局层次中互斥。按钮点击后会触发信号，我们看看按钮的信号（第二遍）建议一个类如果有抽象基类，优先查看抽象基类的文档。
qt quick和qt widget
08-31
Qt Quick和Qt Widgets是Qt框架中用于创建用户界面的两种不同的技术。Qt Widgets是传统的基于C++的用户界面框架，而Qt Quick是基于QML的现代化UI框架。 Qt Widgets主要通过使用C++代码来创建和管理用户界面元素，它提供了丰富的预定义的UI组件和功能，可以通过编写C++代码来实现复杂的界面逻辑和交互。Qt Widgets适合开发传统的桌面应用程序和较为复杂的界面。 而Qt Quick使用QML（Qt Meta-Object Language）语言来描述用户界面。QML是一种声明性语言，使用类似于JavaScript的语法，可以通过编写简洁的代码来创建精美的界面。Qt Quick还提供了一套丰富的可重用的UI组件，可以用于快速构建现代化的界面。Qt Quick适合开发移动应用程序和涉及动画和视觉效果的界面。 引入Qt Quick和Qt Widgets的原因是为了满足现代化UI界面的需求。Qt Quick可以提供更炫酷和复杂的界面效果，同时也能提高开发效率和代码可维护性。而Qt Widgets仍然有其优势和适用场景，因此Qt Widgets和Qt Quick可以根据实际需求灵活地结合使用。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [简单介绍Qt Quick、QML以及Qt Widgets之间的区别与联系](https://blog.csdn.net/Jacksqh/article/details/130703212)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值