Qt常用控件 - 技术栈

一、控件概述

二、QWidget核心属性

[2.1 核心属性概揽](#2.1 核心属性概揽)

[2.2 enabled](#2.2 enabled)

[2.3 Window Frame（窗口框架）的影响](#2.3 Window Frame（窗口框架）的影响)

[2.4 widowTitle](#2.4 widowTitle)

[2.5 windowIcon](#2.5 windowIcon)

[2.6 windowOpacity](#2.6 windowOpacity)

[2.7 cursor](#2.7 cursor)

[2.8 font](#2.8 font)

[2.9 toolTip](#2.9 toolTip)

[2.10 focusPolicy](#2.10 focusPolicy)

[2.11 styleSheet](#2.11 styleSheet)

三、按钮类控件

[3.1 Push Button](#3.1 Push Button)

[3.2 Radio Button](#3.2 Radio Button)

[3.3 Check Box](#3.3 Check Box)

四、显示类控件

[4.1 Label](#4.1 Label)

[4.2 LCD Number](#4.2 LCD Number)

[4.3 ProgressBar](#4.3 ProgressBar)

[4.4 Calendar Widget](#4.4 Calendar Widget)

五、输入类控件

[5.1 Line Edit](#5.1 Line Edit)

[5.2 Text Edit](#5.2 Text Edit)

[5.3 Combo Box](#5.3 Combo Box)

[5.4 Spin Box](#5.4 Spin Box)

[5.5 Date Edit & Time Edit](#5.5 Date Edit & Time Edit)

[5.6 Dial](#5.6 Dial)

六、多元素控件

[6.1 List Widget](#6.1 List Widget)

[6.2 Table Widget](#6.2 Table Widget)

[6.3 Tree Widget](#6.3 Tree Widget)

七、容器类控件

[7.1 Group Box](#7.1 Group Box)

[7.2 Tab Widget](#7.2 Tab Widget)

八、布局管理器

[8.1 垂直布局](#8.1 垂直布局)

[8.2 水平布局](#8.2 水平布局)

[8.4 表单布局](#8.4 表单布局)

[8.5 Spacer](#8.5 Spacer)

一、控件概述

Widget是QT中的核心概念，英文的意思是小部件，我们称之为控件

如上图所示按钮，树形视图，下拉框，滚动条，单行输入框，多行输入框都可以称之为控件,Qt内置了大量的控件

二、QWidget核心属性

QWideget在QT中表示控件，像按钮，视图等具体的控件类都是继承自QWidget,是QWidget的通用部分，随便一个控件都可以看到QWidget属性

2.1 核心属性概揽

2.2 enabled

cpp 复制代码

API              说明 
isEnabled()  获取到控件的可⽤状态.  
setEnabled()  设置控件是否可使⽤.  true  表⽰可⽤,  false  表⽰禁⽤.

代码示例：使用代码创建一个禁用状态的按钮

代码示例：切换两个按钮的状态

在图形化界面拖动两个按钮

编写槽函数

2.3 geometry

位置和尺寸其实就是横坐标x，纵坐标y，度width，高度height

在实际开发的过程中，我们不会直接使用这几个属性，而是通过一系列封装的方法来获取/修改

函数

cpp 复制代码

geometry()  获取到控件的位置和尺⼨. 返回结果是⼀个 QRect, 包含了 x, y, width, height. 其
中 x, y 是左上⻆的坐标.  

setGeometry(QRect) setGeometry(int x, int y, int width, int height) 
设置控件的位置和尺⼨. 可以直接设置⼀个 QRect, 也可以分四个属性单独设置.

代码示例：控制按钮位置

代码示例：请假程序（点击不同意就移动）

这里使用的信号是pressed，鼠标按下事件

2.3 Window Frame（窗口框架）的影响

如果 widget 作为一个窗口（带有标题栏、最小化、最大化、关闭按钮），那么在计算尺寸和坐标的时候就有两种算法：包含 window frame 和不包含 window frame。

其中 x ()、y ()、frameGeometry ()、pos ()、move () 都是按照包含 window frame 的方式来计算的。

其中 geometry ()、width ()、height ()、rect ()、size () 则是按照不包含 window frame 的方式来计算的。

当然，如果一个不是作为窗口的 widget，上述两类方式得到的结果是一致的。

相关API

代码示例：感受gemetry和frameGeometry区别

可以看到在构造函数中，打印的gemetry和frameGeometry

但是点击按钮后存在差异

因为Widget刚刚创建出来，还没有加入到对象树，此时也就不具有Windowframe

在按钮的slot函数，由于用户点击的时候，对象树已经构造好了，所以出现不同

2.4 widowTitle

相关API

注意如果是顶层widget（独立窗口）这个操作才会起效，如果是子widget这个操作没有任何效果

代码示例：设置窗口标题

2.5 windowIcon

我们使用qrc的方式导入照片，这样就不会因为照片的位置出现错误造成失败

新建一个文件

添加名字

添加一个prefix

所谓的prefix可以理解为虚拟的目录，这个目录没有在你的电脑中存在是Qt自己抽象出来的，qrc机制就是把图片的二进制数据转化成C++的代码，为了方便Qt找到这个图片，Qt抽象出来虚拟目录

加入照片，

导入照片的时候，需要确保你导入的图片必须在resource.qrc文件的同级目录，或者同级目录的子目录中

设置成功

2.6 windowOpacity

相关API

代码示例：调整窗口透明度

我们看到控制台上打印opacity但是不是0.1的增加或减少，那是因为我们存储浮点数的时候会把浮点数分成三个部分，符号位，有效数字，指数部分，使用二进制表示有效数字例如第一个有效数字位表示0.5，第二个有效数字位表示0.25等，没有办法凑出一个非常接近0.1这样的数字

2.7 cursor

代码示例：在Qt Designer中设置按钮的光标

运行程序之后光标就会改变

代码示例：通过代码设置按钮的光标

其中的WaitCursor就是等待的光标

代码示例

我们将光标定义成这个图片

和上面一直我们需要建立qrc资源文件

2.8 font

相关API

关于QFont

代码示例：再Qt Designer中设置字体属性

代码示例：在代码中设置字体属性

相关API

代码示例：设置按钮的toolTip

2.10 focusPolicy

设置控件获取到焦点的策略，比如某个控件是否用鼠标选中或者通过tab键选中

Qt::FocusPolicy是一个枚举类型

代码示例：理解不同的focusPolicy

创建四个单行输入输入框（Line Edit）设置不同的焦点策略

观察效果

2.11 styleSheet

通过CSS设置widget 样式

CSS (Cascading Style Sheets 层叠样式表) 本身属于网页前端技术. 主要就是用来描述界面的样式.所谓 "样式", 包括不限于大小, 位置, 颜色, 间距, 字体, 背景, 边框等.<br>我们平时看到的丰富多彩的网页, 就都会用到大量的 CSS.Qt 虽然是做 GUI 开发, 但实际上和网页前端有很多异曲同工之处. 因此 Qt 也引入了对于 CSS 的支持.

Qt只能支持其中一部分，称为QSS

代码示例：设置文本样式

右键选择改变样式表

代码示例：实现切换夜间模式

在界面上创建一个多行输入框（Text Edit）和两个按钮

#333 是深⾊, 但是没那么⿊.#fff 是纯⽩⾊ #000 是纯⿊⾊.

三、按钮类控件

3.1 Push Button

QPushBtton表示一个按钮，继承自QAbstractButton,这个类是一个抽象类，是其他按钮的父类在Qt Designer也能看到这里的继承关系

3.2 Radio Button

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

作为QAbstractButton和QWidget的子类，上面介绍的属性和用法，对于QRadioButton同样使用

QAbstractButton和QRaidButton

代码示例：选择性别

当前代码中，如果程序启动，则不会选择任何选项

可以修改代码，让程序启动默认选中性别男

当前代码中，也可以禁用其他被选中

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

clicked 表示⼀次 "点击"

pressed 表示鼠标 "按下"

released 表示鼠标"释放"

toggled 表示按钮状态切换.

代码示例：单选框分组

在界面上创建6个单选框，用来模拟麦当劳点餐界面

此时我们运行者九个QRadioButton之间是排他的，我们希望每一组内部来控制他，但是组和组之间不能排他

3.3 Check Box

QCheckBox表示复选按钮，可以允许选中多个

和QCheckBox 最相关的属性也是checkable和checked都是继承自QAstractButton,至于QCheckBox独有的属性tristate用来实现三态复选框

代码示例：获取复选按钮的取值

四、显示类控件

4.1 Label

QLabel可以用来显示文本和图片

代码示例：显示不同格式的文本

代码示例：显示图片

此时我们能发现，拖动窗口大小，图片并不会随着窗口大小的改变而改变，所以我们必须在Widget中重写resizeEvent函数

此处的 resizeEvent 函数我们没有⼿动调⽤, 但是能在窗⼝大小变化时被⾃动调用.
这个过程就是依赖 C++ 中的多态来实现的. Qt 框架内部管理着 QWidget 对象表示咱们的窗口. 在窗大小发⽣改变时, Qt 就会⾃动调⽤ resizeEvent 函数.
但是由于实际上这个表示窗⼝的并非是 QWidget, 而是 QWidget 的⼦类, 也就是咱们自己写的 Widget. 此时虽然是通过⽗类调用函数, 但是实际上执⾏的是⼦类的函数(也就是我们重写后的 resizeEvent ).
此处属于是多态机制的⼀种经典⽤法. 通过上述过程, 就可以把⾃定义的代码, 插⼊到框架内部执行. 相当于 "注册回调函数" .

代码示例：文本对齐，自动换行，缩进，边距

创建四个Label并在QFrame中设置frameShape为Box

我们可以看到第一个水平居中，第二个左侧和上方和边框都有间距右侧没有，且首行缩进

第三个设置了margin，四个方向都有间距，第四个可以自动换行

代码示例：设置伙伴

将Label的文本设置成&A的形式&后面跟的数字就是快捷键，可以通过alt+A来触发，设置伙伴按下快捷键对应的伙伴被触发

4.2 LCD Number

是一个专门用来显示数字的控件，类似于老式计算器

代码示例：倒计时

在界面上创建一个QLCDNumber,初始值设为10

修改widget.h代码，创建一个QTimer成员，和一个updateTimer函数

4.3 ProgressBar

使用QProgressBar表示一个进度条

代码示例：设置进度条按时间增长

在实际开发中，进度条的取值，往往是根据当前任务的实际进度来进行设置的

代码示例：创建一个红色的进度条

在styleSheet中写下

QProgressBar::chunk {background-color: #FF0000;}

chunk表示选中进度条中的块

同时也可以将属性设置为垂直水平居中

表示一个日历

相关API

五、输入类控件

5.1 Line Edit

表示单行输入框，可以输入一段文字，但是不能换行

相关API

核心信号

代码示例：录入个人信息

代码示例: 使用正则表达式验证输入框的数据

此处要求在数据框中输入一个合法的电话号码（1开头，11位，全都是数字），如果验证不通过，则确认按钮无法点击

关于正则表达式

是一个特殊字符，用来描述一个字符串的特征的机制

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

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

我们使用QRegExp创建一个正则表达式对象"^1\\d{10}$" 表达以1k开头，后面跟上任意的10个十进制数字

使用QRegExpValidator创建一个验证器对象，Qt中内置了四个主要的验证器对象

代码示例：验证两次输入的密码一致

代码示例:切换显示密码

5.2 Text Edit

QTextEdit表示多行输入框，也是一个富文本和markdown编辑器

核心信号

代码示例：获取多行输入框内容

代码示例：验证输入框的各种信号

选中一段文本时，cursorPositionChanged , selectionChanged , copyAvailable会触发.

按下 ctrl + z 时, textChanged , undoAvailable , redoAvailable ,cursorPositionChanged 会触发

按下 ctrl + y, textChanged , undoAvailable , redoAvailable ,cursorPositionChanged 会触发

5.3 Combo Box

表示下拉框

核心方法

核心信号

代码示例：使用下拉框模拟麦当劳点餐

代码示例：从文件中加载下拉框的选项

很多时候下拉框的选项并非是固定的，而是通过读取文件/读取网络获得到的

Qt 中也提供了 QFile 实现读写⽂件的功能. 当然使⽤ C++ 标准库的 std::fstream 也是完全可以的，之所以存在两套, 是因为 Qt 诞生较早 (1991 年左右), 此时 C++ 还没有完成 "标准化" 的⼯作, C++ 标准库这样的概念也没有诞生.因此 Qt 就自己打造了⼀套库, 实现了字符串, 容器, 文件操作, 多线程, 网络操作, 定时器, 正则表达式等内容.(由于 C++ 标准委员会的不作为, 至今仍然有些 Qt 提供的功能, 是标准库不具备的)

5.4 Spin Box

使用QSpinBox或者QDoubleSpinBox表示微调框，它是带有按钮的输入框，可以用来输入整数/浮点数。通过点击按钮来修改数值大小

我们这里只解释Spin Box

关键属性

核心信号

代码示例：调整麦当劳购物车的份数

5.5 Date Edit & Time Edit

使用QDateEdit 作为日期的微调框

使用QTimeEdit作为时间的微调框

使用QDateTimeEdit作为时间日期的微调框

这几个控件十分的相似我们以QDateTimeEdit为例进行介绍

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

核心信号

代码示例：实现日期计算器

5.6 Dial

旋钮

代码示例：调整窗口透明度

5.7 Slider

表示一个滑动条

核心属性

核心信号

代码示例：调整窗口大小

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

六、多元素控件

QListWidget QListView QTableWidget QTableView QTreeWidget QTreeView

xxWidget 和 xxView 之间的区别

以 QTableWidget 和 QTableView 为例.

• QTableView 是基于 MVC 设计的控件. QTableView 自身不持有数据. 使⽤ QTableView 的

时候需要用户创建⼀个 Model 对象 (比如 QStandardModel ), 并且把 Model 和

QTableView 关联起来. 后续修改 Model 中的数据就会影响 QTableView 的显⽰; 修改

QTableView 的显示也会影响到 Model 中的数据(双向绑定).

• QTableWidget 则是 QTableView 的子类, 对 Model 进行了封装. 不需要用户手动创建

Model 对象, 直接就可以往 QTableWidget 中添加数据了.

表示一个纵向的列表

核心方法

核心方法

上述的介绍中，涉及一个关键的类，QListWidgetItem,这个类表示QLIstWidget中的一个元素核心元素如下，本质就是一个文本+图标构成的

代码示例：使用ListWidget

表示一个表格控件，一个表格中包含若干行，每一行又包含若干列，表格中的每个单元格，是一个QTableWidgetItem对象

QTableWidetItem核心信号

QTableWidegetItem核心方法

代码示例：使用QTableWidget

表示一个树形控件，里面的元素都是一个QTreeWidgetItem，每一个QTreeWidgtItem可以包含多个文本和图标，每个文本图标为一个列，可以给QTreeWidget设置节点，然后再给顶层节点添加子结点，从而构成树形结构

QTreeWidget核心方法

QTreeWidget核心信号

QTreeWidgetItem核心属性

QTreeWidgetItem核心方法

示例：使用QTreeWidget

七、容器类控件

7.1 Group Box

实现一个带有标题的分组框，可以把其他的控件放在里面作为一组，这样看起来能更好看一点

注意不要它和QButtonGroup混淆

核心属性

代码示例：给麦当劳案例加上分组框

实现一个带有标签页的控件，可以往里面添加Widget，进一步就可以通过标签切换

核心属性

核心信号

代码示例：使用标签页管理多组控件

八、布局管理器

之前使用Qt的界面上创建的控件，都是通过绝对定位的方式来设定的。也就是灭个控件所在的位置，都需要计算坐标，最终通过setGemetry或者move方式摆放过去，这种方式其实并不方便，由器界面内容比较多，不好计算，而且一个窗口往往是可以调整的，按照绝对定位的方式，也无法自适应窗口大小，因此引用布局管理器