Qt流式布局QFlowLayout与QScrollArea相结合问题

问题：

Qt的流式布局QFlowLayout在QScrollArea中，默认以1列多行的排列方式撑开QScrollArea控件，导致我们将QScrollArea控件缩放的时候verticalScrollBar的显示出现问题。

现象：

解决方案：

在父窗体的resizeEvent中更新QScrollArea的滚动条

核心代码

void Widget::resizeEvent(QResizeEvent *e)
{
    // 更新QScrollArea滚动条
    updateScrollBar();
}

void Widget::updateScrollBar()
{
    if (!m_layout->isEmpty() && m_layout->lastItem())
    {
        QWidget *lastWidget = m_layout->lastItem()->widget();
        ui->scrollAreaWidgetContents->setFixedHeight(lastWidget->y() + lastWidget->height());
    }
}

演示程序全部代码-头文件

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QResizeEvent>
#include "qwhflowlayout.h"

namespace Ui {
class Widget;
}

class Widget : public QWidget
{
    Q_OBJECT

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

    // 更新QScrollArea滚动条
    void updateScrollBar();

protected:
    // 流式布局在没有该事件支持时，会默认将parentWidget高度设置为一列情况下的高度
    // 此时若使用QScrollArea来滚动流式布局中的内容时，会出现垂直滚动条下拉区域过多造成空白区域显示的情况
    // 为了解决该问题，使用resizeEvent事件，控制parentWidget的高度
    void resizeEvent(QResizeEvent *e);

private:
    Ui::Widget *ui;
    QWHFlowLayout *m_layout;
};

#endif // WIDGET_H

演示程序全部代码-cpp文件

#include "widget.h"
#include "ui_widget.h"
#include <QPushButton>

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);
    // 设置流式布局
    m_layout = new QWHFlowLayout(ui->scrollAreaWidgetContents);
    // 为流式布局添加控件，此处应QPushButton简单演示
    m_layout->addWidget(new QPushButton("aaa"));
    m_layout->addWidget(new QPushButton("bbb"));
    m_layout->addWidget(new QPushButton("ccc"));
    m_layout->addWidget(new QPushButton("ddd"));
    m_layout->addWidget(new QPushButton("eee"));
    m_layout->addWidget(new QPushButton("fff"));
    m_layout->addWidget(new QPushButton("ggg"));
    m_layout->addWidget(new QPushButton("aaa"));
    m_layout->addWidget(new QPushButton("bbb"));
    m_layout->addWidget(new QPushButton("ccc"));
    m_layout->addWidget(new QPushButton("ddd"));
    m_layout->addWidget(new QPushButton("eee"));
    m_layout->addWidget(new QPushButton("fff"));
    m_layout->addWidget(new QPushButton("ggg"));
    m_layout->addWidget(new QPushButton("aaa"));
    m_layout->addWidget(new QPushButton("bbb"));
    m_layout->addWidget(new QPushButton("ccc"));
    m_layout->addWidget(new QPushButton("ddd"));
    m_layout->addWidget(new QPushButton("eee"));
    m_layout->addWidget(new QPushButton("fff"));
    m_layout->addWidget(new QPushButton("ggg"));
}

Widget::~Widget()
{
    delete ui;
}

void Widget::resizeEvent(QResizeEvent *e)
{
    // 更新QScrollArea滚动条
    updateScrollBar();
}

void Widget::updateScrollBar()
{
    if (!m_layout->isEmpty() && m_layout->lastItem())
    {
        QWidget *lastWidget = m_layout->lastItem()->widget();
        ui->scrollAreaWidgetContents->setFixedHeight(lastWidget->y() + lastWidget->height());
    }
}

注：
1、流式布局QFlowLayout的代码Qt文档中搜索Flow Layout Example即可找到代码！
2、可能还会遇到流式布局的其他问题，只需要注意父窗体的show()函数、父窗体被添加布局、和在外部调用父窗体的updateScrollBar()函数相结合即可解决。