Qt-5种布局控件详解

实际开发中，一个界面上可能包含十几个控件，手动调整它们的位置既费时又费力。作为一款成熟的 GUI 框架，Qt 提供了很多摆放控件的辅助工具（又称布局管理器或者布局控件），它们可以完成两件事：

• 自动调整控件的位置，包括控件之间的间距、对齐等；
• 当用户调整窗口大小时，位于布局管理器内的控件也会随之调整大小，从而保持整个界面的美观。

总之借助布局管理器，我们无需再逐个调整控件的位置和大小，可以将更多的精力放在软件功能的实现上。

Qt 共提供了 5 种布局管理器，每种布局管理器对应一个类，分别是 QVBoxLayout（垂直布局）、QHBoxLayout（水平布局）、QGridLayout（网格布局）、QFormLayout（表单布局）和 QStackedLayout（分组布局），它们的继承关系如下图所示：
 

图 1 各个布局管理类的继承关系

QVBoxLayout垂直布局

垂直布局指的是将所有控件从上到下（或者从下到上）依次摆放，例如：
 

图 2 QVBoxLayout垂直布局

图 2 展示了 4 个 QPushButton 按钮利用 QVBoxLayout 垂直布局的效果。实际场景中，QVBoxLayout 中还可以放置其它控件，比如 QLabel 文本框、QLineEdit 单行输入框等。

程序中使用 QVBoxLayout 布局控件，需提前引入头文件。每个 QVBoxLayout 控件本质都是 QVBoxLayout 类的实例对象，该类提供了两个构造函数，分别是：

QVBoxLayout()
QVBoxLayout(QWidget *parent)

创建 QVBoxLayout 控件的同时可以指定父窗口，那么它将作为父窗口中管理其它控件的工具；也可以暂时不指定父窗口，待全部设置完毕后再将其添加到某个窗口中。

QVBoxLayout 类没有新增任何成员方法，它只能使用从父类继承的成员方法，下表给大家罗列了常用的一些：
 

举个简单的例子：

1. #include
2. #include
3. #include
4. #include
6. int main(int argc, char *argv[])
7. {
8. QApplication a(argc, argv);
9. //创建主窗口
10. QWidget widget;
11. widget.setWindowTitle("QVBoxLayout垂直布局");
12. //创建垂直布局管理器
13. QVBoxLayout *layout=new QVBoxLayout;
14. //设置布局管理器中所有控件从下往上依次排列
15. layout->setDirection(QBoxLayout::BottomToTop);
17. //连续创建 3 个文本框，并设置它们的背景和字体大小
18. QLabel lab1("Label1");
19. lab1.setStyleSheet("QLabel{background:#dddddd;font:20px;}");
20. lab1.setAlignment(Qt::AlignCenter);
21. QLabel lab2("Label2");
22. lab2.setStyleSheet("QLabel{background:#cccccc;font:20px;}");
23. lab2.setAlignment(Qt::AlignCenter);
24. QLabel lab3("Label3");
25. lab3.setStyleSheet("QLabel{background:#ffffff;font:20px;}");
26. lab3.setAlignment(Qt::AlignCenter);
28. //将 3 个文本框和 2 个空白行添加到管理器中，它们的伸缩系数比是 2:1:2:3:3
29. layout->addStretch(2);
30. layout->addWidget(&lab1,1);
31. layout->addWidget(&lab2,2);
32. layout->addWidget(&lab3,3);
33. layout->addStretch(3);
35. //将布局管理器添加到 widget 窗口中
36. widget.setLayout(layout);
37. widget.show();
38. return a.exec();
39. }

程序中做了以下几个操作：

• 通过调用 setDirection() 方法，将添加到 QVBoxLayout 管理器中的所有控件（包括空白行）按照从下到上的顺序依次摆放。举个例子，由于 lab1 文本框是第二个添加到管理器中的，因此在最终显示的界面中，lab1 位于倒数第二的位置。
• 通过调用 addStrech() 方法，向管理器中先后添加了两个空白行，它们的伸缩系数分别为 2 和 3，因此 widget 窗口中的空白区域会平均分为 5 份，一个空白行占 3 份，另一个占 2 份。
• 通过调用 addWidget() 方法，向管理器中先后添加了 3 个文本框，它们的拉伸系数比为 1:2:3，所以当我们拉伸 widget 窗口时，三个文本框的大小（宽度）呈现 1:2:3 的关系。
• 通过调用 setLayout() 方法，成功地将 layout 布局管理器添加到了 widget 窗口中。当然，也可以在创建 layout 对象时指定 widget 作为它的父窗口，两种方式是完全等价的。

