Qt之控件介绍

控件概述

QWidget核心属性

1.enabled属性

2.geometry属性

3.windowTitle属性

4.windowIcon属性

5.windowOpacity属性

6.cursor属性

7.font属性

8.toolTip属性

9.focusPolicy属性

10.styleSheet属性

按钮类控件：

1.PushButton

2.RadioButton

编辑 3.CheckBox

显示类控件:

1.Label

2.LCD Number

3.ProgressBar

4.Calendar Widget

输入类控件:

1.Line Edit

2.TextEdit

3.ComboBox

4.SpinBox

5.DateEdit &TimeEdit

6.Dial

7.Slider

多元素控件 :

1.List Widget

2.Table Widget

3.Tree Widget

容器类控件:

1.GroupBox

2.TabWidget

布局管理器:

1.垂直布局

2.⽔平布局

3.⽹格布局

4.表单布局

5.Spacer

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

控件概述

Widget 是Qt中的核⼼概念.英⽂原义是"⼩部件",我们此处也把它翻译为"控件".控件是构成⼀个图形化界⾯的基本要素，下面是Qt内置好的控件

关于控件体系的发展

第⼀阶段: 完全没有控件.此时需要通过⼀些绘图API⼿动的绘制出按钮或者输⼊框等内容,代码编写繁琐

第⼆阶段: 只包含粗略的控件.只是提供了按钮,输⼊框,单选框,复选框等最常⽤的控件

第三阶段: 更完整的控件体系,基本可以覆盖到GUI开发中的⼤部分场景

QWidget核心属性

Qt 中的各种控件都是继承自QWidget类，在Qt体系当中这部分是通用的

1.enabled属性

描述了一个控件是否处于可用状态

切换控件的可用属性

2.geometry属性

(1) 位置和尺⼨.其实是四个属性的统称: x 横坐标， y 纵坐标， width 宽度，height ⾼度

move只能修改位置，而setGeometry可以修改位置和尺寸

(2) 通过上下左右来调整窗口尺寸

(3)练习

(4) window frame的影响

当前打印代码如果放在构造函数当中时，此时这个widget对象正在构造，还没有加入window frame当中，两者打印的结果是一样的

3.windowTitle属性

只能针对顶层窗口QWidget这样的属性才能使用

4.windowIcon属性

(1)windowlcon表示窗口的图标,只能针对顶层窗口使用

(2) 之前推荐使用堆来创建对象，主要是因为要确保当前控件的生命周期是足够的，要通过Qt对象树来释放对象。而Qlcon自身是一个比较小的对象，创建出来后就要设置到某个QWidget里面，Qlcon对象本身释放不释放，不影响图标最终的显示;QIcon也不支持对象树，无法给他执行父对象

(3)举例

先在D盘中放⼀个图⽚,名字为rose.jpg

#include <QIcon>
 Widget::Widget(QWidget *parent)
 : QWidget(parent)
 , ui(new Ui::Widget)
 {
 ui->setupUi(this);
 // 
创建图标对象
 
QIcon icon("d:/rose.jpg");
 // 
设置图标
 
}
 this->setWindowIcon(icon);

注意:Windows下路径的分隔符可以使⽤ / 也可以使⽤ \ .但是如果在字符串中使⽤ \ ,需要写作转义字符的形式 \\ .因此我们还是更推荐使⽤ /,在c++11当中引入了raw string解决上面问题，在这个字符串中是不包含任何转义字符的

(4) 但上面是通过绝对路径的方式来引入图片的，但在实际开发中,我们⼀般不会在代码中通过绝对路径引⼊图⽚.因为我们⽆法保证程序发布后,⽤⼾的电脑上也有同样的路径.

因此，相比于使用绝对路径的方式，使用相对路径是更好的。相对路径是以给定目录为基准，以.或者..的方式开头。

假设基准目录为D:/

给定相对路径./rose.jpg ==>在基准目录(D:/)直接找rose.jpg

给定相对路径./image/rose.jpg ==>在基准目录中，先找到image目录，再在里面找到rose.jpg

为了解决上述问题，Qt引入了qrc机制用来解决:确保图片所在的路径在目标用户机器上存在,确保图片一直存在

