一、多元素控件

多元素控件用于展示多条数据,支持列表、表格、树形结构,常用控件包括 ListWidget、TableWidget、TreeWidget(xxWidget 是 xxView 的子类,封装了 Model 层,使用更简便)。

xxWidget与xxView的区别:
用 QTableWidget 和 QTableView 举例,核心区别是数据管理方式:
QTableView 是基于 MVC 设计的基础控件,自身不存数据,得用户手动创建 Model(比如 QStandardModel)并和它关联,数据存在 Model 里,改 Model 或改 View 会双向同步;而 QTableWidget 是它的子类,已经封装好了 Model,不用用户额外创建,直接就能往控件里加数据。

总结:View 需要自己配 Model,更灵活;Widget 已经封装好 Model ,开箱即用。

1.1 ListWidget(列表控件)

核心属性

属性说明
currentRow当前被选中的是第几行
count一共有多少行
sortingEnabled是否允许排序
isWrapping是否允许换行
itemAlignment元素的对齐方式
selectRectVisible被选中的元素矩形是否可见
spacing元素之间的间隔

核心方法

方法说明
addItem(const QString& label)列表中添加元素
addItem(QListWidgetItem *item)列表中添加元素(通过QListWidgetItem对象
currentItem()返回QListWidgetItem*表示当前选中的元素
setCurrentItem(QListWidgetItem* item)设置选中哪个元素
setCurrentRow(int row)设置选中第几行的元素
insertItem(const QString& label, int row)在指定位置插入元素
insertItem(QListWidgetItem *item, int row)在指定位置插入元素(通过QListWidgetItem对象)
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)鼠标进入元素时触发

核心方法

方法说明
setFont设置字体
setIcon设置图标
setHidden设置隐藏
setSizeHint设置尺寸
setSelected设置是否选中
setText设置文本
setTextAlignment设置文本对齐方式
  • 显示纵向列表,支持新增、删除、选中元素,每个元素为 QListWidgetItem。

  • 核心方法:addItem()(添加元素)、takeItem()(删除元素)、currentItem()(获取当前选中元素)。

  • 可通过ui变型为其他控件:
    在这里插入图片描述

  • 代码示例1:列表元素增删改查

  1. 拖放 ListWidget、LineEdit、两个按钮(新增/删除),也可以通过ui直接添加:
    在这里插入图片描述

  2. 编写代码:

Widget::Widget(QWidget *parent)
: QWidget(parent), ui(new Ui::Widget)
{
    ui->setupUi(this);
    // 添加元素
    ui->listWidget->addItem("apple");
    //或ui->listWidget->addItem(new QListWidgetItem("apple"));
    ui->listWidget->addItem("banana");
    //或ui->listWidget->addItem(new QListWidgetItem("banana"));
    ui->listWidget->addItem("orange");
    //或ui->listWidget->addItem(new QListWidgetItem("oragne"));
}
// 新增元素
void Widget::on_pushButton_clicked()
{
    const QString& text = ui->lineEdit->text();
    if (!text.isEmpty()) ui->listWidget->addItem(text);
}
// 删除元素
void Widget::on_pushButton_2_clicked()
{
    int row = ui->listWidget->currentRow();
    ui->listWidget->takeItem(row);
}

在这里插入图片描述

1.2 TableWidget(表格控件)

核心方法

方法说明
item(int row, int column)根据行列数获取指定的 QTableWidgetItem*
setItem(int row, int column, QTableWidgetItem*)根据行列数设置表格中的元素
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, QTableWidgetItem*)设置指定列的表头
setVerticalHeaderItem(int row, QTableWidgetItem*)设置指定行的表头

核心信号

信号说明
cellClicked(int row, int column)点击单元格时触发
cellDoubleClicked(int row, int column)双击单元格时触发
cellEntered(int row, int column)鼠标进入单元格时触发
currentCellChanged(int row, int column, int previousRow, int previousColumn)选中不同单元格时触发(含前后单元格行列)

核心方法

