Qt入门5——常用控件3
目录
1. 多元素控件
1.1 List Widget
1.2 Table Widget
1.3 Tree Widget
2. 容器类控件
2.1 Group Box
2.2 Tab Widget
3.布局管理器
3.1垂直布局
3.2 水平布局
3.3 网格布局
3.4 表单布局
3.5 Spacer
1. 多元素控件
1.1 List Widget
使用QListWidget 能够显示⼀个纵向的列表。
| 属性 | 说明 |
| currentRow | 当前被选中的是第几行 |
| count | ⼀共有多少行 |
| sortingEnabled | 是否允许排序 |
| isWrapping | 是否允许换⾏ |
| itemAlignment | 元素的对⻬⽅式 |
| selectRectVisible | 被选中的元素矩形是否可⻅ |
| spacing | 元素之间的间隔 |
核心方法：
| 方法 | 说明 |
| addItem(constQString&label) addItem(QListWidgetItem*item) | 列表中添加元素 |
| currentItem() | 返回QListWidgetItem*表⽰当前选中的元素 |
| setCurrentItem(QListWidgetItem*item) | 设置选中哪个元素 |
| setCurrentRow(int row) | 设置选中第几行的元素 |
| insertItem(constQString&label,int row) insertItem(QListWidgetItem*item,int row) | 在指定的位置插入元素 |
| item(int row) | 返回QListWidgetItem*表示第row⾏的元素 |
| takeItem(int row) | 删除指定⾏的元素,返回QListWidgetItem*表示是哪个元素被删除了 |
核心信号：
| 信号 | 说明 |
| currentItemChanged(QListWidgetItem* current, QListWidgetItem*old) | 选中不同元素时会触发，参数是当前选中的元素和之前选中的元素 |
| currentRowChanged(int) | 选中不同元素时会触发，参数是当前选中元素的行数 |
| itemClicked(QListWidgetItem*item) | 点击某个元素时触发 |
| itemDoubleClicked(QListWidgetItem* item) | 双击某个元素时触发 |
| itemEntered(QListWidgetItem*item) | ⿏标进⼊元素时触发 |
示例：
1.在界面上创建如图控件：
2.构造函数初始化QListWidget
Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);// 初始化QListWidgetui->listWidget->addItem("C++");ui->listWidget->addItem("Java");ui->listWidget->addItem("Python");//在QListWidgetItem中，可以设置字体属性，设置图标，设置文字大小，设置是否被选中等状态
// ui->listWidget->addItem(new QListWidgetItem("C++"));
// ui->listWidget->addItem(new QListWidgetItem("Java"));
// ui->listWidget->addItem(new QListWidgetItem("Python"));
}3.设置三个槽函数：
void Widget::on_pushButton_add_clicked()
{// 1. 先获取到输入框中的内容const QString& text = ui->lineEdit->text();// 2. 添加到QListWidget 中ui->listWidget->addItem(text);
}void Widget::on_pushButton_sub_clicked()
{//1.先获取到选中的元素int row = ui->listWidget->currentRow();if(row < 0){return;}//2.按照行号来删除ui->listWidget->takeItem(row);
}void Widget::on_listWidget_currentItemChanged(QListWidgetItem *current, QListWidgetItem *previous)
{//通过这个槽函数来感知变化if(current != nullptr){ui->label->setText("当前选中：" + current->text());}if(previous != nullptr){ui->label_2->setText("上次选中：" + previous->text());}
}效果如图：
1.2 Table Widget
使用 QTableWidget 表示⼀个表格控件，⼀个表格中包含若干行,每一行又包含若干列。
核心方法：
| 方法 | 说明 |
| item(int row, int column) | 根据⾏数列数获取指定的QTableWidgetItem* |
| setItem(int row, int column, QTableWidget*) | 根据行数列数设置表格中的元素 |
| currentItem() | 返回被选中的元素QTableWidgetItem* |
| currentRow() | 返回被选中元素是第几行 |
| currentColumn() | 返回被选中元素是第⼏列 |
| row(QTableWidgetItem*) | 获取指定item是第⼏⾏ |
| column(QTableWidgetItem*) | 获取指定item是第⼏列 |
| rowCount() | 获取⾏数 |
| columnCount() | 获取列数 |
| insertRow(int row) | 在第row行处插入新行 |
| insertColumn(int column) | 在第column列插⼊新列 |
| removeRow(int row) | 删除第row⾏ |
| removeColumn(int column) | 删除第column列 |
| setHorizontalHeaderItem(int column,QTableWidget*) | 设置指定列的表头 |
| setVerticalHeaderItem(introw, QTableWidget*) | 设置指定⾏的表头 |
QTableWidgetItem 核心信号：
| 信号 | 说明 |
| cellClicked(int row,int column) | 点击单元格时触发 |
| cellDoubleClicked(int row,int column) | 双击单元格时触发 |
| cellEntered(int row,int column) | ⿏标进⼊单元格时触发 |
| currentCellChanged(introw,int column,intpreviousRow,int previousColumn) | 选中不同单元格时触发 |
QTableWidgetItem 核心方法：
| 方法 | 说明 |
| row() | 获取当前是第几行 |
| column() | 获取当前是第几列 |
| setText(const QString&) | 设置⽂本 |
| setTextAlignment(int) | 设置⽂本对⻬ |
| setIcon(const QIcon&) | 设置图标 |
| setSelected(bool) | 设置被选中 |
| setSizeHints(const QSize&) | 设置尺⼨ |
| setFont(const QFont&) | 设置字体 |
示例：
1.在界面设置相关控件：
2. 编写widget.cpp构造函数,构造表格中的初始数据
Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);//创建3行ui->tableWidget->insertRow(0);ui->tableWidget->insertRow(1);ui->tableWidget->insertRow(2);//创建3列ui->tableWidget->insertColumn(0);ui->tableWidget->insertColumn(1);ui->tableWidget->insertColumn(2);//给3个列设置列名(设置水平方向表头)ui->tableWidget->setHorizontalHeaderItem(0, new QTableWidgetItem("学号"));ui->tableWidget->setHorizontalHeaderItem(1, new QTableWidgetItem("姓名"));ui->tableWidget->setHorizontalHeaderItem(2, new QTableWidgetItem("年龄"));//给表格中添加数据ui->tableWidget->setItem(0,0,new QTableWidgetItem("1001"));ui->tableWidget->setItem(0,1,new QTableWidgetItem("张三"));ui->tableWidget->setItem(0,2,new QTableWidgetItem("19"));ui->tableWidget->setItem(1,0,new QTableWidgetItem("1002"));ui->tableWidget->setItem(1,1,new QTableWidgetItem("李四"));ui->tableWidget->setItem(1,2,new QTableWidgetItem("20"));ui->tableWidget->setItem(2,0,new QTableWidgetItem("1003"));ui->tableWidget->setItem(2,1,new QTableWidgetItem("王五"));ui->tableWidget->setItem(2,2,new QTableWidgetItem("22"));//给QLineEdit设置相关属性ui->lineEdit->setPlaceholderText("在此输入列名");ui->lineEdit->setClearButtonEnabled(true);
}3.设置相应槽函数：
void Widget::on_pushButton_insertRow_clicked()
{//需要知道当前一共有多少行int rowCount = ui->tableWidget->rowCount();//在这一行之后新增行//注意此处的参数是“下标”，表示新增之后的这一行是第几行ui->tableWidget->insertRow(rowCount);
}void Widget::on_pushButton_deleteRow_clicked()
{//获取选中的行号int curRow = ui->tableWidget->currentRow();//删除这一行ui->tableWidget->removeRow(curRow);
}void Widget::on_pushButton_insertColumn_clicked()
{//先获取到一共有几列int colCount = ui->tableWidget->columnCount();//在对应的位置新增这一列ui->tableWidget->insertColumn(colCount);//设置列名(从输入框中获取)const QString& text = ui->lineEdit->text();ui->tableWidget->setHorizontalHeaderItem(colCount,new QTableWidgetItem(text));
}void Widget::on_pushButton_deleteColumn_clicked()
{//获取选中的列号int curColumn = ui->tableWidget->currentColumn();//删除这一列ui->tableWidget->removeColumn(curColumn);
}效果如图：
1.3 Tree Widget
使用 QTreeWidget 表示⼀个树形控件，里面的每个元素,都是⼀个 QTreeWidgetItem ,每个 QTreeWidgetItem 可以包含多个文本和图标,每个文本/图标为⼀个列；
可以给 QTreeWidget 设置顶层节点(顶层节点可以有多个),然后再给顶层节点添加子节点,从而构成 树形结构。
核心方法：
| 方法 | 说明 |
| clear | 清空所有子节点 |
| addTopLevelItem(QTreeWidgetItem*item) | 新增顶层节点 |
| topLevelItem(intindex) | 获取指定下标的顶层节点 |
| topLevelItemCount() | 获取顶层节点个数 |
| indexOfTopLevelItem(QTreeWidgetItem* item) | 查询指定节点是顶层节点中的下标 |
| takeTopLevelItem(int index) | 删除指定的顶层节点，返回QTreeWidgetItem*表示被删除的元素 |
| currentItem() | 获取到当前选中的节点,返回QTreeWidgetItem* |
| setCurrentItem(QTreeWidgetItem*item) | 选中指定节点 |
| setExpanded(bool) | 展开/关闭节点 |
| setHeaderLabel(constQString&text) | 设置TreeWidget的header名称 |
QTreeWidget核心信号：
| 信号 | 说明 |
| currentItemChanged(QTreeWidgetItem* current,QTreeWidgetItem*old) | 切换选中元素时触发 |
| itemClicked(QTreeWidgetItem* item,int col) | 点击元素时触发 |
| itemDoubleClicked(QTreeWidgetItem* item, int col) | 双击元素时触发 |
| itemEntered(QTreeWidgetItem* item,int col) | ⿏标进⼊时触发 |
| itemExpanded(QTreeWidgetItem* item) | 元素被展开时触发 |
| itemCollapsend(QTreeWidgetItem* item) | 元素被折叠时触发 |
QTreeWidgetItem 核心属性：
| 属性 | 说明 |
| text | 持有的文本 |
| textAlignment | ⽂本对齐方式 |
| icon | 持有的图表 |
| font | ⽂本字体 |
| hidden | 是否隐藏 |
| disabled | 是否禁用 |
| expand | 是否展开 |
| sizeHint | 尺寸大小 |
| selected | 是否选中 |
QTreeWidgetItem 核心方法：
| 方法 | 说明 |
| addChild(QTreeWidgetItem* child) | 新增⼦节点 |
| childCount() | ⼦节点的个数 |
| child(int index) | 获取指定下标的⼦节点，返回QTreeWidgetItem* |
| takeChild(int index) | 删除对应下标的⼦节点 |
| removeChild(QTreeWidgetItem* child) | 删除对应的⼦节点 |
| parent() | 获取该元素的⽗节点 |
示例：
1.在界面添加控件：
2.编写代码,构造初始数据
Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);// 设置根节点名称ui->treeWidget->setHeaderLabel("动物");//新增顶层节点QTreeWidgetItem* item1 = new QTreeWidgetItem();// 每个节点都可以设置多个列,此处为了简单只设置一列item1->setText(0,"狗");//添加到顶层节点中ui->treeWidget->addTopLevelItem(item1);//新增顶层节点QTreeWidgetItem* item2 = new QTreeWidgetItem();// 每个节点都可以设置多个列,此处为了简单只设置一列item2->setText(0,"猫");//添加到顶层节点中ui->treeWidget->addTopLevelItem(item2);//新增顶层节点QTreeWidgetItem* item3 = new QTreeWidgetItem();// 每个节点都可以设置多个列,此处为了简单只设置一列item3->setText(0,"鱼");//添加到顶层节点中ui->treeWidget->addTopLevelItem(item3);//添加一些子节点QTreeWidgetItem* item4 = new QTreeWidgetItem();item4->setText(0,"中华田园犬");item1->addChild(item4);QTreeWidgetItem* item5 = new QTreeWidgetItem();item5->setText(0,"拉布拉多");item1->addChild(item5);QTreeWidgetItem* item6 = new QTreeWidgetItem();item6->setText(0,"哈士奇");item1->addChild(item6);}3.编写槽函数
void Widget::on_pushButton_insertTopLevelItem_clicked()
{//获取到输入框的内容const QString& text = ui->lineEdit->text();//构造一个QTreeWidgetItemQTreeWidgetItem* item = new QTreeWidgetItem();item->setText(0,text);//添加到顶层节点中ui->treeWidget->addTopLevelItem(item);
}void Widget::on_pushButton_insertItem_clicked()
{//获取当前选中的节点QTreeWidgetItem* currentItem = ui->treeWidget->currentItem();if(currentItem == nullptr){return;}//获取到输入框的内容const QString& text = ui->lineEdit->text();//构造一个QTreeWidgetItemQTreeWidgetItem* item = new QTreeWidgetItem();item->setText(0,text);//插入到选中节点的子节点中currentItem->addChild(item);
}void Widget::on_pushButton_deleteItem_clicked()
{//获取到选中的元素QTreeWidgetItem* currentItem = ui->treeWidget->currentItem();if(currentItem == nullptr){return;}//删除选中的元素，需要先获取到父元素，通过父元素删除QTreeWidgetItem* parent = currentItem->parent();if(parent == nullptr){//顶层元素int index = ui->treeWidget->indexOfTopLevelItem(currentItem);ui->treeWidget->takeTopLevelItem(index);}else{//普通元素parent->removeChild(currentItem);}
}
效果如图：
2. 容器类控件
2.1 Group Box
使用 QGroupBox 实现⼀个带有标题的分组框，可以把其他的控件放到里面作为⼀组，这样看起来能更美观一些。
| 属性 | 说明 |
| title | 分组框的标题 |
| alignment | 分组框内部内容的对齐方式 |
| flat | 是否是"扁平"模式 |
| checkable | 是否可选择 设为true,则在title前方会多出⼀个可勾选的部分 |
| checked | 描述分组框的选择状态(前提是checkable为true) |
示例：给点餐界面加上分组框
2.2 Tab Widget
使用QTabWidget 实现⼀个带有标签页的控件,可以往里面添加⼀些widget，进⼀步的就可以通过标签页来切换。
| 属性 | 说明 |
| tabPosition | 标签页所在的位置 North 上方 South 下方 West 左侧 East 右侧 |
| currentIndex | 当前选中了第几个标签页(从0开始计算) |
| currentTabText | 当前选中的标签页的⽂本 |
| currentTabName | 当前选中的标签页的名字 |
| currentTabIcon | 当前选中的标签页的图标 |
| currentTabToolTip | 当前选中的标签页的提示信息 |
| tabsCloseable | 标签页是否可以关闭 |
| movable | 标签页是否可以移动 |
核心信号：
| 信号 | 说明 |
| currentChanged(int) | 在标签页发⽣切换时触发,参数为被点击的选项卡编号 |
| tabBarClicked(int) | 在点击选项卡的标签条的时候触发，参数为被点击的选项卡编号. |
| tabBarDoubleClicked(int) | 在双击选项卡的标签条的时候触发，参数为被点击的选项卡编号 |
| tabCloseRequest(int) | 在标签页关闭时触发，参数为被关闭的选项卡编号 |
示例：
1.图形化界面设置控件：
2.在构造函数初始化标签页
Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);//先在每个标签页中分别添加一个labelQLabel* label1 = new QLabel(ui->tab);label1->setText("标签页1");label1->resize(100,50);QLabel* label2 = new QLabel(ui->tab_2);label2->setText("标签页2");label2->resize(100,50);
}3.编写相应槽函数
void Widget::on_pushButton_clicked()
{//使用addTab方法创建新的标签页//参数1 要指定一个QWidget//参数2 指定这个标签页的 text（标题），此处标题就叫做Tab+数字int count = ui->tabWidget->count(); //获取到标签页的数量QWidget* w = new QWidget();ui->tabWidget->addTab(w,QString("Tab") + QString::number(count + 1));//添加一个Qlabel显示内容QLabel* label = new QLabel(w);label->setText(QString("标签页 ") + QString::number(count + 1));label->resize(100,50);//设置新标签页被选中ui->tabWidget->setCurrentIndex(count);
}void Widget::on_pushButton_2_clicked()
{//获取到当前选中的标签页的下标int index = ui->tabWidget->currentIndex();//删除标签页ui->tabWidget->removeTab(index);
}void Widget::on_tabWidget_currentChanged(int index)
{ui->label->setText("当前页：" + QString::number(index + 1));
}
效果如图：
3.布局管理器
之前把控件放到界面上，都是靠“手动”的方式来布局的。
这种手动调整的方式其实是非常不科学的，一是因为手动布局的方式非常复杂，并且不准确；二是因为其无法对窗口大小进行自适应。
针对这种情况，布局管理器就派上用场了。
3.1垂直布局
使用 QVBoxLayout 表示垂直的布局管理器，V是vertical 的缩写。
| 属性 | 说明 |
| layoutLeftMargin | 左侧边距 |
| layoutRightMargin | 右侧边距 |
| layoutTopMargin | 上⽅边距 |
| layoutBottomMargin | 下⽅边距 |
| layoutSpacing | 相邻元素之间的间距 |
（Layout 只是用于界面布局,并没有提供信号）
示例1：
构造函数编写代码：
Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);//创建三个按钮，使用布局管理器管理起来（需包含QPushButton头文件）QPushButton* button1 = new QPushButton("按钮1");QPushButton* button2 = new QPushButton("按钮2");QPushButton* button3 = new QPushButton("按钮3");//创建布局管理器（需包含QVBoxLayout头文件）QVBoxLayout* layout = new QVBoxLayout();layout->addWidget(button1);layout->addWidget(button2);layout->addWidget(button3);//把布局管理器添加到窗口中this->setLayout(layout);
}效果如图：可以发现无论如何拖动窗口三个按钮都整齐排列
3.2 水平布局
使用 QHBoxLayout 表⽰垂直的布局管理器，H是 horizontal 的缩写。
核心属性(和 QVBoxLayout 属性是⼀致的)
| 属性 | 说明 |
| layoutLeftMargin | 左侧边距 |
| layoutRightMargin | 右侧边距 |
| layoutTopMargin | 上⽅边距 |
| layoutBottomMargin | 下⽅边距 |
| layoutSpacing | 相邻元素之间的间距 |
示例1：与垂直布局有相似的效果
Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);//创建三个按钮，使用布局管理器管理起来（需包含QPushButton头文件）QPushButton* button1 = new QPushButton("按钮1");QPushButton* button2 = new QPushButton("按钮2");QPushButton* button3 = new QPushButton("按钮3");//创建布局管理器（需包含QVBoxLayout头文件）QHBoxLayout* layout = new QHBoxLayout();layout->addWidget(button1);layout->addWidget(button2);layout->addWidget(button3);//把布局管理器添加到窗口中this->setLayout(layout);
}
示例2：垂直布局管理器和水平布局管理器嵌套使用
Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);//创建垂直布局管理器QVBoxLayout* vlayout = new QVBoxLayout();this->setLayout(vlayout);//添加两个按钮进去QPushButton* button1 = new QPushButton("按钮1");QPushButton* button2 = new QPushButton("按钮2");vlayout->addWidget(button1);vlayout->addWidget(button2);//创建水平布局管理器QHBoxLayout* hlayout = new QHBoxLayout();//添加两个按钮进去QPushButton* button3 = new QPushButton("按钮3");QPushButton* button4 = new QPushButton("按钮4");hlayout->addWidget(button3);hlayout->addWidget(button4);//把水平布局管理器添加到垂直布局管理器中vlayout->addLayout(hlayout);
}效果如图：
3.3 网格布局
Qt 中还提供了用来实现网格布局的效果，可以达到M*N的这种网格的效果。
| 属性 | 说明 |
| layoutLeftMargin | 左侧边距 |
| layoutRightMargin | 右侧边距 |
| layoutTopMargin | 上⽅边距 |
| layoutBottomMargin | 下⽅边距 |
| layoutHorizontalSpacing | 相邻元素之间⽔平⽅向的间距 |
| layoutVerticalSpacing | 相邻元素之间垂直⽅向的间距 |
| layoutRowStretch | ⾏⽅向的拉伸系数 |
| layoutColumnStretch | 列⽅向的拉伸系数 |
示例1：每个按钮独占一行和一列：
Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);QPushButton* button1 = new QPushButton("按钮1");QPushButton* button2 = new QPushButton("按钮2");QPushButton* button3 = new QPushButton("按钮3");QPushButton* button4 = new QPushButton("按钮4");QGridLayout* layout = new QGridLayout();//每个按钮独占一行和一列layout->addWidget(button1,0,0);layout->addWidget(button2,1,1);layout->addWidget(button3,2,2);layout->addWidget(button4,3,4);this->setLayout(layout);
}效果如图：
示例2：设置水平拉伸系数为1：2：2
Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);//创建6个按钮，按照3*2的方式排列QPushButton* button1 = new QPushButton("按钮1");QPushButton* button2 = new QPushButton("按钮2");QPushButton* button3 = new QPushButton("按钮3");QPushButton* button4 = new QPushButton("按钮4");QPushButton* button5 = new QPushButton("按钮5");QPushButton* button6 = new QPushButton("按钮6");//创建布局管理器，把这些控件放进去QGridLayout* layout = new QGridLayout();layout->addWidget(button1,0,0);layout->addWidget(button2,0,1);layout->addWidget(button3,0,2);layout->addWidget(button4,1,0);layout->addWidget(button5,1,1);layout->addWidget(button6,1,2);this->setLayout(layout);//设置水平拉伸系数为1：2：2layout->setColumnStretch(0,1);layout->setColumnStretch(1,2);layout->setColumnStretch(2,2);
}效果如图：
示例3：设置垂直拉伸系数为1：1：2
由于按钮垂直方向默认没有拉伸开，（水平方向是默认拉伸开的）；
因此垂直方向不会受到拉伸系数的影响；
要想让垂直方向的拉伸系数生效，就需要让按钮先能够拉伸展开。
Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);//创建6个按钮，按照2*3的方式排列QPushButton* button1 = new QPushButton("按钮1");QPushButton* button2 = new QPushButton("按钮2");QPushButton* button3 = new QPushButton("按钮3");QPushButton* button4 = new QPushButton("按钮4");QPushButton* button5 = new QPushButton("按钮5");QPushButton* button6 = new QPushButton("按钮6");//由于按钮垂直方向默认没有拉伸开，（水平方向是默认拉伸开的）//因此垂直方向不会受到拉伸系数的影响//要想让垂直方向的拉伸系数生效，就需要让按钮先能够拉伸展开button1->setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);button2->setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);button3->setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);button4->setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);button5->setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);button6->setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);//创建layout并把按钮添加进去QGridLayout* layout = new QGridLayout();layout->addWidget(button1,0,0);layout->addWidget(button2,0,1);layout->addWidget(button3,1,0);layout->addWidget(button4,1,1);layout->addWidget(button5,2,0);layout->addWidget(button6,2,1);//把layout设置到窗口中this->setLayout(layout);//设置拉伸系数为1：1：2layout->setRowStretch(0,1);layout->setRowStretch(1,1);layout->setRowStretch(2,2);
}效果如图：
3.4 表单布局
除了上述的布局管理器之外,Qt还提供了QFormLayout，属于是 QGridLayout 的特殊情况,专门用于实现两列表单的布局。
示例：
Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);//设置成 3 行 2 列QFormLayout* layout = new QFormLayout();this->setLayout(layout);//创建3个label作为第一列QLabel* label1 = new QLabel("姓名");QLabel* label2 = new QLabel("年龄");QLabel* label3 = new QLabel("电话");//创建3个输入框作为第二列QLineEdit* edit1 = new QLineEdit();QLineEdit* edit2 = new QLineEdit();QLineEdit* edit3 = new QLineEdit();//把上述控件添加到表单布局中layout->addRow(label1,edit1);layout->addRow(label2,edit2);layout->addRow(label3,edit3);//创建一个“提交”按钮QPushButton* button = new QPushButton("提交");layout->addRow(nullptr,button);}效果如图：
3.5 Spacer
使用布局管理器的时候,可能需要在控件之间,添加⼀段空白.就可以使⽤ QSpacerItem 来表示。
| 属性 | 说明 |
| width | 宽度 |
| height | ⾼度 |
| hData | 水平方向的sizePolicy QSizePolicy::Ignored :忽略控件的尺寸，不对布局产生影响； QSizePolicy::Minimum :控件的最小尺寸为固定值，布局时不会超过该值； QSizePolicy::Maximum :控件的最大尺寸为固定值，布局时不会小于该值； QSizePolicy::Preferred :控件的理想尺寸为固定值，布局时会尽量接近该值； QSizePolicy::Expanding :控件的尺寸可以根据空间调整，尽可能占据更多空间； QSizePolicy::Shrinking :控件的尺寸可以根据空间调整，尽可能缩小以适应空间。 |
| vData | 垂直方向的sizePolicy 选项同上 |
示例：
Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);QHBoxLayout* layout = new QHBoxLayout();this->setLayout(layout);QPushButton* button1 = new QPushButton("按钮1");QPushButton* button2 = new QPushButton("按钮2");//创建 spacer 是两个按钮之间存在空白QSpacerItem* spacer = new QSpacerItem(200,20);//当前是要把空白添加到两个按钮之间，此处add的顺序就是把其放到中间了layout->addWidget(button1);layout->addSpacerItem(spacer);layout->addWidget(button2);
}效果如图：