qrc⽂件是⼀种XML格式的资源配置⽂件,它⽤XML记录硬盘上的⽂件和对应的随意指定的资源名称. 应⽤程序通过资源名称来访问这些资源. 在Qt开发中,可以通过将资源⽂件添加到项⽬中来⽅便地访问和管理这些资源.这些资源⽂件可以位于qrc⽂件所在⽬录的同级或其⼦⽬录下. 在构建程序的过程中,Qt会把资源⽂件的⼆进制数据转成cpp代码,编译到exe中.从⽽使依赖的资源变得"路径⽆关".

简单来说就是给Qt项目引入一个额外的xml文件(后缀名使用.qrc表示),在这个xml中把要使用的图片资源给导入进来，并且在xml中进行记录。Qt在编译项目的时候，就会根据qrc中描述的图片信息，找到图片内容，并且提取出图片的二进制数据，把这些二进制数据转成c++代码，最终编译到exe当中，从⽽使依赖的资源变得"路径⽆关"。

qrc使用的方式

(1)在项目中创建一个qrc文件，文件名不要带中文和特殊符号

(2)把图片导入到qrc文件中

1.先创建一个前缀(Prefix)

所谓的前缀可以理解为虚拟的目录，这个目录没有在电脑上真实存在，是Qt自己抽象出来的

qrc机制本质上就是把图片的二进制数据转成c++代码(最终就在代码中可以看到很大的char数组，里面就是图片的二进制数据)

为了方便Qt代码中访问到这个图片，Qt就自己抽象出了虚拟的目录

2.把图片导入到资源文件中

看到这个效果就说明导入成功

创建的前缀叫啥名字，代码中就写啥名字前缀+文件名

当代码中需要访问qrc中管理的文件时，就需要在路径上带有:前缀

qrc中导入的图片资源，就会被转成这个c++代码

5.windowOpacity属性

练习

这里会发现浮点数的增减不是严格按照0.1来执行的，这里是因为浮点数在内存中的存储是按照IEEE754的标准来存储的，有些浮点数不能精确保存

在上述代码里的判定条件其实是可以不用写的，在setWindowOpacity函数中会判定的，但这里写的原因是为了作出更严谨的双重判定，防止一方出错的，因此还是很有必要写上的

6.cursor属性

(1) 可以直接在属性栏中设置

(2) Qt内置的图标进行设置

按住Ctrl+鼠标左键，点击WaitCursor就可以查看Qt内置的图标

(3)自定义图标设置

先准备一个图片再导入到项目中(qrc机制)，在代码中访问到这个图片，基于这个图片构造出光标对象来设置

如要找图标的话，可以去阿里巴巴矢量图标库下载

7.font属性

可以通过属性面板直接修改

通过代码进行修改

8.toolTip属性

练习

9.focusPolicy属性

通过属性栏这里完成相应操作

10.styleSheet属性

通过CSS设置widget的样式.

CSS (CascadingStyleSheets层叠样式表)本⾝属于⽹⻚前端技术.主要就是⽤来描述界⾯的样式. 所谓"样式",包括不限于⼤⼩,位置,颜⾊,间距,字体,背景,边框等. 我们平时看到的丰富多彩的⽹⻚,就都会⽤到⼤量的CSS.

CSS中可以设置的样式属性⾮常多.基于这些属性Qt只能⽀持其中⼀部分,称为QSS

属性栏中改变

鼠标右键改变

QSS和CSS类似，QSS设置的样式都是键值对的格式

键和值之间使用:分隔

键值对和键值对之间使用;间隔

练习：实现一个夜间模式

这里要想不修改背景色的话，就得联系到计算机中颜色的表示

这里只需要通过取色器来知道背景的初始数值就可以完成修改，可以通过QQ截图的取色器来完成

按钮类控件：

1.PushButton

使⽤ QPushButton 表⽰⼀个按钮.QPushButton 继承⾃ QAbstractButton .这个类是⼀个抽象类.是其他按钮的⽗类.抽象类是包含了纯虚函数，无法创建实例，子类继承这个抽象类时，要重写父类的虚函数，这样才可以创建出子类对象

作为 QWidget 的⼦类,当然也继承了 QWidget 的属性.上⾯介绍的 QWidget ⾥的各种属性⽤法,对于 QAbstractButton 同样适⽤.因此表格仅列出 QAbstractButton 独有的属性

1.带有图标的按钮

先创建一个pushButton按钮，在用qrc导入图片

