Qt 快速利用qt designer Layout绘制GUI界面

---

前言

最近用qt画一个项目界面，本文主要记录了如何通过qt designer使用layout进行快速绘制，下文中的控件和元素意思相同。

---

一、目的

绘制如下图所示的界面：

图1 目标界面

二、实现过程

1.界面使用的元素介绍：

图2 目标界面元素

2.实现步骤

步骤一：先确定主界面的大小（根据自己的需求设定）。要想窗口能够最大化，需要将sizePolicy中的水平策略和垂直策略设置为Expanding。
步骤二：在主界面中拖入界面所需控件。根据自己的需求来设置sizePolicy，此界面对各个控件的需求如下表。

元素	需求	设置
Tablewidget1	高度（矩形的宽）不变，宽度（矩形的长）随主界面的大小而变化	水平策略和垂直策略分别设置为Expanding和Fixed
Tablewidget2	高度和宽度都随着主界面的变化而变化	水平策略和垂直策略都设置为Expanding
Tablewidget3	高度不变，宽度随主界面的大小而变化	水平策略和垂直策略分别设置为Expanding和Fixed
Listwidget	高度随主界面变化和宽度不变	水平策略和垂直策略分别设置为Fixed和Expanding，将maximumSize宽度设置为一个固定值，这里设了一个200，高度设为最大
Label1	----------------	水平策略和垂直策略都设置为Preferred
Label2	----------------	水平策略和垂直策略都设置为Expanding
Groupbox1	----------------	水平策略和垂直策略都设置为Expanding
Groupbox2	----------------	水平策略和垂直策略都设置为Expanding

步骤三：对主界面进行分部分布局，总分为三部分，如下图。

图3 目标界面区域分布

图4 目标界面布局分布

为了让界面显得更有层次，引入了group box。各个部分的布局设置如下表：

Part	布局设置
Part2	1. 为了让Label1显示在左侧，添加了一个Horizontal Spacer，然后将Label1和Horizontal Spacer进行水平布局（horizontalLayout_1）； 2.将horizontalLayout_1与Tablewidget 2、Tablewidget3进行垂直布局（verticalLayout_1）。可通过点击verticalLayout_1在属性中设置控件在verticalLayout_1区域中的比例大小，这里对verticalLayout_1区域中三个控件的比例设置如图6所示
Part3（见图6）	1. 添加一个Frame，将两个pushbotton放进Frame中 2. 将Listwidget、Label2和Frame进行垂直布局（verticalLayout_2） 3. 添加一个groupbox，将verticalLayout_2拖入Group box2，右击Goup box2中verticalLayout_2之外的空白部分，选择水平布局（或垂直布局）。选中后verticalLayout_2会填满Group box2区域（horizontalLayout_3）
界面布局	1. 将Group box1和Group box2进行水平布局（horizontalLayout_4），见图7。需要设置两个区域的比例，在horizontalLayout_4中的属性中将layoutStretch设为5,0 2. 将horizontalLayout_4和Tablewidget1进行垂直布局（verticalLayout_3），见图8。 3. 右击主界面画布除verticalLayout_3部分，选择水平布局（或垂直布局）。选中后verticalLayout_3会填满整个主界面画布。见图9

图5 qt layout属性设置

layoutLeftMargin、layoutRightMargin、layoutTopMargin、layoutBottomMargin分别用于设置布局内的元素据左边框、右边框、上边框和下边框的宽度；layoutStretch用于设置布局内的元素在布局空间内的比例

图6 目标界面各区域布局

图7

图8

图9

总结

本文主要介绍了如何利用利用qt中的layout快速绘制GUI界面