Qt之界面优化

目录

前言

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)⽅法,其参数为画刷的格式

相关推荐
杨~friendship26 分钟前
Ubuntu上使用qt和opencv显示图像
linux·开发语言·c++·qt·opencv·ubuntu
界面开发小八哥2 小时前
「Qt Widget中文示例指南」如何实现一个系统托盘图标?(二)
开发语言·c++·qt·用户界面
You can do more2 小时前
Qt Model/View之Model
qt
cat_fish_rain3 小时前
使用Qt 搭建简单雷达
开发语言·c++·qt
血不热了7 小时前
Qt:智能指针QScopedPointer 的使用(以及如何写一个QScopedPointer )
开发语言·qt
血不热了8 小时前
Qt:实现单例模式
qt·单例模式
草上爬8 小时前
Qt优秀开源项目之二十三:QSimpleUpdater
开发语言·qt·qsimpleupdater·自动升级
wkd_0078 小时前
【Qt | QLineEdit】Qt 中使 QLineEdit 响应 鼠标单击、双击事件 的两个方法
qt·qlineedit·鼠标双击·鼠标单击
yupeizhou10 小时前
Day 72
qt
Prejudices20 小时前
在 Qt 中使用中文
开发语言·c++·qt