一文读懂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类似,也是个容器,可以容纳子控件的。

一文读懂qt界面设计(分裂器,布局,拉伸,各种属性设置)_第1张图片    一文读懂qt界面设计(分裂器,布局,拉伸,各种属性设置)_第2张图片

方式2

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

 一文读懂qt界面设计(分裂器,布局,拉伸,各种属性设置)_第3张图片

一文读懂qt界面设计(分裂器,布局,拉伸,各种属性设置)_第4张图片

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

一文读懂qt界面设计(分裂器,布局,拉伸,各种属性设置)_第5张图片

各属性参数解释:

  • 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,也就是完全收起来了。

一文读懂qt界面设计(分裂器,布局,拉伸,各种属性设置)_第6张图片

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

一文读懂qt界面设计(分裂器,布局,拉伸,各种属性设置)_第7张图片

这个文章讲得不错,可以看看: 【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 在窗体布局中布局

一文读懂qt界面设计(分裂器,布局,拉伸,各种属性设置)_第8张图片

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

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

你可能感兴趣的:(IDE开发,qt,qt,开发语言,qt布局管理器)