QT入门学习之UI设计布局管理_qtui布局红色线

1. QT Designer 可视化UI设计及布局管理

创建一个Qt Widget Application项目demo2.在创建窗体时选择基类QDialog，生成的类命名为QWDialog，并选择生成窗体。这样生成的项目文件中就会自动生成qwdialog.ui文件、一个头qwdialog.h和一个源程序文件qwdialog.cpp,项目文件demo2.pro和主程序文件main.cpp。

1) 使用QT Designer设计器设计UI，如下所示:

qwdialog.ui中各个组件的相关设置,如下表所示：

如上表所示对象名(objectName)窗体上创建的组件的实例名称(如txtEdit是类名为QPlainTextEdit的组件的实例名称)。在界面上所有的组件都有唯一的一个对象名，程序中访问界面组件都是通过其对象名称来进行访问的。

2)界面组件的布局
Qt的界面设计使用了布局(Layout)功能。所谓布局就是在界面上组件的排列方式，使用布局可以使组件有规则地分布，并且随着窗体的带下变化自动的调整大小和相对位置。
I、界面组件的层次关系
为使界面布局美观，经常使用一些容器类的组件，用于管理其他的一些组件，如:QGroupBox、QTabWidget、QFrame等。如例子中将三个checkBox组件放在对象名为groupBox1组件里，将三个RadioButton放在对象名为groupBox2组件里

II、布局管理
Qt为界面设计提供了丰富的布局管理功能，在UI可视化设计器中，组件面板里有Layouts和Spacers两个组件面板。在窗体上方工具栏里也有布局管理按钮

Vertical Layout：垂直方向布局，组件在垂直方向上自动分布
Horizontal Layout：水平方向布局组件在水平方向上自动分布(图中红色细线框)
Grid Layout:网格状布局，网状布局大小改变时，每个网格的大小都改变
Form Layout：窗体布局与网格布局类似，但只有最右侧的一列网格会改变大小
Horizontal Spacer：一个用于水平分隔的空格
Vertical Spacer：一个用于垂直分隔的空格
工具栏上除了上述的布局工具以外还有如下的常用工具,编号1～6：

编号1(Edit Widget):界面设计进入编辑状态(即正常的设计状态)。
编号2(Edit Signals/Slots):进入信号与槽的可视化设计状态。
编号3(Edit Buddies):进入伙伴关系编辑状态，可以设置一个Label与一个组件成为伙伴关系。
编号4(Edit Tab Order)：进入tab顺序编辑状态，tab顺序就是在键盘上按Tab键，输入焦点在界面上各个组件之间的跳动顺序。
编号5(Break Layout):解除窗体上所有组件的布局。
编号6(Adjust Size):自动调整所选组件的大小

注1：使用工具栏上的布局控制按钮，只需要在窗体上选择需要设计布局的组件，然后点击某个布局按钮即可。若要选择多个，则按住Ctr不放l同时选择需要的多个组件。若选择容器类组件，相当于选择了其内部所有的组件。

注2：在进行完窗体组件布局设置后，拖动窗体，改变窗体大小，发现组件大小不能够随着窗体的大小变化而自动改变。这就需要对整个窗体进行总的布局，具体操作是选择窗体(不选择除窗体外其他任何组件)，单击工具栏上的Layout Vertically按钮，使4个组件垂直分布。

III、组件伙伴关系与Tab顺序

在UI设计工具栏上单击"Edit Buddies"按钮即进入伙伴关系编辑状态，在进入伙伴关系编辑状态后单击Label组件，按住鼠标左键然后拖向另一个组件，这样就建立了Label与另一个组件的伙伴关系。如上图所示当程序运行用户按Alt+N时候输入焦点会自动快速切换到姓名关联的输入框。
注：Label的Text属性设置为姓名(&N),这个&用来指定快捷字符。
在UI设计工具栏上单击"Edit Tab Order"按钮即进入Tab顺序编辑状态，编辑每个组件序号来确认Tab顺序(即按Tab键时输入焦点的运动顺序)。

2. QT 代码化UI设计及布局管理

创建一个Qt Widget Application项目demo2.在创建窗体时选择基类QDialog，生成的类命名为QWDialog，并选择生成窗体。这样生成的项目文件中就会自动生成一个头qwdialog.h和一个源程序文件qwdialog.cpp,项目文件demo2.pro和主程序文件main.cpp。
qwdialog.h文件实现：

qwdialog.cpp文件功能实现及运行效果：

注：QVBoxLayout *vblayout=new QVBoxLayout;
vblayout->addLayout(hblayout);
vblayout->addWidget(label);
setLayout(vblayout);
完成窗体的总布局，这样组件就会随着窗体大小变化而自动调整组件大小。