执行结果为：

图 3 QVBoxLayout 实例演示

QHBoxLayout水平布局

水平布局指的是将所有控件从左到右（或者从右到左）依次摆放，例如：
 

图 4 QHBoxLayout水平布局

使用 QHBoxLayout 水平布局控件，程序中要提前引入头文件。QHBoxLayout 和 QVBoxLayout 继承自同一个类，它们的用法非常相似，比如 QHBoxLayout 类也提供了两个构造函数：

QHBoxLayout()
QHBoxLayout(QWidget *parent)

QHBoxLayout 类也没有新添任何成员方法，它只能使用从父类继承的成员方法。因此，表 1 中罗列的所有成员方法也同样适用于 QHBoxLayout 对象。

注意，当 QHBoxLayout 对象调用表 1 中的 addStretch() 方法时，表示添加一个空白列。

举个简单的例子：

1. #include
2. #include
3. #include
4. #include
6. int main(int argc, char *argv[])
7. {
8. QApplication a(argc, argv);
9. //创建主窗口
10. QWidget widget;
11. widget.setWindowTitle("QHBoxLayout水平布局");
12. //创建水平布局管理器
13. QHBoxLayout *layout=new QHBoxLayout;
14. //设置布局管理器中所有控件的布局方向为从右往左依次排列
15. layout->setDirection(QBoxLayout::RightToLeft);
17. //连续创建 3 个文本框，并设置它们的背景和字体大小
18. QLabel lab1("Label1");
19. lab1.setStyleSheet("QLabel{background:#dddddd;font:20px;}");
20. lab1.setAlignment(Qt::AlignCenter);
21. QLabel lab2("Label2");
22. lab2.setStyleSheet("QLabel{background:#cccccc;font:20px;}");
23. lab2.setAlignment(Qt::AlignCenter);
24. QLabel lab3("Label3");
25. lab3.setStyleSheet("QLabel{background:#ffffff;font:20px;}");
26. lab3.setAlignment(Qt::AlignCenter);
28. //将 3 个文本框和 2 个空白列添加到管理器中，它们的拉伸系数比是 2:1:2:3:3
29. layout->addStretch(2);
30. layout->addWidget(&lab1,1);
31. layout->addWidget(&lab2,2);
32. layout->addWidget(&lab3,3);
33. layout->addStretch(3);
35. //将布局管理器添加到 widget 窗口中
36. widget.setLayout(layout);
37. widget.show();
38. return a.exec();
39. }

程序执行结果为：

图 5 QHBoxLayout水平布局实例

图 5 中，最左侧和最右侧各添加了一个空白列，它们的伸缩比例为 3:2，即它们的宽度比为 3:2。

QGridLayout网格布局

网格布局又称格栅布局或者表格布局，指的是将一些控件按照行和列排列在窗口上，例如：
 

图 6 QGridLayout网格布局

QGridLayout 的行标和列标都从 0 开始，例如图 6 中 one 按钮的位置为 (0, 0)，Four 按钮的位置为 (2, 0)。我们可以随意指定 QGridLayout 的行数和列数，各个控件可以随意摆放，必要时某些位置可以空着不用。

使用 QGridLayout 网格控件，程序中需引入头文件。每个 QGridLayout 控件都是 QGridLayout 类的一个实例对象，该类提供了两个构造函数，分别是：

QGridLayout(QWidget *parent)
QGridLayout()

QGridLayout 类提供了很多实用的成员方法，常用的如下表所示：

举个简单的例子：

