一文读懂qt界面设计（分裂器，布局，拉伸，各种属性设置）

可以先看看我这个文章：qt关于界面设计中的一些知识总结_我是标同学的博客-CSDN博客_qt 水平伸展

现在我们来正式开始讲解。

布局种类

qt中能称为布局管理器的有如下6个：

1. 水平布局（QHBoxLayout）
2. 垂直布局（QVBoxLayout）
3. 表单布局（QFormLayout）：其实就是只有两列的网格布局而已。
4. 网格布局（QGridLayout）：类似一个表格，多行多列，能自动对齐，挺好用的。
5. 栈布局（QStackLayout）：设计师界面无法直接产生出来，需要用代码创建出来。Qt QStackedLayout布局用法详解
6. 分裂器布局（QSplitter，这个不是继承自QLayout类，而是QWiget类，可以设置为水平的 或者 垂直的）：分裂器是用于两个窗口的分割拖拽的，很有用的。

 

网上已经有大量的博客讲这些了，我就不重复说明了，挑选了一些讲得不错的博客，可以看看：

• Qt——布局_zhangchuan7758的博客-CSDN博客_qt 布局 （这个博客讲了前面5种布局的基本知识）
• QT入门之布局 水平布局、垂直布局、表单布局、网格布局_蜜汁坤丝的博客-CSDN博客_qt布局 （这个博客讲了前4种布局的基本知识，用代码如何实现）

布局的用法

我一般喜欢 界面设计 和 代码逻辑 分离的开发方式，这样软件设计效果更清晰，所以界面设计当然就是尽量通过qt designer（qt界面设计师）来实现了（当然通过代码一定也能实现这个功能的，因为设计师就是将界面xml转为了c++代码）。

除了栈布局（QStackLayout）无法在界面直接产生外，其它5种都是可以的，所以本文讲解设计师界面如果使用这些布局。规划的时候最好遵循"先局部后整体"，先把局部布局给完成，然后再把局部布局嵌入到其它的布局当中，更容易达到我们想要的效果

方式1

布局管理器是可以这样的，先拖拽几个控件出来，然后选中它们，再选择一个设计师工具栏的布局器就能联合起来形成这个布局了，如下图所示。我们可以看到是形成的一个单独的QVBoxLayout对象，也就是说这个对象和QWidget类似，也是个容器，可以容纳子控件的。

    

方式2

先拖入一个QWiget，然后拖两个按钮进去，再选中这个QWiget，给它选择一个布局器即可。我们可以看到是这个widget具有了QVBoxLayout的属性（应该时widget多继承了它），此时这个widget自己仍然直接作为父控件的，容纳了两个按钮子控件的。而且这个布局效果是没有那个红色的边框线的。（注意：这个方式2和方式1产生的布局器，再拖到一个widget中，产生出的效果是不一样的，因为相当于这个widget添加了一个子控件而已，这里的子控件就是QVBoxLayout对象）

 

此时，对这个widget的布局器的设置就是在自己的属性编辑视图中了，如下图：

各属性参数解释：

• layoutXXmargin：表示设置该布局器中的 子控件 距离 父控件边框 的上下左右距离，默认是有点大的，我们可以设小一点，使得空间利用更紧凑一些。
• layoutSpacing：表示子控件它们之间的距离，也可以自己设一下。
• layoutStretch：设置里面子控件它们的宽度或者高度显示比例。注意如果无效，我们需要都设为非0值，就有效了。 QT中layoutstretch属性简析_Geek.Fan的博客-CSDN博客_layoutrowstretch
• layoutSizeConstraint：布局器的尺寸约束，比如被压缩或拉伸时候，控制尺寸的策略是怎样的，这个跟QWidget的sizePolicy属性是一个意思，比如固定的，扩展的，等等。

 方式3

我们也可以按照方式1产生的布局器，选中它，然后右键变形为QWidget，就变成了方式2产生的结果了。

总结

用方式2最好。因为方式产生的是widget作为容纳控件，这个就有widget的各种属性可以设置了，就能非常灵活，但是方式1产生的是布局器作为容纳控件，其属性就那么几个。

关于分裂器布局QSplitter的用法

这个不能直接拖拽出来，而是方式1那样，选中要分裂的多个控件，再选择分裂器布局即可。

主要就如下几个属性设置：

• orientation：控制分裂器的分割方向
• opaqueResize：拖拽时候是否动态显示效果
• handleWidth：拖拽手柄的宽度
• childrenCollapsible：被分割的控件是否可以分割为0，也就是完全收起来了。

 如何调整被分割子控件之间的初始比例？？？网上很多博客是用代码实现，即setStretchFactor函数，其实不需要的。这些子控件，只要是继承自QWiget的，都有 水平伸展 垂直伸展 策略即sizePolicy的，只要给这些子控件设置这个参数值为非零值，就能按照比例进行产生效果了（注意，需要运行才能看到效果，或者菜单栏选择预览功能也行，快捷键shift+alt+r）。所以这就是为什么我推荐上面用方式2布局的原因，因为方式2得到的是QWidget，所以如果作为QSpliter的子控件，就可以设置这个值了，如果是方式1得到的QVBoxLayout对象，就没有这个值可设，当然网上有人说此情况下通过代码也可以设置，大家可以试试 QTQSplitter设置初始比例setStretchFactor失效解决 - 百度文库。

这个文章讲得不错，可以看看： 【Qt开发】QSplitter的使用和设置 - ZhangPYi - 博客园

关于布局中子控件的属性设置

当 一个控件（继承自QWiget）进入了布局器中了（父控件），那么这个widget的尺寸参数，就变得很有作用了。这些参数如下：

• geometry：控件的几何尺寸，不再能自己控制了（自己不能编辑了），而是服从布局器来控制了
• sizePolicy：这个很重要，父控件发生压缩或者拉伸的时候，控制本控件的变化效果的（这个参数会跟布父控件中的兄弟控件进行比较的）。比如是Expanding，那么拉伸时候，自己就会同样被拉伸，如果是Preferred，就是自适应，比如兄弟控件的属性都是Fixed，那么它就能得到拉伸，如果别人都是Expanding，那么就拉伸不过别人了
• minimumSize：自己被压缩时候可以达到的最小尺寸。比如一个按钮，压缩得太小，内容就看不完全了，就不好，所以就可以限定一下这个值喔。如果不起效果，可以设为非0值（就可以无限缩小了），和maximumSize设一样的值试试 等等方法。因为这个也比较复杂，自己多试试。
• maximumSize：自己被拉伸时候可以达到的最大尺寸
• sizeIncrement：表示控件调整大小时的每次变化的增量大小
• baseSize：属性是组件的基础大小？？？啥作用，没搞懂，知道的评论区告诉我一下

可以看看这两篇文章：Qt布局管理(1)：部件拉伸原理及大小策略(sizePolicy)_hyongilfmmm的博客-CSDN博客_qt sizepolicy 

Qt 第6章 布局管理(1) 在窗体中摆放窗口部件 学习笔记_liushui9的博客-CSDN博客_qt 在窗体布局中布局

控件所有属性的作用 可以参考博客：

Python Qt GUI设计：UI界面可视化组件、属性概述（基础篇—4）_不脱发的程序猿的博客-CSDN博客_python qt界面