2.带有快捷键的按钮

先创建对应的PushButton按钮和图片

2.RadioButton

QRadioButton 是单选按钮.可以让我们在多个选项中选择⼀个

实例：选择性别

代码⽰例:click,press,release, toggled 的区别

clicked表⽰⼀次"点击"

pressed表⽰⿏标"按下"

released表⽰⿏标"释放"

toggled表⽰按钮状态切换

代码⽰例:单选框分组实现麦当劳点餐

RadioButton默认是排他的，一旦界面上需要存在多组单选按钮的时候，就需要组和组之间不要影响，这里引⼊QButtonGroup进⾏分组解决

3.CheckBox

QCheckBox 表⽰复选按钮.可以允许选中多个. 和 Q CheckBox 最相关的属性也是QAbstractButton

代码⽰例:获取复选按钮的取值

显示类控件:

1.Label

QLabel 可以⽤来显⽰⽂本和图⽚

代码实例：显示不同的文本

在markdown中#表示一级标题，而在纯文本就只被当做简单的文本内容，<b>标签表示加粗

显示图片

但这里拉伸窗口时，图片并没有铺满窗口

上面的代码是在构造函数中的，进行这样的尺寸设置其实是一次性的，一旦程序运行起来后，QLabel的尺寸就固定下来了，此时窗口发生改变QLabel是不会发生改变的

为了解决这个问题,可以在Widget中重写resizeEvent函数

在Qt中，表示用户的操作有两类概念，一个是信号，一个是事件，当用户拖拽修改窗口大小的时候，就会触发resize事件(resizeEvent).像resiez这样的事件，是连续变化的。如把窗口尺寸从A变到B的过程中，会触发一系列的resizeEvent,此时就可以借助resizeEvent来完成上述的功能

可以让Widget窗口类，重写父类(Qwidget)的resizeEvent虚函数，这个函数在鼠标拖动窗口尺寸的过程中，这个函数就会被反复调用执行，每次触发一个resizeEvent事件都会调用一次对应的虚函数

在Widget.cpp文件中加入

代码实例：⽂本对⻬,⾃动换⾏,缩进,边距

在此处可以设置边框

代码实例：设置伙伴

2.LCD Number

QLCDNumer 是⼀个专⻔⽤来显⽰数字的控件.类似于"⽼式计算器"的效果

代码实例：倒计时

1)在界⾯上创建⼀个 QLCDNumber ,初始值设为10

QT imer 表⽰定时器.通过这个类创建出来的对象，就会产生一个timeout这样的信号，可以通过start方法来开启定时器，并且在参数中设定触发timeout信号的周期

结合connect把这个timeout信号绑定到需要的槽函数中，就可以执行逻辑，修改LCDNumber中的数字

针对上述代码,存在两个问题:

1) 上述代码如果直接在Widget构造函数中,通过⼀个循环+sleep的⽅式是否可以呢?

显然,这个代码是不⾏的.循环会使Widget的构造函数⽆法执⾏完毕,此时界⾯是不能正确构造和显⽰的

上述代码如果是在Widget构造函数中,另起⼀个线程,在新线程中完成循环+sleep是否可以呢?

这个代码同样是不⾏的.Qt中规定,任何对于GUI上内容的操作,必须在主线程中完成.像Widget构造函数,以及connect连接的slot函数,都是在主线程中调⽤的.⽽我们⾃⼰创建的线程则不是. 当我们⾃⼰的线程中尝试对界⾯元素进⾏修改时,Qt程序往往会直接崩溃

3.ProgressBar

使⽤ QProgressBar 表⽰⼀个进度条

代码实例：设置进度条按时间增⻓

在这里当#include <QTimer>放在.cpp文件中时，在.h文件中来创建对象是可以的，不会出现找不到定义这些问题，这其实是通过Qt 内部提供的一个特殊技巧来实现的

在Qt中，有一个专门的头文件，这个头文件中包含了Qt中所有类的前置声明，是为了提高编译速度的，但在实际开发中还是正常包含头文件的

代码实例：创建⼀个红⾊的进度条

QProgressBar 同样也是 QWidget 的⼦类,因此我们可以使⽤式来修改进度条的颜⾊

其中的 chunk 是选中进度条中的每个"块".使⽤ 1 QProgressBar::text 则可以选中⽂本

