【QT】常用控件（概述、QWidget核心属性、按钮类控件、显示类控件、输入类控件、多元素控件、容器类控件、布局管理器）

【使用 QTableWidget】

（1）在界面上创建 QTableWidget 和 三个按钮，一个输入框

注意：QTableWidget 是 QTableView 的子类，功能比 QTableView 更丰富。我们使用 QTableWidget 即可。

---

（2）编写 widget.cpp 构造函数，构造表格中的初始数据

---

（3）编写按钮的 slot 函数

---

（4）执行程序，即可完成表格的基本操作

默认情况下，单元格中的内容直接就是可编辑的。如果不想让用户编辑，可以设置 ui->tableWidget->setEditTriggers(QAbstractItemView::NoEditTriggers);

---

4、Tree Widget

使用 QTreeWidget 表示一个树形控件，里面的每个元素都是一个 QTreeWidgetItem，每个 QTreeWidgetItem 可以包含多个文本和图标，每个文本 / 图标为一个列。

可以给 QTreeWidget 设置顶层节点（顶层节点可以有多个），然后再给顶层节点添加子节点，从而构成树形结构。

QTreeWidget 核心方法：

QTreeWidget 核心信号：

QTreeWidgetItem 核心属性：

.

QTreeWidgetItem 核心方法：

---

【使用 QTreeWidget】

（1）在界面上创建一个 TreeView，右键 => 变形为 => TreeWidget，再创建一个 lineEdit 和两个按钮

注意：TreeWidget 是 TreeView 的子类，功能比 TreeView 更丰富。我们使用 TreeWidget 即可。

---

（2）编写代码，构造初始数据

---

（3）编写代码，实现按钮的 slot 函数

---

（4）执行程序，可以针对树形框进行编辑

---

七、容器类控件

1、Group Box

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

注意：不要把 QGroupBox 和 QButtonGroup 混淆（之前在介绍 QRadionButton 的时候提到了 QButtonGroup）。

核心属性：

分组框只是一个用来 “美化界面” 这样的组件，并不涉及到用户交互和业务逻辑，属于 “锦上添花"。

---

【给麦当劳案例加上分组框】

（1）在界面上创建三个分组框，并且在分组框内部创建下拉框和微调框

注意：在复制粘贴控件的时候，一定要先选中对应的父控件，再粘贴。

---

2、Tab Widget

使用 QTabWidget 实现一个带有标签页的控件，可以往里面添加一些 widget，进一步的就可以通过标签页来切换。

核心属性：

核心信号：

---

【使用标签页管理多组控件】

（1）在界面上创建一个 QTabWidget 和两个按钮

注意 ：

• QTabWidget 中的每个标签页都是⼀个 QWidget
• 点击标签页就可以直接切换
• 右键 QTabWidget，可以添加标签页或者删除标签页

---

（2）编写 widget.cpp，进行初始化，给标签页中放个简单的 label

注意新创建的 label 的父元素，是 ui->tab 和 ui->tab_2。Qt 中使用父子关系决定该控件 “在哪里”。

---

（3）编写按钮的 slot 函数

• 使用 count() 获取到标签页的个数
• 使用 addTab 新增标签页
• 使用 removeTab 删除标签页
• 使用 currentIndex 获取到当前标签页的下标
• 使用 setCurrentIndex 切换当前标签页

---

（4）编写 QTabWidget 的 currentChanged 函数

---

（5）运行程序

• 点击新建标签页，可以创建出新的标签
• 点击删除当前标签页，可以删除标签
• 切换标签页时，可以看到 qDebug 打印出的标签页编号

---

八、布局管理器

之前使用 Qt 在界面上创建的控件都是通过 “绝对定位” 的方式来设定的，也就是每个控件所在的位置都需要计算坐标，最终通过 setGeometry 或者 move 方式摆放过去。

