首先,我们在Qt Designer中已经将所需的控件都安放好了,如下图所示:
在这里插入图片描述
  但是,如果直接使用该界面的话,在生成界面后,拖动界面进行缩放的时候,这些部件是不会随着窗口的大小来自动填充整个窗口的,如下图所示:
在这里插入图片描述
  因此,我们需要在设计器里面对该窗口的控件进行进一步的设置。

1. 水平布局

  从窗口的设计中可以看出,标签1那一行,以及添加删除这一行的按钮都应该是在一条水平线上的。因此,我们需要对他们进行水平布局设置。
  首先,按住鼠标左键拖框选中标签1、组合框和标签2,如下图所示。当然,也可以按住ctrl键,然后鼠标左键依次点击这三个控件来进行选中。
在这里插入图片描述
  选中以后,鼠标右键,选择布局->水平布局,如下图所示:
在这里插入图片描述
  生成的效果如下图所示:
在这里插入图片描述
  同理,对窗口底部的四个按钮也执行同样的操作。不过,需要注意的是,这里我们希望四个按钮是两两一组,然后分居左右的,所以不能将它们直接设置成一个水平布局,否则效果就会像下图所示:
在这里插入图片描述
  因为水平布局的特性是:同一类型的控件其大小保持一致,同一布局下,各控件之间的间隔是一致的。为了达到我们想要的效果,更恰当的做法是,先对添加删除两个按钮进行一次水平布局,再对保存关闭两个按钮进行一次水平布局,最后对这两个水平布局再进行一次水平布局,如下图所示。这么做可以将这四个按钮先分成两组,然后再进行组合。
在这里插入图片描述
  水平布局的时候,默认的控件间距是6,如果我们想要修改它们之间的间距,可以选中这个布局,然后在设计器右侧的layoutSpacing进行设置:
在这里插入图片描述
  将其设置为12,效果如下图所示:
在这里插入图片描述
  这里也许你会问,怎么不对两组按钮之间的间隔进行设置呢?这里,我们不能之间对其进行layoutSpacing设置,因为这个只能设置一个固定值。而我们想要的效果是,在缩放窗口的时候,所有控件可以跟随窗口进行自适应布局,如果设置成固定值,那还怎么自动调整呢?这里需要用到的是Horizontal Spacer控件,会在第3部分进行讲解。

2. 垂直布局

  水平布局完成后,现在可以将界面中的控件看成4个,它们呈垂直布局。因此,我们直接选中界面上的所有控件,然后执行垂直布局操作,如下图所示:
在这里插入图片描述
  现在,整个窗口内的控件就都是一组的了。我们发现它们没有填充满整个界面,很简单,只要拖动对这个垂直布局的右下角,将其缩放的想要的大小就可以了,里面的所有控件都会自适应进行大小的调整。
在这里插入图片描述
  现在还有的问题就是,标签1那一行,还有底下的四个按钮,都被自动拉伸到和中间的tableview一样的宽度了。下面对此进行解决。

3. Horizontal Spacer

  Horizontal Spacer是一个水平方向的可以控制控件间距的控件,与它相对于的还有Vertical Spacer,它们都在Spacers目录下,如下图所示:
在这里插入图片描述
  将Horizontal Spacer直接拖到标签2的右侧,以及两组按钮的中间位置,它会依据控件的设置自动伸缩大小,效果如下:
在这里插入图片描述
  简直就是一键布局有木有。这里,拖放控件的时候有个小trick,当把要加入的部件拖到已有控件中去的时候,比如我要把一个Horizontal Spacer放到标签2的右侧,当将其拖到右侧时,会出现一条加粗的蓝线,这表明已经拖到位了,此时松开鼠标就可以了。
  现在,整个窗口都跟我们一开始手动拖放的是一致的了,但是它更加的规整,各个控件之间也很好地对齐了,赏心悦目。不过,到这里还没有完。现在我们只是对各个控件之间的相对位置进行了排布,却没有将这一排布与窗口进行关联。因此,如果只到这一步的话,所有控件在缩放的时候依旧是不会自动填充满整个窗口的。

4. 在窗体布局中布局

  在窗口的空白区域(注意是要在空白区域),右键鼠标,依次选择布局->在窗体布局中布局,如下图所示:
在这里插入图片描述
  完成后会发现界面变成了下图所示的样子:
在这里插入图片描述
  只需要把布局拉伸充满整个窗口即可(这里也有一个小trick,用鼠标直接在窗口界面中点击布局的外框时候,很容易错选到其他控件的边界,一个简便的方法是,可以直接在界面右侧的控件列表中选中目标控件),如下图所示:
在这里插入图片描述

5.最终效果

  好了,现在整个界面的设计整改都完成了,保存后,使用这个ui生成的界面将可以跟随窗口的缩放来自动进行缩放,如下图所示(依次为初始、缩小、放大界面的结果):
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