4.Calendar Widget

QCalendarWidget 表⽰⼀个"⽇历"

代码实例：获取选中的⽇期

输入类控件:

1.Line Edit

QLineEdit ⽤来表⽰单⾏输⼊框.可以输⼊⼀段⽂本,但是不能换⾏

代码实例：录⼊个⼈信息

提供三个LineEdit，两个RadioButton按钮，一个PushButton按钮

inputMask只能进⾏简单的输⼊格式校验. 实际开发中,基于正则表达式的⽅式是更核⼼的⽅法.

正则表达式是⼀种在计算机中常⽤的,使⽤特殊字符描述⼀个字符串的特征的机制.在进⾏字符串匹配时⾮常有⽤

参考: 正则表达式⽂档https://learn.microsoft.com/zh-cn/previous versions/visualstudio/visual-studio-2008/ae5bf541(v=vs.90)?redirectedfrom=MSDN

正则表达式在线⼯具:https://regextester.buyaocha.com/

这里要完成的操作是检查输入的内容是否是合法的手机号码，如果是，则按钮设为可用状态，如果不是，则设为禁用状态

"^1\\d{10} $":这是一个简单的验证手机号码的正则表达式

^表示xxx开头，^后面跟的1，表示以1开头

\d表示数字，为了在c++字符串中使用需要写为\\d

{10}表示前面的内容重复出现10次，即\d数字重复出现10次

$表示结尾了

代码实例：验证两次输⼊的密码⼀致

代码实例：切换显⽰密码

2.TextEdit

QTextEdit 表⽰多⾏输⼊框.也是⼀个富⽂本&markdown编辑器，不仅能表示纯文本，还能表示markdown和html

而QPlainTextEdit只能表示纯文本

代码实例：获取多⾏输⼊框的内容

创建⼀个TextEdit和⼀个label

添加槽函数

代码实例：验证输⼊框的各种信号

ctrl+z触发undoAvailable，ctrl+y触发redoAvailable信号

3.ComboBox

QComboBox 表⽰下拉框

代码实例：使⽤下拉框模拟⻨当劳点餐

这里也可以通过直接添加

代码实例：从⽂件中加载下拉框的选项

很多时候下拉框的选项并⾮是固定的,⽽是通过读取⽂件/读取⽹络获取到的

4.SpinBox

使⽤ Q SpinBox 或者 QDoubleSpinBox 表⽰"微调框",它是带有按钮的输⼊框.可以⽤来输⼊整数/浮点数.通过点击按钮来修改数值⼤⼩

代码实例：调整⻨当劳购物⻋中的份数

创建三个Label控件，三个comboBox控件，三个spinBox控件

5.DateEdit &TimeEdit

这里以QDateTimeEdit为例来介绍

关于本地时间(LocalTime)和协调世界时(UTC) UTC时间是⼀个基于原⼦钟的标准时间.不受地球的⾃转周期影响.和格林威治时间(GMT)是⾮常接近的.科学家会通过精密的设备来测量并维护. 咱们的计算机内部使⽤的时间就是基于UTC时间. 比特就业课本地时间则是基于不同的时区,对UTC时间做出了⼀些调整.⽐如咱们使⽤的北京时间,位于 "东⼋区",就需要在UTC时间基础上+8个⼩时的时差.

代码实例：实现⽇期计算器

但在这里还有一个问题

这里的正确结果应该为0天7小时的，这里为了解决这个问题，可以这样计算天数

6.Dial

使⽤ Q Dial 表⽰⼀个旋钮

代码实例：调整窗⼝透明度

透明度是0~1之间的小数，1表示完全不透明，0表示完全透明

7.Slider

使⽤ QSlider 表⽰⼀个滑动条

代码实例：通过垂直和水平滑动条来调整窗⼝⼤⼩

代码实例：通过⾃定义快捷键调整滑动条位置

多元素控件 :

xxview是更底层的实现，xxwidget是基于xxview封装而来的

此处xxView是MVC结构的一种典型实现(M:model(数据) ；V:view(视图，界面) ; C:controller(控制器)) ，xxview只是负责实现了视图，不负责数据如何存储表示，更不负责数据和视图之间的交互。因此若使用xxview就需要自己实现model和controller的部分。而xxWidget基于xxview，同时把model和controller实现好了，就可以直接用

1.List Widget

