Qt之界面优化

news2024/11/22 11:19:04

目录

前言 

QSS基础知识

 选择器

样式属性 

控件样式⽰例

绘图 

接下来的日子会顺顺利利,万事胜意,生活明朗-----------林辞忧

前言 

Qt 仿照CSS的模式,引⼊了QSS,来对Qt中的控件做出样式上的设定,从⽽允许程序猿写出界⾯更好看 的代码.当然,由于Qt本⾝的设计理念和⽹⻚前端还是存在⼀定差异的,因此QSS中只能⽀持部分CSS属性. 整体来说QSS要⽐CSS更简单⼀些.

如果通过QSS设置的样式和通过C++代码设置的样式冲突,则QSS优先级更⾼

QSS基础知识

1.基本语法

选择器 { 属性名 : 属性值 ; }

选择器:先选择某一个/某一类控件,接下来进行的各种属性设置,都是针对选中的控件生效的

• 属性则是⼀个键值对,属性名表⽰要设置哪种样式,属性值表⽰了设置的样式的值

例如:

上述代码的含义表⽰,针对界⾯上所有的QPushButton,都把⽂本颜⾊设置为红色 

2.代码实例:QSS基本使⽤

在设置样式的时候,可以指定某个控件来设置;也可以指定控件设置,此时的样式就会针对这个指定的控件,也会针对子控件生效

 这里的QPushButton是没有子控件的

 

这里会针对this的子控件也生效 

3.全局样式设置

还可以通过 QApplication 的 setStyleSheet ⽅法设置整个程序的全局样式.

全局样式优点:

• 使同⼀个样式针对多个控件⽣效,代码更简洁.

• 所有控件样式内聚在⼀起,便于维护和问题排查.

代码实例:使⽤全局样式

当设置了全局样式,然后在某个控件里又设置了其它的样式,会咋样的?

 

会发现这两方面的样式就会叠加的。形如上述这种属性叠加的效果,我们称为"层叠性"

如果设置了全局样式,在某个控件里设置的样式和全局样式冲突了,会咋样?

 当全局样式和局部样式冲突时,局部样式的优先级是更高的,覆盖了对应的全局样式。在实际开发中,就可以在全局样式中设置比较通用的样式,统一整个程序的界面风格,如果需要针对某个控件进行微调,可以使用局部样式作出调整

4.从⽂件加载样式表

上述代码都是把样式通过硬编码的⽅式设置的.这样使QSS代码和C++代码耦合在⼀起了,并不⽅便代 码的维护. 因此更好的做法是把样式放到单独的⽂件中,然后通过读取⽂件的⽅式来加载样式

具体操作过程:

(1)创建qrc文件,通过qrc管理样式文件

(2)创建单独的qss文件,把这样的文件放到qrc中

(3)编写c++代码,读取qss文件中的内容,并设置样式

5.使⽤QtDesigner编辑样式

上面例子的功能在QtDesigner中直接集成了这样的功能,允许我们把样式直接写到.ui文件中

 

 

 选择器

代码实例:

 

类选择器,不会对子类生效 

 

id选择器

 

此时当类型选择器和id选择器选中同一个控件的时候,并且设置的样式是冲突的,此时id选择器的优先级更高,如果不冲突,两种样式会同时生效

并集选择器

 

⼦控件选择器(Sub-Controls)

有些控件内部包含了多个"⼦控件".⽐如QComboBox的下拉后的⾯板,⽐如QSpinBox的上下按钮 等

哪些控件拥有哪些⼦控件,参考⽂档QtStyleSheetsReference中ListofSub-Controls章节.

 代码实例:设置下拉框的下拉按钮样式

伪类选择器(Pseudo-States)

 上面介绍的选择器,都是选中"控件",伪类选择器,选中的是控件的状态,符合一定状态条件的控件

代码实例:设置按钮的伪类样式

 

样式属性 

