目录
接下来的日子会顺顺利利，万事胜意，生活明朗-----------林辞忧
控件概述
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://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时，即不参与拉伸，此时按钮的宽度是固定值
代码实例:设置垂直⽅向的拉伸系数
4.表单布局
QFormLayout ,属于是 QGridLayout 的特殊情况,专⻔⽤于实现两列表单的布局.
这 QFormLayout ,属于是 QGridLayout 的特殊情况,专 种表单布局多⽤于让⽤⼾填写信息的场景.左侧列为提⽰,右侧列为输⼊框
代码实例:使⽤ QFormLayout 创建表单
5.Spacer
使⽤布局管理器的时候,可能需要在控件之间,添加⼀段空⽩.就可以使⽤ QSpacerItem 来表⽰.
代码实例:创建⼀组左右排列的按钮
2324
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