使⽤ QListWidget 能够显⽰⼀个纵向的列表

核心信号：

QListWidgetItem . 这个类表⽰ QListWidget 中的⼀个元素，即列表中的每一个元素都可以认为是一个Item

代码实例：使⽤ListWidget

通过这两种代码的方式来给ListWidget添加元素

通过图形化界面点击鼠标左键的方式

2.Table Widget

使⽤ QTableWidget 表⽰⼀个表格控件.⼀个表格中包含若⼲⾏,每⼀⾏⼜包含若⼲列. 表格中的每个单元格,是⼀个 QTableWidgetItem 对象.

QTableWidget 核⼼⽅法

QTableWidgetItem 核⼼信号

QTableWidgetItem 核⼼⽅法

代码实例：使⽤ QTableWidget

3.Tree Widget

使⽤ QTreeWidget 表⽰⼀个树形控件.⾥⾯的每个元素,都是⼀个 QTreeWidgetItem ,每个 QTreeWidgetItem 可以包含多个⽂本和图标,每个⽂本/图标为⼀个列. 可以给 QTreeWidget 设置顶层节点(顶层节点可以有多个),然后再给顶层节点添加⼦节点,从⽽构成树形结构.

QTreeWidget 核⼼⽅法

QTreeWidget 核⼼信号

QTreeWidgetItem 核⼼属性

QTreeWidgetItem 核⼼⽅法

代码实例：使⽤ QTreeWidget

容器类控件:

1.GroupBox

使⽤ QGroupBox 实现⼀个带有标题的分组框.可以把其他的控件放到⾥⾯作为⼀组.这样看起来能更好看⼀点.

代码实例：给⻨当劳案例加上分组框

2.TabWidget

使⽤ QTabWidget 实现⼀个带有标签⻚的控件,可以往⾥⾯添加⼀些widget.进⼀步的就可以通过标签⻚来切换

核⼼属性:

核⼼信号:

代码实例：使⽤标签⻚管理多组控件

布局管理器:

之前使⽤Qt在界⾯上创建的控件,都是通过"绝对定位"的⽅式来设定的. 也就是每个控件所在的位置,都需要计算坐标,最终通过 setGeometry 或者比特就业课 move ⽅式摆放过去. 这种设定⽅式其实并不⽅便.尤其是界⾯如果内容⽐较多,不好计算.⽽且⼀个窗⼝⼤⼩往往是可以调整的,按照绝对定位的⽅式,也⽆法⾃适应窗⼝⼤⼩. 因此Qt引⼊"布局管理器"(Layout)机制,来解决上述问题.

1.垂直布局

使⽤ QVBoxLayout 表⽰垂直的布局管理器.

代码实例：使⽤ QVBoxLayout 管理多个控件

代码实例:创建两个 QVBoxLayout

运⾏程序,可以看到这些按钮已经⾃动排列好.只不过当前这些按钮的位置不能随着窗⼝⼤⼩⾃动变化

通过QtDesigner创建的布局管理器,其实是先创建了⼀个widget,设置过 geometry 属性的.再把这个layout设置到这个widget中. 实际上,⼀个widget只能包含⼀个layout. 打开ui⽂件的原始xml,可以看到其中的端倪. 这种情况下layout并⾮是窗⼝widget的布局管理器,因此不会随着窗⼝⼤⼩改变.

2.⽔平布局

使⽤ QHBoxLayout 表⽰垂直的布局管理器

核⼼属性(和 QVBoxLayout 属性是⼀致的)

代码实例：嵌套布局管理器

3.⽹格布局

Qt 中还提供了 QGridLayout ⽤来实现⽹格布局的效果.可以达到M*N的这种⽹格的效果

代码实例:使⽤ QGridLayout 管理元素

代码实例:设置 QGridLayout 中元素的⼤⼩⽐例

另外, QGridLayout 也提供了 setRowStretch 设置⾏之间的拉伸系数. 上述案例中,直接设置 setRowStretch 效果不明显,因为每个按钮的⾼度是固定的.需要把按钮的垂直⽅向的 sizePolicy 属性设置为 QSizePolicy::Expanding 尽可能填充满布局管理器,才能看到效果.

拉伸系数为0时，即不参与拉伸，此时按钮的宽度是固定值

代码实例:设置垂直⽅向的拉伸系数