【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
的情况是相同的。