1. #include
2. #include
3. #include
4. #include
5. #include
6. int main(int argc, char *argv[])
7. {
8. QApplication a(argc, argv);
9. //创建主窗口
10. QWidget widget;
11. widget.setWindowTitle("QGridLayout网格布局");
12. //创建 4 个按钮和 1 个文本框
13. QPushButton *but1 = new QPushButton("but1");
14. QPushButton *but2 = new QPushButton("but2");
15. QLabel *lab3 = new QLabel("lab");
16. lab3->setStyleSheet("QLabel{background:#dddddd;font:20px;}");
17. lab3->setAlignment(Qt::AlignCenter);
18. QPushButton *but3 = new QPushButton("but3");
19. QPushButton *but4 = new QPushButton("but4");
20. //创建网格布局控件
21. QGridLayout *layout = new QGridLayout;
22. //向 layout 中添加控件，并指定各个控件的位置
23. layout->addWidget(but1, 0, 0);
24. layout->addWidget(but2, 0, 2);
25. layout->addWidget(lab3, 1, 0, 3, 3);
26. layout->addWidget(but3, 4, 0);
27. layout->addWidget(but4, 4, 2);
28. //将 layout 添加到 widget 窗口中
29. widget.setLayout(layout);
30. widget.show();
31. return a.exec();
32. }

程序运行结果为：

图 7 QGridLayout网格布局实例

图 7 中，文本框控件从 (1,0) 位置开始，占据了 3 行 3 列的表格空间。

QFormLayout表单布局

Qt 提供了很多种输入框控件，包括 QLineEdit 单行输入框、QTextEdit 多行输入框等。通常情况下，每个输入框的旁边都会附带一些文字（又称标签），用来提示用户需要输入的信息。例如，图 8 中第一个输入框的标签为 "Name"，提示用户填写自己的姓名。
 

图 8 QFromLayout表单布局

生成图 8 这样的界面，实现的方法有很多，例如：

1. 分别创建 3 个 QLabel 控件和 3 个 QLineEdit 控件，手动指定它们的位置；
2. 在 QHBoxLayout 中嵌套 3 个 QVBoxLayout，又或者在 QVBoxLayout 中嵌套 3 个 QHBoxLayout，然后再添加 3 个 QLabel 控件和 3 个 QLineEdit 控件；
3. 使用 QGridLayout 创建一个 3 行 2 列的表格，向表格中添加 3 个 QLabel 控件和 3 个 QLineEdit 控件。
4. 使用 QFormLayout 表单布局控件实现。

第 1 种方法最大的弊端在于，各个控件的尺寸都是固定的，不会随着父窗口尺寸的改变而改变。第 2、3、4 种方法都是借助布局控件实现的，各个控件的尺寸可以自动调整，但前两种方法需要手动设置每一列的 strech 拉伸系数，而第 4 种方式不需要。总之对于生成类似图 8 这样的表单窗口，建议大家使用 QFormLayout 控件，因为使用 QFormLayout 编写的代码量最少，开发效率最高。 

QFormLayout 可以容纳很多个输入框以及对应的标签，并将它们从上到下依次排列在界面上（如图 8 所示）。大多数情况下，QFormLayout 底层是用 QGridLayout 网格布局管理器实现的，和后者不同的是，QFormLayout 只包含 2 列（不限制行数），且第一列放置标签，第二列放置输入框。

使用 QFormLayout 布局控件之前，程序中应引入头文件。每一个表单布局控件都是 QFormLayout 类的一个实例对象，该类仅提供了一个构造函数：

• QFormLayout(QWidget *parent = Q_NULLPTR)

下表给大家罗列了操作 QFormLayout 对象常用的一些成员方法：
 

举个简单的例子：

1. #include
2. #include
3. #include
4. #include
5. int main(int argc, char *argv[])
6. {
7. QApplication a(argc, argv);
8. //创建主窗口
9. QWidget widget;
10. widget.setWindowTitle("QFormLayout表单布局");
11. //创建 4 个按钮和 1 个文本框
12. QFormLayout* layout = new QFormLayout();
13. //设置表单中的标签都位于控件的上方
14. layout->setRowWrapPolicy(QFormLayout::WrapAllRows);
15. //添加 3 行输入框和标签
16. layout->addRow("Name:",new QLineEdit());
17. layout->addRow("Email:",new QLineEdit());
18. layout->addRow("Adress:",new QLineEdit());
19. //设置行间距和列间距为 10
20. layout->setSpacing(10);
21. //将 layout 表单添加到 widget 窗口中
22. widget.setLayout(layout);
23. widget.show();
24. return a.exec();
25. }

