【Qt】Qt Creator中布局器详解

素颜马尾好姑娘i 2022-11-15 01:21 16阅读 0赞

## 00. 目录 ##

### 文章目录 ###

*   *  00. 目录
     *  01. 概述
     *  02. 开发环境
     *  03. 布局器概述
     *  04. 布局属性设置
     *  05. 弹簧条属性和作用
     *  06. 附录

## 01. 概述 ##

关于 Qt 布局管理，有专门的帮助文档页面`Layout Management`。本章的主要内容就是介绍布局管理的知识，Qt 设计师里面不仅有布局器的控件可以拖动使用，还可以在窗体里面选择控件，然后点击设计师上面的工具按钮自动添加布局器。本节首先大致介绍一下 Qt 设计师里面关于布局器的操作界面。

Qt 的窗口主要内容包括: 布局的样式 , 基于UI界面设置布局 , 基于API设置布局。

Qt 窗口布局是指将多个子窗口按照某种排列方式将其全部展示到对应的父窗口中的一种处理方式。在 Qt 中常用的布局样式有三种，分别是：

![在这里插入图片描述][202103301642394.png]

## 02. 开发环境 ##

**Windows系统**：Windows10

**Qt版本**：Qt5.15或者Qt6

## 03. 布局器概述 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdqaW4yMDEwNDA0MjA1Ng_size_16_color_FFFFFF_t_70]

在设计师和QtCreator中左边列表，可以看到 Layouts 栏目里有四个布局器：  
◆ 垂直布局器 QVBoxLayout：将内部的控件按照垂直方向排布，一行一个。  
◆ 水平布局器 QHBoxLayout：将内部的控件按照水平方向排布，一列一个。  
◆ 网格布局器 QGridLayout：按照多行、多列的网格排布内部控件，单个控件可以占一个格子或者占据连续多个格子。  
◆ 表单布局器 QFormLayout：Qt 设计师里把这个布局器称为窗体布局器，窗体布局器这个叫法不准。这个布局器就是对应网页设计的表单，通常用于接收用户输入。该布局器就如它的图标一样，就是固定的两列控 件，第一列通常是标签，第二列是输入控件或含有输入控件的布局器。  
◆ Qt 另外还有一个堆栈布局器 QStackedLayout，通常用于容纳多个子窗口布局，每次只显示其中一个。这个布局器隐含在堆栈部件 QStackedWidget 内部，一般直接用 QStackedWidget 就行了，不需要专门设置堆栈布局器。堆栈部件和堆栈布局器留到后面容器类控件的 章节讲解。

与布局紧密关联的是两个空白条（或叫弹簧条）：Horizontal Spacer 水平空白条和 Vertical Spacer 垂直空白条，空白条的作用就是填充无用的空隙，如果不希望看到控件拉伸后变丑，就可以塞一个空白条到布局器里面，布局器通常会优先拉伸空白条。两种空白条的类名都是 QSpacerItem，两种空白条只是默认的拉伸方向不一样。

对界面进行布局有两种方式，**第一种方式**是预先设计好整体布局，先拖入布局器，后拖入功能控件到布局器里面，这种方式不太方便，因为脑海里得提前做好布局规划。**第二 种方式**才是是最常用的，先把所有功能控件拖入主界面，然后根据设置好的功能控件来决定如何进行布局。Qt 的布局器中既可以添加普通功能控件，也可以添加其他布局器，所以布局器的使用是非常灵活的。界面里的控件，可以先按行排列布局，再按列排列布局；或者反过来，先排好列，再 排好行；当然也可以直接用网格布局器或表单布局器。可以按实际控件的关系和用户喜好进行布局。

Qt 设计师和Qt Creator左边列的四个布局器，其实不是经常需要拖动它们到主界面，更为常见的操作是选中控件，然后点击设计师上面布局工具栏里的快捷按钮实现布局，这些快捷按钮的功能更丰 富，也更常用。布局工具栏有 8 个按钮，下面依次介绍：  
① 将选中控件添加到水平布局器排列。  
② 将选中控件添加到垂直布局器排列。  
③ 将选中控件添加到水平分裂器排列。  
④ 将选中控件添加到垂直分裂器排列。  
⑤ 将选中控件添加到网格布局器排布，行列的数目不限。  
⑥ 将选中控件添加到表单布局器排布，该布局器固定为两列控件。  
⑦ 打破布局，即保留布局器内部的控件和子布局，消除当前选中的布局器。  
⑧ 根据需要显示的内容，自动调整控件或窗体的尺寸，相当于调用一次 adjustSize() 函数。

**【温馨提示】**

> 这里需要说明一下，布局器和空白条的基类其实都是 QLayoutItem，布局器仅用于辅助功能，帮助自动调整窗口里的控件布局，并不是实体控件，没有 show() 之类的显示函数，不能单独存在，必须要有实体控件才能设置布局器。  
> 我们之前介绍的都是实体控件，基类都是 QWidget ，都可以单独存在，有 show() 之类的显示函数。  
> 分裂器具有布局功能，但分裂器的基类是 QFrame，分裂器是一个实体控件，分裂器不同于布局器。

## 04. 布局属性设置 ##

当我们给窗口设置了布局之后，选中当前窗口，就可以看到在其对应的属性窗口中除了有窗口属性，还有一个布局属性，下面给大家介绍一下这些属性:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdqaW4yMDEwNDA0MjA1Ng_size_16_color_FFFFFF_t_70 1]

通过设置布局上下左右的边距，或者是控件之间的距离也可以使界面看起来更加美观。

## 05. 弹簧条属性和作用 ##

在进行窗口布局的时候为了让界面看起来更加美观，需要调整控件的位置，比如：靠左，靠右，居中，又或者我们需要调节两个控件之间的距离，以上这些需求使用弹簧都是可以实现的。

关于弹簧的 sizeType 属性，有很多选项，一般常用的只有两个:

*  Fixed: 得到一个固定大小的弹簧
 *  Expanding: 得到一个可伸缩的弹簧，默认弹簧撑到最大

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdqaW4yMDEwNDA0MjA1Ng_size_16_color_FFFFFF_t_70 2]

## 06. 附录 ##

**6.1 Qt教程汇总**  
网址：[https://dengjin.blog.csdn.net/article/details/115174639][https_dengjin.blog.csdn.net_article_details_115174639]

[202103301642394.png]: /images/20221022/10c63456fc2b4253b61e9f9483f2cc27.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdqaW4yMDEwNDA0MjA1Ng_size_16_color_FFFFFF_t_70]: /images/20221022/f9d8d987afd340ea85e37b9793b896c6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdqaW4yMDEwNDA0MjA1Ng_size_16_color_FFFFFF_t_70 1]: /images/20221022/143f518687bf4208ae854e5899655f1e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RlbmdqaW4yMDEwNDA0MjA1Ng_size_16_color_FFFFFF_t_70 2]: /images/20221022/5ae41d30fc3c4625b3884d2ce593e427.png
[https_dengjin.blog.csdn.net_article_details_115174639]: https://dengjin.blog.csdn.net/article/details/115174639