方法说明
row()获取当前Item所在的行号
column()获取当前Item所在的列号
setText(const QString&)设置Item的文本内容
setTextAlignment(int)设置Item的文本对齐方式
setIcon(const QIcon&)设置Item的图标
setSelected(bool)设置Item是否被选中
setSizeHints(const QSize&)设置Item的尺寸
setFont(const QFont&)设置Item的字体
  • 显示二维表格,每个单元格为 QTableWidgetItem,支持行/列增删、单元格编辑。

  • 核心方法:insertRow()/insertColumn()(增行/列)、removeRow()/removeColumn()(删行/列)、setItem()(设置单元格内容)。

  • 可以使用ui直接添加固定信息:
    在这里插入图片描述

  • 代码示例1:学生信息表格(支持增删行/列)

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);

    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("20"));

    ui->tableWidget->setItem(1, 0, new QTableWidgetItem("1002"));
    ui->tableWidget->setItem(1, 1, new QTableWidgetItem("李四"));
    ui->tableWidget->setItem(1, 2, new QTableWidgetItem("21"));

    ui->tableWidget->setItem(2, 0, new QTableWidgetItem("1003"));
    ui->tableWidget->setItem(2, 1, new QTableWidgetItem("王五"));
    ui->tableWidget->setItem(2, 2, new QTableWidgetItem("19"));
}
void Widget::on_pushButton_addRow_clicked()
{
    // 获取当前行数,在末尾插入新行
    int rowCount = ui->tableWidget->rowCount();
    ui->tableWidget->insertRow(rowCount);
}

void Widget::on_pushButton_delRow_clicked()
{
    // 获取当前选中的行号
    int curRow = ui->tableWidget->currentRow();
    // 存在选中行时才删除
    if (curRow >=0 ) {
        ui->tableWidget->removeRow(curRow);
    }
}

void Widget::on_pushButton_addCol_clicked()
{
    // 获取当前列数,在末尾插入新列
    int colCount = ui->tableWidget->columnCount();
    ui->tableWidget->insertColumn(colCount);

    // 从输入框获取列名,设置新列表头
    const QString& name = ui->lineEdit->text();
    ui->tableWidget->setHorizontalHeaderItem(colCount, new QTableWidgetItem(name));
}

void Widget::on_pushButton_delCol_clicked()
{
    // 获取当前选中的列号
    int curCol = ui->tableWidget->currentColumn();
    // 存在选中列时才删除
    if (curCol != -1) {
        ui->tableWidget->removeColumn(curCol);
    }
}

在这里插入图片描述

1.3 TreeWidget(树形控件)

核心方法

方法说明
clear清空所有子节点
addTopLevelItem(QTreeWidgetItem* item)新增顶层节点
topLevelItem(int index)获取指定下标的顶层节点
topLevelItemCount()获取顶层节点个数
indexOfTopLevelItem(QTreeWidgetItem* item)查询指定节点是顶层节点中的下标
takeTopLevelItem(int index)删除指定的顶层节点,返回QTreeWidgetItem*表示被删除的元素
currentItem()获取当前选中的节点,返回QTreeWidgetItem*
setCurrentItem(QTreeWidgetItem* item)选中指定节点
setExpanded(bool)展开/关闭节点
setHeaderLabel(const QString& text)设置TreeWidget的header名称

核心信号

信号说明
currentItemChanged(QTreeWidgetItem* current, QTreeWidgetItem* old)切换选中元素时触发
itemClicked(QTreeWidgetItem* item, int col)点击元素时触发
itemDoubleClicked(QTreeWidgetItem* item, int col)双击元素时触发
itemEntered(QTreeWidgetItem* item, int col)鼠标进入时触发
itemExpanded(QTreeWidgetItem* item)元素被展开时触发
itemCollapsed(QTreeWidgetItem* item)元素被折叠时触发

核心属性

属性说明
text持有的文本
textAlignment文本对齐方式
icon持有的图表
font文本字体
hidden是否隐藏
disabled是否禁用
expand是否展开
sizeHint尺寸大小
selected是否选中

核心方法

方法说明
addChild(QTreeWidgetItem* child)新增子节点
childCount()子节点的个数
child(int index)获取指定下标的子节点,返回QTreeWidgetItem*
takeChild(int index)删除对应下标的子节点
removeChild(QTreeWidgetItem* child)删除对应的子节点
parent()获取该元素的父节点
  • 显示树形结构,支持顶层节点和子节点嵌套,每个节点为 QTreeWidgetItem。

  • 核心方法:addTopLevelItem()(添加顶层节点)、addChild()(添加子节点)、takeTopLevelItem()(删除顶层节点)。

  • 同样可以直接通过ui添加:
    在这里插入图片描述

  • 代码示例1:动物分类树形结构

