Qt控件空间间隔组(Spacers)[Horizontal Spacer:水平间隔|Vertical Spacer:垂直间隔]
# 空间间隔
空间间隔组（Spacers），如下图所示
（1） Horizontal Spacer:水平间隔
（2） Vertical Spacer:垂直间隔
QLayoutItem 的子类 QSpacerItem 在布局管理器中被定义为提供空间间隔。
该类通过机制实现对图形界面中的空隙进行管理。
由此可见，在界面设计时会频繁使用该组件。
其中主要涉及两种类型：水平方向上的间距和垂直方向上的间距。
# QSpacerItem
## 控件简介
QSpacerItem 是 QLayoutItem 的继承类。该类在布局过程中提供必要的空间间隔。因此，在布局设计中会使用此特性。
## 用法示例
例如 qspaceritem（难度：一般），间距设置需要配置包含四个按钮。首先，在垂直方向上添加垂直间距和按钮1；接着，在水平方向上放置按钮2至4以及水平间距。为了便于理解操作流程, 我们采用了简洁明了的方式演示该间距设置的运用。通过程序运行结果分析该间距设置的效果
避免在创建新实例时勾选"Generate form"选项，默认会直接继承QMainWindow类无需额外设置。项目新建已完成，请参考下图。
在头文件“mainwindow.h”具体代码如下。
// mainwindow.h 编程后的代码1 #ifndef MAINWINDOW_H2 #define MAINWINDOW_H4 #include <QMainWindow>5 #include <QPushButton>6 #include <QSpacerItem>7 #include <QBoxLayout>89 class MainWindow : public QMainWindow10 {11 Q_OBJECT1213 public:14 MainWindow(QWidget *parent = nullptr);15 ~MainWindow();1617 private:18 /* 按钮对象数组 */19 QPushButton *bt[4];20 /* 垂直间隔 */21 QSpacerItem *vSpacer;22 /* 水平间隔 */23 QSpacerItem *hSpacer;24 /* 声明一个 widget 用来存放布局的内容 */25 QWidget *widget;26 /* 主布局对象 */27 QHBoxLayout *mainLayout;28 /* 垂直布局对象 */29 QVBoxLayout *vBoxLayout;30 /* 水平布局对象 */31 QHBoxLayout *hBoxLayout;3233 };34 #endif // MAINWINDOW_H
AI助手在源文件“mainwindow.cpp”具体代码如下。
部分代码解释：
hSpacer被生成为QSpacerItem类的一个实例，在Qt框架下实现了一个横向的填充空间（spacer）。该填充空间能够占据指定宽度，并根据设定策略动态调整高度。
在该代码中, QSpacerItem 的构造函数用于获取四个参数: 宽度, 高度, 以及分别在水平方向上使用和垂直方向上使用的两个 QSizePolicy.
10 是指定的空白空间的宽度为 10 个逻辑像素。
10 是指定的空白空间的高度为 10 个逻辑像素。
QSizePolicy::Expanding 是指定了一个横向的QSizePolicy配置项，在该配置下允许空白区域在水平方向上延伸以最大限度地利用可用空间。
QSizePolicy::Minimum 定义了一个垂直方向上的 QSizePolicy 实例，并规定其值为最小。
通过向布局中加入这个空白空间，则可以在水平方向上实现一个可伸缩的空白区域，并用于调整布局中其他组件的位置和大小。
vBoxLayout->addSpacerItem(vSpacer); 通过 Qt 框架中的 QVBoxLayout 实现垂直方向的空间填充。
在这个代码段中，变量名为vBoxLayout的对象属于QVBoxLayout类，并用于表示垂直方向的空间布局安排。另一个变量名为vSpacer的组件属于QSpacerItem类范畴。该组件常见于使用诸如新实例化的方式构造其具体属性配置。
通过调用函数 addSpacerItem() ，我们将其添加至 vBoxLayout 中。进而使得我们在布局中创建了一个垂直方向上的空白区域。这个空白区域则可进一步用于调节布局中其他组件的位置与尺寸。
mainLayout->setSpacing(50); 属于 Qt 框架提供的布局管理器类的方法，在该语句中使用了它来配置组件之间在水平方向上的间距。
在该代码中, mainLayout 是一个布局对象, 包括QVBoxLayout、QHBoxLayout或其他Qt布局类实例. 通过调用setSpacing方法并输入一个参数, 可以设定布局中组件之间的间距.
在本系统中，在配置界面中，“布局”选项卡下新增了一个间距控制功能，在此功能中，“50”具体说明其作用如下：即表示为组件之间的布局空间设定一个固定数值的间隔距离，默认单位为逻辑像素（logical pixels），即表示该数值直接决定了两个相邻组件之间的最小分隔距离。
这个方法可用于控制布局中部件之间的间距大小，并从而实现合适的布局效果。
// mainwindow.cpp 编程后的代码1 #include "mainwindow.h"23 MainWindow::MainWindow(QWidget *parent)4 : QMainWindow(parent)5 {6 /* 设置主窗体显示位置与大小 */7 this->setGeometry(0, 0, 800, 480);89 widget = new QWidget(this);10 /* 居中 widget */11 this->setCentralWidget(widget);1213 /* 实例化对象 */14 vSpacer = new QSpacerItem(10, 10,15 QSizePolicy::Minimum,16 QSizePolicy::Expanding17 );18 hSpacer = new QSpacerItem(10, 10,19 QSizePolicy::Expanding,20 QSizePolicy::Minimum21 );2223 vBoxLayout = new QVBoxLayout();24 hBoxLayout = new QHBoxLayout();25 mainLayout = new QHBoxLayout();2627 /* 在 vBoxLayout 添加垂直间隔 */28 vBoxLayout->addSpacerItem(vSpacer);2930 QList <QString>list;31 /* 将字符串值插入 list */32 list<<"按钮 1"<<"按钮 2"<<"按钮 3"<<"按钮 4";33 /* 用一个循环实例化 4 个按钮 */34 for(int i = 0; i < 4 ; i++){35 bt[i] = new QPushButton();36 bt[i]->setText(list[i]);37 if (i == 0){38 /* 按钮 1,设置为 100*100 */39 bt[i]->setFixedSize(100, 100);40 /* 在 vBoxLayout 添加按钮 1 */41 vBoxLayout->addWidget(bt[i]);42 } else {43 /* 按钮 2～4,设置为 60*60 */44 bt[i]->setFixedSize(60, 60);45 /* 在 hBoxLayout 添加按钮 2～4 */46 hBoxLayout->addWidget(bt[i]);47 }48 }49 /* 在 hBoxLayout 添加水平间隔 */50 hBoxLayout->addSpacerItem(hSpacer);5152 /* 在主布局里添加垂直布局 */53 mainLayout->addLayout(vBoxLayout);54 /* 在主布局里添加水平布局 */55 mainLayout->addLayout(hBoxLayout);5657 /* 设置部件间距 */58 mainLayout->setSpacing(50);59 /* 将主布局设置为 widget 的布局 */60 widget->setLayout(mainLayout);6162 }6364 MainWindow::~MainWindow()65 {66 }
AI助手在源文件“main.cpp”具体代码如下。由新建项目时生成，无改动。
// main.cpp 编程后的代码1 #include "mainwindow.h"23 #include <QApplication>45 int main(int argc, char *argv[])6 {7 QApplication a(argc, argv);8 MainWindow w;9 w.show();10 return a.exec();11 }
AI助手## 运行效果
编译运行后的结果如下，在垂直布局中加入了垂直间距和按钮1。此外，在水平布局中放置了按钮2至4号以及水平间距。
图解如下：
