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

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

先看最终配置界面效果：

截图一：

截图二：

下面开始编码实现。

2 增加配置参数项目界面

增加一个继承于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_OBJECTpublic:    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);    }}

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

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

MainWindow类设计：

#ifndef MAINWINDOW_H#define MAINWINDOW_H#include <QMainWindow>QT_BEGIN_NAMESPACEnamespace Ui { class MainWindow; }QT_END_NAMESPACEclass MainWindow : public QMainWindow{    Q_OBJECTpublic:    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);    }}

右键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.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>