QSS中的样式属性⾮常多,不需要都记住.核⼼原则还是⽤到了就去查. ⼤部分的属性和CSS是⾮常相似的. ⽂档的 Qt Style Sheets Reference 章节详细介绍了哪些控件可以设置属性,每个控 件都能设置哪些属性等.在翻阅⽂档的时候涉及到⼀个关键术语"盒模型"(BoxModel)

1.盒模型(BoxModel)

可以通过⼀些QSS属性来设置上述的边距和边框的样式

 

上述的复合属性,就是指如margin,包含margin-left,margin-right,margin-top,margin-bottom这四个属性

 

代码实例:设置边框和内边距 

代码实例:设置外边距

 

运⾏程序,可以看到,当前按钮的边框被外边距挤的缩⼩了.但是获取到的按钮的Geometry 是不变的. 

控件样式⽰例

1.按钮

代码实例:⾃定义按钮

创建一个按钮,右键改变样式表

color:设置文字颜色 

 

 

2.复选框

 

代码实例:⾃定义复选框

 

 

 

3.输⼊框

代码实例::⾃定义单⾏编辑框

 

4.列表

 代码实例:⾃定义列表框

  

5.菜单栏

代码实例:⾃定义菜单栏

 

 

 

6.登录界⾯

 

添加垂直布局管理器

将这些选中 

选定控件修改高度,同时修改这两高度为同一值

 

 当要给给这里设置背景时,直观想法是直接给QWidget顶层窗口设置背景图,但是Qt中存在限制,直接给顶层窗口设置背景会失效,因此这里可以给上述控件外头套上一个和窗口一样大小的QFrame控件,在Qt中设置背景图,除了background-image(图片固定大小)之外,还有border-image(图片会自动跟随控件的大小变化)属性

绘图 

虽然Qt已经内置了很多的控件,但是不能保证现有控件就可以应对所有场景. 很多时候我们需要更强的"⾃定制"能⼒. Qt 提供了画图相关的API,可以允许我们在窗⼝上绘制任意的图形形状,来完成更复杂的界⾯设计.

所谓的"控件",本质上也是通过画图的⽅式画上去的. 画图API和控件之间的关系,可以类⽐成机器指令和⾼级语⾔之间的关系. 控件是对画图API的进⼀步封装;画图API是控件的底层实现

绘图API核⼼类

绘图API的使⽤,⼀般不会在QWidget的构造函数中使⽤,⽽是要放到paintEvent事件中

 

代码实例:绘制各种形状

 

这是定义在栈上的变量,不需要考虑释放的问题,此处指定的this不是父对象,而是指定绘制的设备

1.画线条

 

2.绘制矩形

 

 

3.绘制圆形

 

 

4.绘制⽂本

QPainter类中不仅提供了绘制图形的功能,还可以使⽤QPainter::drawText()函数来绘制⽂字,也可 以使⽤QPainter::setFont() 设置字体等信息

 

此处的0横坐标表示的是文字最左侧的位置

此处的100纵坐标表示的是文字的基线位置

5.设置画笔

 通过QPen类可以设置画笔的线宽、颜⾊、样式、 画刷等。 画笔的颜⾊可以在实例化画笔对象时进⾏设置,画笔的宽度是通过setWidth()⽅法进⾏设置,画笔的 ⻛格是通过setStyle()⽅法进⾏设置,设置画刷主要是通过setBrush()⽅法。

• 设置画笔颜⾊:QPen::QPen(constQColor&color) 画笔的颜⾊主要是通过QColor类设置;

• 设置画笔宽度:voidQPen::setWidth(intwidth)

• 设置画笔⻛格:voidQPen::setStyle(Qt::PenStylestyle)

 

6 设置画刷

在Qt中,画刷是使⽤QBrush类来描述,画刷⼤多⽤于填充。QBrush定义了QPainter的填充模式, 具有样式、颜⾊、渐变以及纹理等属性。 画刷的格式中定义了填充的样式,使⽤Qt::BrushStyle枚举,默认值是Qt::NoBrush,也就是不进⾏ 任何填充。可以通过Qt助⼿查找画刷的格式。如下图⽰:

 