这种设定方式其实并不方便，尤其是界面如果内容比较多，不好计算，而且一个窗口大小往往是可以调整的，按照绝对定位的方式，也无法自适应窗口大小。因此 Qt 引入 “布局管理器”（Layout）机制来解决上述问题。

当然，布局管理器并非 Qt 独有。其他的 GUI 开发框架，像 Android、前端等也有类似的机制。

---

1、垂直布局

使用 QVBoxLayout 表示垂直的布局管理器，V 是 vertical 的缩写。

核心属性：

Layout 只是用于界面布局，并没有提供信号。

---

【使用 QVBoxLayout 管理多个控件】

（1）编写代码，创建布局管理器和三个按钮，并且把按钮添加到布局管理器中

• 使用 addWidget 把控件添加到布局管理器中
• 使用 setLayout 设置该布局管理器到 widget 中

---

（2）运行程序

可以看到此时界面上的按钮就存在于布局管理器中，随着窗口尺存变化而发生改变。此时的三个按钮的尺存和位置都是自动计算出来的。

通过上述代码的方式，只能给这个 widget 设定一个布局管理器。实际上也可以通过 Qt Design 在一个窗口中创建多个布局管理器。

---

【创建两个 QVBoxLayout】

（1）在界面上创建两个 QVBoxLayout，每个 QVBoxLayout 各放三个按钮

---

（2）运行程序

可以看到这些按钮已经自动排列好，只不过当前这些按钮的位置不能随着窗口大小自动变化。

通过 Qt Designer 创建的布局管理，其实是先创建了一个 widget，设置过 geometry 属性的，再把这个 layout 设置到这个 widget 中。

实际上，一个 widget 只能包含一个 layout。打开 ui 文件的原始 xml，可以看到其中的端倪。这种情况下 layout 并非是窗口 widget 的布局管理器，因此不会随着窗口大小改变。

---

2、水平布局

使用 QHBoxLayout 表示垂直的布局管理器，H 是 horizontal 的缩写。

核心属性（和 QVBoxLayout 属性是一致的）

---

【使用 QHBoxLayout 管理控件】

（1）编写代码，创建布局管理器和三个按钮，并且把按钮添加到布局管理器中

---

（2）运行程序

可以看到此时界面上的按钮就存在于布局管理器中，随着窗口尺寸变化而发生改变。此时的三个按钮的尺存和位置都是自动计算出来的。

Layout 里面可以再嵌套上其他的 layout，从而达到更复杂的布局效果。

---

【嵌套的 layout】

（1）在代码中创建以下内容

使用 addLayout 给 layout 中添加子 layout：

---

（2）执行程序

---

3、网格布局

Qt 中还提供了 QGridLayout 用来实现网格布局的效果，可以达到 M * N 的这种网格的效果。

核心属性：

整体和 QVBoxLayout 以及 QHBoxLayout 相似，但是设置 spacing 的时候是按照垂直水平两个方向来设置的。

---

【使用 QGridLayout 管理元素】

（1）代码中创建 QGridLayout 和 4 个按钮

使用 addWidget 添加控件到布局管理器中，但是添加的同时会指定两个坐标，表示放在第几行，第几列。

---

（2）执行代码

可以看到当前的这几个按钮是按照 2 行 2 列的方式排列的：

---

（3）如果调整行列坐标为下列代码

执行代码可以看到这几个按钮都在同一行了，相当于 QHBoxLayout：

---

（4）如果调整行列坐标为下列代码

执行代码可以看到这几个按钮都在同一列了，相当于 QVBoxLayout：

---

（5）任意调整行列，即可看到不同的效果

---

（6）编写代码形如

注意 ：设置行和列的时候，如果设置的是一个很大的值，但是这个值和上一个值之间并没有其他的元素，那么并不会在中间腾出额外的空间。

虽然把 button4 设置在第 100 行，但是由于 3-99 行没有元素，因此 button4 仍然会紧挨在 button3 下方看起来和上面的 0 1 2 3 的情况是相同的。