布局管理是 GUI 设计的必备技巧,下面逐步讲解如何实现图 1 所示的界面设计。
界面组件的层次关系
为了将界面上的各个组件的分布设计得更加美观,经常使用一些容器类,如QgoupBox、QtabWidget、QFrame 等。
例如,将3个CheckBox 组件放置在一个 GroupBox 组件里,该GroupBox 组件就是这 3 个CheckBox 的容器,移动这个 GroupBox 就会同时移动其中的 3 个CheckBox。
图3界面组件的放置及层次关系
图3显示的是设计图 1 界面的前期阶段。在窗体上放置了 2 个GroupBox 组件,在groupBox1 里放置 3 个CheckBox 组件,在groupBox2 里放置 3 个RadioButton 组件。图3右侧 Object Inspector 里显示了界面上各组件之间的层次关系。
布局管理
Qt 为界面设计提供了丰富的布局管理功能,在UI 设计器中,组件面板里有 Layouts 和Spacers 两个组件面板,在窗体上方的工具栏里有布局管理的按钮(如图 4 所示)。
图4用于布局可视化设计的组件面板和工具栏
Layouts 和Spacers 两个组件面板里的布局组件的功能见表 5:
表5组件面板上用于布局的组件
布局组件功能
Vertical Layout垂直方向布局,组件自动在垂直方向上分布
Horizontal Layout水平方向布局,组件自动在水平方向上分布
Grid Layout网格状布局,网状布局大小改变时,每个网格的大小都改变
Form Layout窗体布局,与网格状布局类似,但是只有最右侧的一列网格会改变大小
Horizontal Spacer一个用于水平分隔的空格
Vertical Spacer一个用于垂直分隔的空格
使用组件面板里的布局组件设计布局时,先拖放一个布局组件到窗体上,如在设计图 4 中3个按钮的布局时,先放一个 Horizontal Layout 到窗体上,布局组件会以红色边框显示。再往布局组件里拖放 3 个Push Button 和2个Horizontal Spacer,就可以得到图 1 中3个按钮的水平布局效果。
在设计窗体的上方有一个工具栏,用于