设置画刷主要通过voidQPen::setBrush(constQBrush&brush)⽅法,其参数为画刷的格式

 

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

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

相关文章

【面试题系列Vue05】跟其他人不太一样的 Vue生命周期总结

既然要讲 生命周期&#xff0c;那渲染过程得先了解下。 数据绑定 Vue 文本插值 在 Vue 中&#xff0c;最基础的模板语法是数据绑定&#xff0c;例如&#xff1a; <div>{{ data }}</div>这里绑定了一个 msg 的变量&#xff0c;开发者在 Vue 实例 data 中绑定该变…

DataWhale AI夏令营-《李宏毅深度学习教程》笔记-task2

DataWhale AI夏令营-《李宏毅深度学习教程》笔记 第四章 卷积神经网络卷积神经网络构成一个通俗的例子 第四章 卷积神经网络 这部分看书的时候感觉云里雾里的&#xff0c;好在之前学过一些卷积神经网络、全链接、感受野的概念&#xff0c;我就用自己的理解阐述一篇笔记吧&…

idea插件开发(一)合并检查

一、引言 由于代码合并冲突的时候&#xff0c;代码丢失的情况频发&#xff0c;作者研究idea的VFS虚拟文件系统和Git4ide源码&#xff0c;创作idea插件检测代码合并丢失 可以区分主动删除与被动丢失&#xff0c;比如本地或者删除一段代码&#xff0c;合并之后不会被认为是丢失…

华为云 x 容联云|828企业节,助推中国数智产业实力再升级

2024年8月27日&#xff0c;华为第三届828 B2B企业节在2024中国国际大数据产业博览会上正式开幕。 828 B2B企业节是全国首个基于数字化赋能的企业节&#xff0c;由华为联合上万家生态伙伴共同发起&#xff0c;旨在为广大企业尤其是中小企业搭建数字化创新发展平台&#xff0c;融…

C语言基础(二十二)

在C语言中&#xff0c;对链表进行排序涉及到比较链表中的节点值&#xff0c;并根据比较结果重新排列这些节点。由于链表是非连续存储的数据结构&#xff0c;其排序比数组排序要复杂一些。由链表的结构特性可知&#xff0c;插入排序和归并排序更适合链表排序。 测试代码1&#…

力扣之1853.转换日期格式

文章目录 1. 1853.转换日期格式1.1 题干1.2 建表1.3 题解1.4 实现方式1.5 题解1.6 知识总结 1. 1853.转换日期格式 1.1 题干 表: Days ----------------- | Column Name | Type | ----------------- | day | date | ----------------- day 是这个表的主键。 给定一个Days表&…

基于Spring Boot的陶瓷文化网站的设计与实现

毕业设计&#xff08;论文&#xff09; 论文题目&#xff1a;基于Spring Boot的陶瓷文化网站的设计与实现 博主可接毕设论文&#xff01;&#xff01;&#xff01; 摘 要 中国悠久的陶瓷艺术&#xff0c;作为民族文化遗产的重要载体&#xff0c;历经时代的洗礼&#xff0c;其…

kube-scheduler组件的启动流程与源码走读

概述 摘要&#xff1a;kube-scheduler是kubernetes系统中的重要组件&#xff0c;kub-scheduler 的核心职责是为待调度的 pod 寻找一个最合适的 node 节点, 然后进行 bind node 绑定, 后面 kubelet 才会监听到并创建真正的 pod。kub-scheduler本身是一个功能强大且负责的核心组…

使用Axure打造智慧场景下的数据可视化大屏原型

在数字化转型的浪潮中&#xff0c;数据可视化大屏以其直观、动态、高效的特性&#xff0c;成为了智慧社区、智慧城市、智慧工厂、智慧园区等各个领域不可或缺的展示窗口。作为专业的原型设计软件&#xff0c;Axure不仅以其强大的交互设计能力著称&#xff0c;更在数据可视化大屏…

线段树小例题——结合前后缀获得结果