Widget::Widget(QWidget *parent)
: QWidget(parent), ui(new Ui::Widget)
{
    ui->setupUi(this);
     // 1. 创建空的顶层节点
    QTreeWidgetItem *catItem = new QTreeWidgetItem();
    // 2. 设置第0列的文本(TreeWidget默认是1列,列索引从0开始)
    catItem->setText(0, "猫");
    // 3. 添加到TreeWidget中
    ui->treeWidget->addTopLevelItem(catItem);

    QTreeWidgetItem* dogItem=new QTreeWidgetItem();
    dogItem->setText(0,"狗");
    ui->treeWidget->addTopLevelItem(dogItem);

    QTreeWidgetItem* fishItem=new QTreeWidgetItem();
    fishItem->setText(0,"鱼");
    ui->treeWidget->addTopLevelItem(fishItem);

    QTreeWidgetItem *catchild1 = new QTreeWidgetItem();
    catchild1->setText(0,"狸花猫");
    catItem->addChild(catchild1);
    QTreeWidgetItem *catchild2 = new QTreeWidgetItem();
    catchild2->setText(0,"缅因猫");
    catItem->addChild(catchild2);

    QTreeWidgetItem *dogchild1 = new QTreeWidgetItem();
    dogchild1->setText(0,"边牧");
    dogItem->addChild(dogchild1);
}

在这里插入图片描述

  • 代码示例2:按钮添加
void Widget::on_add_top_clicked()
{
    const QString& str=ui->lineEdit_2->text();
    QTreeWidgetItem *item = new QTreeWidgetItem();
    item->setText(0,str);
    ui->treeWidget->addTopLevelItem(item);
}

void Widget::on_add_choose_clicked()
{
    QTreeWidgetItem* choosen=ui->treeWidget->currentItem();
    if(choosen==nullptr) return;
    const QString& str=ui->lineEdit_2->text();
    QTreeWidgetItem *item = new QTreeWidgetItem();
    item->setText(0,str);
    choosen->addChild(item);
}

void Widget::on_del_choose_clicked()
{
    QTreeWidgetItem* choosen=ui->treeWidget->currentItem();
    if(choosen==nullptr) return;
    QTreeWidgetItem* parent=choosen->parent();
    if(parent==nullptr)//为顶层元素,删除顶层节点
    {
        ui->treeWidget->takeTopLevelItem(ui->treeWidget->indexOfTopLevelItem(choosen));
    }
    else//非顶层元素,删除子节点
    {
        parent->removeChild(choosen);
    }
}

在这里插入图片描述

二、容器类控件

容器类控件用于包裹其他控件,实现分组、分页、布局管理,常用控件包括 GroupBox、TabWidget。

2.1 GroupBox(分组框)

QGroupBox 核心属性表格

属性说明
title分组框的标题
alignment分组框内部内容的对齐方式
flat是否是“扁平”模式
checkable是否可选择;设为 true,则在 title 前方会多出一个可勾选的部分
checked描述分组框的选择状态(前提是 checkable 为 true)
  • 带有标题的分组容器,用于将相关控件归类,提升界面可读性。
  • 核心属性:title(分组标题)、checkable(是否可勾选,勾选后启用组内控件)、flat(是否扁平样式)。
  • 代码示例1:将麦当劳点餐控件分组
    在 Qt Designer 中拖放 3 个 GroupBox,分别命名为“汉堡”“小食”“饮料”,将对应的下拉框、微调框放入对应分组框中即可。

2.2 TabWidget(标签页控件)

核心属性

属性说明
tabPosition标签页所在的位置,可选值:
- North(上方)
- South(下方)
- West(左侧)
- East(右侧)
currentIndex当前选中了第几个标签页(从 0 开始计算)
currentTabText当前选中的标签页的文本
currentTabName当前选中的标签页的名字
currentTabIcon当前选中的标签页的图标
currentTabToolTip当前选中的标签页的提示信息
tabsClosable标签页是否可以关闭
movable标签页是否可以移动

核心信号

信号说明
currentChanged(int)在标签页发生切换时触发,参数为被点击的选项卡编号
tabBarClicked(int)在点击选项卡的标签条时触发,参数为被点击的选项卡编号
tabBarDoubleClicked(int)在双击选项卡的标签条时触发,参数为被点击的选项卡编号
tabCloseRequest(int)在标签页关闭时触发,参数为被关闭的选项卡编号

核心函数

方法说明
count()获取标签页的总数,返回 int
addTab(QWidget *page, const QString &label)添加标签页:参数为标签页对应的 QWidget、标签文本
addTab(QWidget *page, const QIcon &icon, const QString &label)添加带图标的标签页:参数为 QWidget、图标、标签文本
insertTab(int index, QWidget *page, const QString &label)在指定索引(index)处插入标签页
removeTab(int index)移除指定索引(index)对应的标签页
widget(int index)获取指定索引(index)对应的标签页 QWidget
setTabText(int index, const QString &text)设置指定索引(index)标签页的文本
tabText(int index)获取指定索引(index)标签页的文本
setTabIcon(int index, const QIcon &icon)设置指定索引(index)标签页的图标
tabIcon(int index)获取指定索引(index)标签页的图标
setTabToolTip(int index, const QString &toolTip)设置指定索引(index)标签页的提示信息
setCurrentIndex(int index)选中指定索引的标签页
setCurrentWidget(QWidget *widget)通过标签页对应的 QWidget 选中该标签页
currentIndex()获取当前选中标签页的索引(返回 int
currentWidget()获取当前选中标签页对应的 QWidget
  • 支持多标签页切换,每个标签页为一个 QWidget,可放置不同组的控件。
  • 核心属性:currentIndex(当前选中标签页下标)、tabsCloseable(是否可关闭标签页)、movable(标签页是否可拖动)。

关于 QTabWidget 的注意事项:

  • QTabWidget 中的每个标签页都是一个 QWidget
  • 点击标签页,就可以直接切换
  • 右键 QTabWidget,可以添加标签页或者删除标签页
  • 代码示例1:使⽤标签⻚管理多组控件
// 新增标签页
void Widget::on_pushButton_3_clicked()
{
    QWidget* newwidget=new QWidget();
    int count=ui->tabWidget->count();
    ui->tabWidget->addTab(newwidget,QString::fromStdString("Tab "+std::to_string(count+1)));
    //增加一个标签
    QLabel* label=new QLabel("新标签页",newwidget);
    label->setGeometry(newwidget->x()+20,newwidget->y()+20,50,20);
    //指向创建好的标签页
    ui->tabWidget->setCurrentIndex(count);
}

void Widget::on_pushButton_4_clicked()
{
    int pos=ui->tabWidget->currentIndex();
    if(pos>=0)
    {
        ui->tabWidget->removeTab(pos);
    }
}

在这里插入图片描述

三、布局管理器

布局管理器用于自动排列控件,解决绝对定位无法自适应窗口大小的问题,Qt 提供四种核心布局:垂直布局(QVBoxLayout)、水平布局(QHBoxLayout)、网格布局(QGridLayout)、表单布局(QFormLayout)。

3.1 垂直布局(QVBoxLayout)

属性说明
layoutLeftMargin左侧边距
layoutRightMargin右侧边距
layoutTopMargin上方边距
layoutBottomMargin下方边距
layoutSpacing相邻元素之间的间距
  • 控件垂直排列,随窗口高度调整控件大小。
  • 核心属性:layoutMargin(边距)、layoutSpacing(控件间距)。
  • 代码示例1:垂直排列三个按钮(使⽤addWidget 把控件添加到布局管理器中、使⽤ setLayout 设置该布局管理器到 widget 中.)
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    QPushButton* button1=new QPushButton("按钮1",this);
    QPushButton* button2=new QPushButton("按钮2",this);
    QPushButton* button3=new QPushButton("按钮3",this);
    //使用addWidget添加按钮
    QVBoxLayout* layout=new QVBoxLayout();
    layout->addWidget(button1);
    layout->addWidget(button2);
    layout->addWidget(button3);
    //使用setLayout将布局管理器设置到widget中
    this->setLayout(layout);
}
  • 还可以直接通过Qt designer添加:
    在这里插入图片描述
    或者通过选中添加垂直布局:
    在这里插入图片描述
    请注意如果通过代码添加绑定到Widget,那么控件的大小可以自适应窗口大小,并且一个Widget只能绑定一个layout,如果多次调用 setLayout() 那么只有最后一次调用会生效;如果采用Qt designer进行添加,没有 this->setLayout(布局管理器); 那么控件大小固定不变。

3.2 水平布局(QHBoxLayout)

属性说明
layoutLeftMargin布局的左侧边距
layoutRightMargin布局的右侧边距
layoutTopMargin布局的上方边距
layoutBottomMargin布局的下方边距
layoutSpacing布局内相邻元素的间距
  • 控件水平排列,随窗口宽度调整控件大小,属性与垂直布局一致。
  • 代码示例1:水平排列三个按钮
Widget::Widget(QWidget *parent)
: QWidget(parent), ui(new Ui::Widget)
{
    ui->setupUi(this);
    QPushButton* btn1 = new QPushButton("按钮1");
    QPushButton* btn2 = new QPushButton("按钮2");
    QPushButton* btn3 = new QPushButton("按钮3");
    QHBoxLayout* layout = new QHBoxLayout();
    layout->addWidget(btn1);
    layout->addWidget(btn2);
    layout->addWidget(btn3);
    this->setLayout(layout);
}

在这里插入图片描述

  • 代码示例2:嵌套的布局管理器
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    QPushButton* button1=new QPushButton("按钮1",this);
    QPushButton* button2=new QPushButton("按钮2",this);
    QPushButton* button3=new QPushButton("按钮3",this);
    QPushButton* button4=new QPushButton("按钮4",this);
    QPushButton* button5=new QPushButton("按钮5",this);
    QPushButton* button6=new QPushButton("按钮6",this);
    
    QVBoxLayout* layoutv= new QVBoxLayout();
    this->setLayout(layoutv);
    layoutv->addWidget(button1);
    layoutv->addWidget(button2);
    layoutv->addWidget(button3);

    QHBoxLayout* layouth= new QHBoxLayout();
    this->setLayout(layouth);
    layouth->addWidget(button4);
    layouth->addWidget(button5);
    layouth->addWidget(button6);
    layoutv->addLayout(layouth);

}

在这里插入图片描述

3.3 网格布局(QGridLayout)

属性说明
layoutLeftMargin布局的左侧边距
layoutRightMargin布局的右侧边距
layoutTopMargin布局的上方边距
layoutBottomMargin布局的下方边距
layoutHorizontalSpacing相邻元素之间水平方向的间距
layoutVerticalSpacing相邻元素之间垂直方向的间距
layoutRowStretch行方向的拉伸系数
layoutColumnStretch列方向的拉伸系数
  • 控件按网格排列(M 行 N 列),支持控件跨行列、拉伸比例设置。
  • 核心属性:layoutHorizontalSpacing(水平间距)、layoutVerticalSpacing(垂直间距)、layoutRowStretch/layoutColumnStretch(行/列拉伸比例)。
  • 代码示例1:2 行 2 列网格布局
Widget::Widget(QWidget *parent)
: QWidget(parent), ui(new Ui::Widget)
{
    ui->setupUi(this);
    QPushButton* btn1 = new QPushButton("按钮1");
    QPushButton* btn2 = new QPushButton("按钮2");
    QPushButton* btn3 = new QPushButton("按钮3");
    QPushButton* btn4 = new QPushButton("按钮4");
    QGridLayout* layout = new QGridLayout();
    // 添加控件到网格(行下标,列下标)
    layout->addWidget(btn1, 0, 0);
    layout->addWidget(btn2, 0, 1);
    layout->addWidget(btn3, 1, 0);
    layout->addWidget(btn4, 1, 1);
    this->setLayout(layout);
}

在这里插入图片描述

如果将列/行设置为相同(不一定皆为0),则可以实现垂直/水平布局管理器的效果,并且控件之间的间隔不会因为设置的参数过大而变大。

  • 代码示例2:设置水平拉伸系数
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    QPushButton* button1=new QPushButton("按钮1",this);
    QPushButton* button2=new QPushButton("按钮2",this);
    QPushButton* button3=new QPushButton("按钮3",this);
    QPushButton* button4=new QPushButton("按钮4",this);
    QPushButton* button5=new QPushButton("按钮5",this);
    QPushButton* button6=new QPushButton("按钮6",this);
    QGridLayout* grid=new QGridLayout();
    this->setLayout(grid);

    grid->addWidget(button1,0,0);
    grid->addWidget(button2,0,1);
    grid->addWidget(button3,0,2);
    grid->addWidget(button4,1,0);
    grid->addWidget(button5,1,1);
    grid->addWidget(button6,1,2);

    //设置水平拉伸系数
    //第 0 列拉伸比例为 1
    grid->setColumnStretch(0,1);
    //第 1 列不参与拉伸,保持固定大小
    grid->setColumnStretch(1,0);
    //第 2 列拉伸比例为 2
    grid->setColumnStretch(2,2);

}

在这里插入图片描述

  • 代码示例3:设置垂直拉伸系数

按钮默认的尺寸策略是Preferred(保持自身理想尺寸),只会维持默认/设置的固定尺寸,不会主动填充布局分配的额外空间,直接设垂直拉伸系数的效果不明显。
—— 将按钮的sizePolicy设为Expanding,让按钮具备“根据布局空间调整尺寸、尽可能填充布局”的能力,布局的行拉伸系数才能生效,按钮才会随布局的空间分配放大/缩小。

属性值说明
QSizePolicy::Ignored忽略控件的尺寸,不对布局的空间分配产生影响
QSizePolicy::Minimum控件的最小尺寸为固定值,布局时不会超过该最小尺寸
QSizePolicy::Maximum控件的最大尺寸为固定值,布局时不会小于该最大尺寸
QSizePolicy::Preferred控件的理想尺寸为固定值,布局时会尽量接近该理想尺寸
QSizePolicy::Expanding控件的尺寸可以根据空间调整,尽可能占据更多布局空间
QSizePolicy::Shrinking控件的尺寸可以根据空间调整,尽可能缩小以适配布局空间
 Widget::Widget(QWidget *parent)
  : QWidget(parent)
  , ui(new Ui::Widget)
{
    ui->setupUi(this);

    QPushButton* button1=new QPushButton("按钮1",this);
    QPushButton* button2=new QPushButton("按钮2",this);
    QPushButton* button3=new QPushButton("按钮3",this);
    QPushButton* button4=new QPushButton("按钮4",this);
    QPushButton* button5=new QPushButton("按钮5",this);
    QPushButton* button6=new QPushButton("按钮6",this);
    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);

    QGridLayout* grid=new QGridLayout();
    this->setLayout(grid);

    grid->addWidget(button1,0,0);
    grid->addWidget(button2,0,1);
    grid->addWidget(button3,1,0);
    grid->addWidget(button4,1,1);
    grid->addWidget(button5,2,0);
    grid->addWidget(button6,2,1);

    //设置垂直拉伸系数
    grid->setRowStretch(0,1);
    grid->setRowStretch(1,0);
    grid->setRowStretch(2,2);
}

在这里插入图片描述

3.4 表单布局(QFormLayout)

  • 两列表单布局(左侧标签,右侧输入控件),适合用户信息填写场景。
  • 使⽤ addRow ⽅法来添加⼀⾏,每⾏包含两个控件第⼀个控件固定是 QLabel / ⽂本,第⼆个控件则可以是任意控件,如果把第⼀个参数填写为 NULL,则什么都不显⽰
  • 代码示例:个人信息表单
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    QLabel* label1=new QLabel("姓名",this);
    QLabel* label2=new QLabel("年龄",this);
    QLabel* label3=new QLabel("电话",this);
    QLineEdit* edit1=new QLineEdit(this);
    QLineEdit* edit2=new QLineEdit(this);
    QLineEdit* edit3=new QLineEdit(this);

    QPushButton* button=new QPushButton("commit",this);

    QFormLayout* form=new QFormLayout();
    form->addRow(label1,edit1);
    form->addRow(label2,edit2);
    form->addRow(label3,edit3);
    form->addRow(nullptr,button);
    this->setLayout(form);

}

在这里插入图片描述

3.5 Spacer(空白间隔)

属性说明
widthQSpacerItem的宽度
heightQSpacerItem的高度
hData水平方向的尺寸策略(QSizePolicy),可选值:
- Ignored:忽略尺寸,不影响布局
- Minimum:最小尺寸固定,布局不超该值
- Maximum:最大尺寸固定,布局不小于该值
- Preferred:理想尺寸固定,布局尽量接近该值
- Expanding:尺寸随空间调整,尽可能占更多空间
- Shrinking:尺寸随空间调整,尽可能缩小适配
vData垂直方向的尺寸策略(QSizePolicy),可选值与hData的选项完全一致
  • 用于在布局中添加空白间隔,调整控件间距,支持水平/垂直方向。
  • 代码示例1:两个按钮中间添加水平间隔
Widget::Widget(QWidget *parent)
: QWidget(parent), ui(new Ui::Widget)
{
    ui->setupUi(this);
    QPushButton* btn1 = new QPushButton("按钮1");
    QPushButton* btn2 = new QPushButton("按钮2");
    QHBoxLayout* layout = new QHBoxLayout();
    // 创建水平间隔(宽度200,高度20)
    QSpacerItem* spacer = new QSpacerItem(200, 20);
    layout->addWidget(btn1);
    layout->addSpacerItem(spacer); // 添加间隔
    layout->addWidget(btn2);
    this->setLayout(layout);
}
  • 还可以直接通过Qt designer添加
    在这里插入图片描述

更多推荐