程序运行结果为：

图 9 QFormLayout表单布局实例

QStackedLayout分组布局

QStackedLayout 布局管理器可以容纳多个控件或者窗口，但每次只显示其中的一个。

举个简单的例子，下图中的界面就使用了 QStackedLayout 布局管理器：

图 10 QStackedLayout布局管理器

整个窗口被一分为二，左侧是 QListWidget 列表控件，右侧是 QStackedLayout 布局管理器。QStackedLayout 中包含 QPushButonn、QLabel 和 QLineEdit 这 3 个控件，但每次只能 3 个控件中的一个。

QStackedLayout 自身无法切换当前显示的控件或窗口，实际应用时通常和 QListWidget 或者 QComboBox 搭配使用。

使用 QStackedLayout 布局控件，程序中必须先引入头文件。 每个 QStackedLayout 控件都是 QStackedLayout 类的一个实例对象，该类提供有 3 个构造函数，分别是：

QStackedLayout()
QStackedLayout(QWidget *parent)
QStackedLayout(QLayout *parentLayout)

借助第二个构造函数，我们可以将 QStackedLayout 添加到指定的 parent 窗口中；借助第三个构造函数，我们可以将 QStackedLayout 嵌入到指定的 parentLayout 布局控件中

本节学习的 5 种布局控件都可以嵌套使用，例如将 QVBoxLayout 放到 QHBoxLayout 内部、将 QGridLayout 放到 QStackedLayout 内部等。

下表罗列了操作 QStackedLayout 对象常用的一些成员方法：

这里我们以图 10 所示的窗口为例，实现代码如下：

1. #include
2. #include
3. #include
4. #include
5. #include
6. #include
7. #include
8. #include
9. int main(int argc, char *argv[])
10. {
11. QApplication a(argc, argv);
12. //创建主窗口
13. QWidget widget;
14. widget.setWindowTitle("QStackedLayout分组布局");
15. widget.resize(600,400);
16. //向主窗口中添加一个水平布局控件
17. QHBoxLayout *layout=new QHBoxLayout;
19. //创建一个列表
20. QListWidget listWidget(&widget);
21. listWidget.setMinimumWidth(150);
22. listWidget.setFont(QFont("宋体",14));
23. listWidget.addItem("QPushButton");
24. listWidget.addItem("QLabel");
25. listWidget.addItem("QLineEdit");
27. //新建 3 个窗口，分别放置文本框、按钮和单行输入框
28. QWidget widget1;
29. widget1.setMinimumSize(400,400);
30. QPushButton but1("这是一个按钮",&widget1);
32. QWidget widget2;
33. widget2.setMinimumSize(400,400);
34. QLabel lab1("这是一个文本框",&widget2);
36. QWidget widget3;
37. widget3.setMinimumSize(400,400);
38. QLineEdit edit("这是一个单行输入框",&widget3);
40. //创建一个分组布局，将 3 个窗口添加到分组控件中
41. QStackedLayout *stackedLayout = new QStackedLayout;
42. stackedLayout->addWidget(&widget1);
43. stackedLayout->addWidget(&widget2);
44. stackedLayout->addWidget(&widget3);
46. //layout 第一列添加 QListWidget 控件，第二列添加分组布局控件，设置它们的伸缩系数比为 1:4
47. layout->addWidget(&listWidget,1);
48. layout->addLayout(stackedLayout,4);
49. //将 layout 水平布局控件添加到 widget 窗口中
50. widget.setLayout(layout);
51. widget.show();
52. //连接信号和槽，实现当点击列表中的某一项，切换分组布局管理器显示的控件
53. QObject::connect(&listWidget,&QListWidget::currentRowChanged,stackedLayout,&QStackedLayout::setCurrentIndex);
54. return a.exec();
55. }

此程序中，我们在 QHBoxLayout 水平布局控件内又放置了一个 QStackedLayout 分组布局控件。感兴趣的读者可以编写程序，测试其它布局控件之间嵌套的效果。