和我今天上午写的那个前后缀太像了&#xff0c;不能说一模一样&#xff0c;但是至少我觉得思路是真的一点没变 上一道题的链接&#xff1a;http://t.csdnimg.cn/pXBnU P4513 小白逛公园 题意&#xff1a;有n个点&#xff0c;每个点都有一个初值&#xff0c;然后有m个操作&am…

SQL慢查询优化方式

目录 一、SQL语句优化 1. 避免使用 SELECT * &#xff0c;而是具体字段 2.避免使用 % 开头的 LIKE 的查询 3.避免使用子查询&#xff0c;使用JOIN 4.使用EXISTS代替IN 5.使用LIMIT 1优化查询 6.使用批量插入、优化INSERT操作 7.其他方式 二、SQL索引优化 1.在查询条件…

Java异常详解(全文干货)

介绍 Throwable Throwable 是 Java 语言中所有错误与异常的超类。 Throwable 包含两个子类&#xff1a;Error&#xff08;错误&#xff09;和 Exception&#xff08;异常&#xff09;&#xff0c;它们通常用于指示发生了异常情况。 Throwable 包含了其线程创建时线程执行堆栈…

分库分表学习笔记(二)

分库分表学习笔记&#xff08;一&#xff09;-CSDN博客 分表分库规则 图源&#xff08;https://zhuanlan.zhihu.com/p/535713197&#xff09; 水平分表 水平分表一般是我们数据库的数据太多了&#xff0c;原大众点评的订单单表早就已经突破两百G。 数据量太多的影响 1. 查询…

linux dma cache和主存数据不一致问题

1、问题原因 根本原因是cache和dma的目的地址存在重叠。 如果DMA的目的地址与Cache所缓存的内存地址访问有重叠&#xff08;如上图所示&#xff09; &#xff0c; 经过DMA操作&#xff0c; 与Cache缓存对应的内存中的数据已经被修改&#xff0c; 而CPU本身并不知道&#xff0c…

VScode开发ESP32

以下是所有的功能 先选择串口&#xff0c;再选择编译&#xff0c;然后再烧录

2023年最新自适应主题懒人网址导航v3.9php源码

源码简介 这个懒人网址导航源码是一个基于PHPMySQL开发的网址导航系统。该版本是在原有3.8版本的基础上进行了修复和功能增强。我们建议新用户直接使用这个最新版本&#xff0c;放弃旧版本。如果你有二次开发的能力&#xff0c;可以根据更新日志自行进行升级。我们将在后期继续…

论文阅读笔记:RepViT: Revisiting Mobile CNN From Vit Perspective

文章目录 RepViT: Revisiting Mobile CNN From Vit Perspective动机现状问题 贡献实现Block设置独立的token融合器和通道融合器减少膨胀并增加宽度 宏观设计stem的早期卷积简单分类器整体阶段比率 微观设计内核大小选择Squeeze-and-excitation层放置网络架构 实验ImageNet-1K上…

idea import配置

简介 本文记录idea中import相关配置&#xff1a;自动导入依赖、自动删除无用依赖、避免自动导入*包 自动导入依赖 在编辑代码时&#xff0c;当只有一个具有匹配名称的可导入声明时&#xff0c;会自动添加导入 File -> Settings -> Editor -> General -> Auto Imp…

基于xr-frame实现微信小程序的人脸识别3D模型叠加AR功能(含源码)

前言 xr-frame是一套小程序官方提供的XR/3D应用解决方案&#xff0c;基于混合方案实现&#xff0c;性能逼近原生、效果好、易用、强扩展、渐进式、遵循小程序开发标准。xr-frame在基础库v2.32.0开始基本稳定&#xff0c;发布为正式版&#xff0c;但仍有一些功能还在开发&#…

笔试——双指针算法

双指针&#xff1a; 把数组下标看作指针&#xff0c;注意数组越界问题&#xff0c;注意区间边界值 文章目录 283.移动零1089.复写零 283.移动零 class Solution {public void moveZeroes(int[] nums) {int cur 0;int dest -1;while(cur < nums.length)if(nums[cur] ! 0)…