关于Qt Desginer中的布局方法,网上教程少之又少,个人经过反复的实践和摸索,觉得可以用一句话来概括:
先不断地进行小布局,然后对整体进行大布局
先不断地进行小布局的目的就是将同为一组的控件按某个格式排列使界面干净有序,同时方便以后对整体进行大布局。
对整体进行大布局的目的就是控制各个小布局之间及小布局到窗体边界的距离,同时使得控件自适应窗口变化。
本篇博客通过下述案例来解释这句话:“先不断地进行小布局,然后对整体进行大布局”。
首先我们把选择字体格式的界面做出来,因为选择字体格式是多选,所以我们需要拖拽3个复选框用于选择字体格式:
因为它们是水平在一条直线的,所以我们现在可以对他们3个控件进行一个小布局,即给它们套一个水平布局,但是如果不加弹簧控制他们之间的距离,那么将它们水平布局后,它们就是挨在一起的,如下:
所以我们还需要再加两个弹簧来加长水平布局后3个复选框的距离,那么现在就给它们加弹簧并且对它们进行水平布局:
现在一个小布局好了,这3个复选框我们可以将它们全部放到一个名为groupBox的容器中,方便管理,那么我们现在拖出groupBox,然后将3个复选框形成的小布局当成一个整体拖入groupBox中。
groupBox和里面的3个复选框是一个整体,为了方便在以后的大布局中把它们当成一个整体使用,现在我们要将groupBox和里面的3个复选框也进行一个布局,选中整个复选框,然后点击垂直布局或者水平布局或者栅格布局:
至此,我们完成了第二个小布局,并且完成了选择字体格式的界面。现在开始完成选择字体颜色的界面,方法是一样的。因为选择字体颜色是单选,所以我们需要拖拽3个radioButton出来,给它们之间添加两个弹簧来加长布局后它们之间的距离,然后因为它们是水平摆放的,所以我们给3个radioButto施加一个水平布局,为了方便管理,再拖出一个groupBox,将3个radioButton形成的水平布局当成一个整体拖到groupBox中,为了方便在以后的大布局中能够将groupBox和3个radioButton当成一个整体使用,我们需要给它们也施加一个布局,选中它们,然后点击水平布局或者垂直布局或者栅格布局:
至此,我们已经完成了4个小布局,现在开始完成显示字体的界面,拖拽一个plainTextEdit即可,因为它自己就是一个整体,因此不需要对它进行小布局。
至此,界面已经初步完成,只差最后一步,对整个界面进行大布局。如果直接对整体进行垂直布局,最后的结果是这样的:
为了控制各个小布局之间以及各个小布局到窗口的距离,我们需要先给它们添加弹簧:
如果使用垂直布局的话,水平弹簧就会失效,如果使用水平布局的话,垂直弹簧就会失效。因为这里既使用了水平弹簧,又使用了垂直弹簧,所以这里只能使用栅格布局来对整体进行布局,右击空白处,选择布局,然后选择栅格布局:
至此,我们使用了4个小布局,最后进行了一个整体布局,完成了界面的设计,运行后的界面如下: