Qt6.5实战：Qt实现界面布局自动排版、自定义滚动条

01 背景说明

在一些实际项目中，程序配置界面会有很多的配置参数项（超过几百条），并且这些配置参数项需要通过接口来动态添加。本文就来重点讲下，Qt界面如何利用滚动条显示超多配置参数项，同时还要实现界面布局自动排版等功能。

本示例利用QGridLayhout网格布局管理器，来管理所有的配置参数项，实现界面布局自动排版；同时利用QScrollArea实现界面自定义滚动条的功能，当配置参数项的显示超出当前界面的可视高度，自动显示垂直滚动条。

• 先看最终配置界面效果：

截图一：

截图二：

下面开始编码实现。

02 增加配置参数项目界面

增加一个继承于QWidget的ui界面类CheckBoxSetItemsWidget。这个类主要有二个作用，一是QWidget做为封装，可以方便的集成到别的界面；二是单独类设计可以添加到QScrollArea实现滚动条功能。

首先需要先修改CheckBoxSetItemsWidget界面为垂直布局（QVBoxLayout），修改方式详见文末。

然后在上方放一个水平布局管理器（QHBoxLayout），在下方放一个网格布局管理器（QGridLayout）。

在界面上方的水平布局管理器里面，添加一个QCheckBox用于实现全选和反选，和一个水平弹簧（QSpacerItem）用于在水平方向自动撑开。

CheckBoxSetItemsWidget.ui界面设计如下图：

• CheckBoxSetItemsWidget类设计：

#ifndef CHECKBOXSETITEMSWIDGET_H
#define CHECKBOXSETITEMSWIDGET_H

#include <QWidget>
#include <QString>

namespace Ui {
class CheckBoxSetItemsWidget;
}

class CheckBoxSetItemsWidget : public QWidget
{
    Q_OBJECT

public:
    explicit CheckBoxSetItemsWidget(QWidget *parent = nullptr);
    ~CheckBoxSetItemsWidget();

    // 设置一行显示几个配置参数
    void setRowCount(int iRowCount = 5);

    // 添加配置参数项函数
    void addCheckBoxItem(const QString& qstrName, bool bChecked = true);

private slots:
    // 全选&反选功能函数
    void slotSelectAllClicked(bool checked = false);

private:
    Ui::CheckBoxSetItemsWidget *ui;
    // 一行配置5个QCheckBox配置参数项
    int m_iRowCount{ 5 };
};

#endif // CHECKBOXSETITEMSWIDGET_H

• 构造函数代码：

CheckBoxSetItemsWidget::CheckBoxSetItemsWidget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::CheckBoxSetItemsWidget)
{
    ui->setupUi(this);

    // 初始界面
    ui->m_pCheckBoxSelectAll->setText("全选");
    ui->m_pCheckBoxSelectAll->setChecked(true);

    // 连接信号槽
    connect(ui->m_pCheckBoxSelectAll, &QCheckBox::clicked, this, &CheckBoxSetItemsWidget::slotSelectAllClicked);
}

• 添加配置参数项代码：

// 添加配置参数项函数代码。
void CheckBoxSetItemsWidget::addCheckBoxItem(const QString &qstrName, bool bChecked)
{
    QCheckBox* p_check_box = new QCheckBox(qstrName, this);
    p_check_box->setChecked(bChecked);
    int i_row = ui->m_pGridLayout->count() / m_iRowCount;
    int i_col = ui->m_pGridLayout->count() % m_iRowCount;
    ui->m_pGridLayout->addWidget(p_check_box, i_row, i_col);
}

• 全选&反选代码：

// 全选&反选功能函数代码
void CheckBoxSetItemsWidget::slotSelectAllClicked(bool checked)
{
    int i_count = ui->m_pGridLayout->count();
    for (int i = 0; i < i_count; ++i)
    {
        QCheckBox* p_check_box = (QCheckBox*)ui->m_pGridLayout->itemAt(i)->widget();
        assert(nullptr != p_check_box);
        p_check_box->setChecked(checked);
    }
}

03 集成配置参数项目界面

我们把CheckBoxSetItemsWidget配置参数项目界面集成到主界面。

首先需要先修改MainWindow界面为垂直布局（QVBoxLayout），修改方式详见文末。

• MainWindow类设计：

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>

QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

    // 添加模拟配置参数项数据
    void addParamDatas();

protected:
    // 初始界面
    void initForm();

private:
    Ui::MainWindow *ui;
};
#endif // MAINWINDOW_H

• 构造函数代码：

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::IMainWindow)
{
    ui->setupUi(this);
    this->setWindowTitle("QScrollArea & QGridLayout & QCheckBox实战示例");

    initForm();
    addParamDatas();
}

• 初始界面代码：

void MainWindow::initForm()
{
    // 创建滚动条控件对象
    auto p_scroll_area = new QScrollArea(this);
    // 创建配置参数项界面
    auto* p_check_box_items_widget = new CheckBoxSetItemsWidget(p_scroll_area);
    // 将配置参数项界面加入到滚动条
    p_scroll_area->setWidget(p_check_box_items_widget);
    p_scroll_area->setWidgetResizable(true);
    // 将滚动条控件加入到界面布局
    QLayout* p_layout = ui->centralwidget->layout();
    p_layout->addWidget(p_scroll_area);
}

• 添加配置参数项代码：

// 添加配置参数项数据
void MainWindow::addParamDatas()
{
    auto* p_scroll_area = (QScrollArea*)ui->centralwidget->layout()->itemAt(0)->widget();
    auto* p_check_box_items_widget = (CheckBoxSetItemsWidget*)p_scroll_area->widget();
    // 生成300组模拟配置参数
    for (int i = 0; i < 300; ++i)
    {
        QString qstr_name = QString("CheckBox%0").arg(i);
        p_check_box_items_widget->addCheckBoxItem(qstr_name, true);
    }
}

04 附录1：如何手工修改QWidget界面的默认布局

• 修改CheckBoxSetItemsWidget界面为垂直布局（QVBoxLayout）：

右键CheckBoxSetItemsWidget.ui文件，用(普通文本编辑器)打开，找到()代码，在下面增加()一行代码，保存关闭文本编辑器。

CheckBoxSetItemsWidget.ui源码如下例子：

<ui version="4.0">
 <author/>
 <comment/>
 <exportmacro/>
 <class>CheckBoxSetItemsWidget</class>
 <widget class="QWidget" name="CheckBoxSetItemsWidget">
  <layout class="QVBoxLayout" name="verticalLayout_1" />
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>400</width>
    <height>300</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>Form</string>
  </property>
 </widget>
 <pixmapfunction/>
 <connections/>
</ui>

• 修改MainWindow界面为垂直布局（QVBoxLayout）：

右键MainWindow.ui文件，用(普通文本编辑器)打开，找到()代码，在下面增加()一行代码，保存关闭文本编辑器。

MainWindow.ui源码如下例子：

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>IMainWindow</class>
 <widget class="QMainWindow" name="MainWindow">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>800</width>
    <height>600</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>MainWindow</string>
  </property>
  <widget class="QWidget" name="centralwidget">
   <layout class="QVBoxLayout" name="verticalLayout_1"/>
  </widget>
  <widget class="QMenuBar" name="menubar"/>
  <widget class="QStatusBar" name="statusbar"/>
 </widget>
 <resources/>
 <connections/>
</ui>

05 附录2：完整源码

关注公众号下载本示例完整工程源码(03_QScrollArea_QGridLayout_QCheckBox_practical.zip)。

-【End】-

#想了解更多精彩内容，关注下方公众号，还有示例源码、开发工具免费下载。

喜欢本文章，记得点赞、分享、关注哦~