Qt界面设计时使各控件依据窗口缩放进行自适应填充的方法——使用布局、Spacer等控件_qt界面随窗口比例缩放

  首先，我们在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生成的界面将可以跟随窗口的缩放来自动进行缩放，如下图所示（依次为初始、缩小、放大界面的结果）：