Qt实现水平方向（横向）流式布局FlowLayout简单又实用！提供2种最有用的方法！

难搞哦~

已于 2024-05-27 09:15:12 修改

阅读量370

点赞数 2

分类专栏： QT 文章标签： qt Flowlayout

于 2024-05-14 12:04:56 首次发布

本文链接：https://blog.csdn.net/wu10188/article/details/138848144

版权

QT 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

在Qt中实现水平方向（横向）流式布局有两种方法：

方法一：使用QListView或者QListWidget基础控件，这两个控件是可以直接设置水平方向自动换行的流式布局的：

优点：

1.由于QListView是model/view结构，所以在支持流式布局的同时，还可以通过model实现搜索、过滤、排序、拖拽交互两个项等高级功能！数据量大时的增删改查都挺方便。

2.自带滚动条，当显示不完全时可以使用滚动条滚动可视范围。

缺点：

1.用起来复杂一些，相对于QLayout消耗大一些。

2.它无法单独调整水平或者垂直方向的间距，listView->setSpacing()会让子项与子项之间的间距变成双倍，子项与QListView边框间距才是一倍，难调的一批莫名其妙的，这时只能用setGridSize()来先预先设置每个子项的大小预留水平和垂直方向的间距，一旦使用setGridSize()，那么子项与子项的通过setSpacing()设置的间距会失效，只有子项与QListView整体边框的间距还有效。听我这么说就知道，这有多难调整子项间距问题。。。

方法二：使用布局管理器QLayout及其子类，Qt中常见的布局管理器有：

QHBoxLayout：水平布局（常用）

QVBoxLayout：垂直布局（常用）

QGridLayout：表格布局（常用）

QFormLayout：表单布局（很少用）

QStackedLayout：堆栈布局（罕见使用）

这些布局管理器都不能设置自动换行的流式布局（FlowLayout）。不过Qt 官方提供了一个流式布局管理器 FlowLayout 的例子，但并没有将其收录进基础模块中（要是收录了，应该叫QFlowLayout），而是以源码.h/.cpp的形式直接给出了可运行测试的Demo程序。

优点：

1.该类继承自 QLayout，意味着它可以直接被QWidget及其子类通过setLayout(QLayout *layout)来将其设置为容器的布局管理器，轻巧、简单、易用。

2.容易调整所有的间距问题，便捷程度是QListView方式不能比的，而且支持根据顺序索引访问和移除子项。

缺点：

1.不支持指定位置插入一个子项，只能在其末尾不断添加。

2.顺序固定无法改变（非要支持排序，可以自己使用QMap等容器对子项排序，再重新添加到布局，比较麻烦）。

3.没有自带滚动条，当可视范围无法完全显示所有子项时，需要把此布局设置到QScrollArea才有滚动条可用。

以下是Qt官方提供的例子源码，我在此基础上增加3个接口，使其更加实用！

flowlayout.h

#ifndef FLOWLAYOUT_H
#define FLOWLAYOUT_H

#include <QLayout>
#include <QRect>
#include <QStyle>
//! [0]
class FlowLayout : public QLayout
{
public:
    explicit FlowLayout(QWidget *parent, int margin = -1, int hSpacing = -1, int vSpacing = -1);
    explicit FlowLayout(int margin = -1, int hSpacing = -1, int vSpacing = -1);
    ~FlowLayout() override;

    void addItem(QLayoutItem *item) override;
    int horizontalSpacing() const;
    int verticalSpacing() const;
    Qt::Orientations expandingDirections() const override;
    bool hasHeightForWidth() const override;
    int heightForWidth(int) const override;
    int count() const override;
    QLayoutItem *itemAt(int index) const override;
    QSize minimumSize() const override;
    void setGeometry(const QRect &rect) override;
    QSize sizeHint() const override;
    QLayoutItem *takeAt(int index) override;

    // 重新调整水平/垂直方向的间距
    void setHorizontalSpacing(int hSpacing);
    void setVerticalSpacing(int vSpacing);
    // 立即刷新布局（重新设置水平/垂直方向的间距后，如果布局没有变化，可调用此接口显式刷新布局）
    void refreshLayout();

private:
    int doLayout(const QRect &rect, bool testOnly) const;
    int smartSpacing(QStyle::PixelMetric pm) const;

    QList<QLayoutItem *> itemList;
    int m_hSpace;
    int m_vSpace;
};
//! [0]

#endif // FLOWLAYOUT_H

flowlayout.cpp

#include <QtWidgets>

#include "flowlayout.h"
//! [1]
FlowLayout::FlowLayout(QWidget *parent, int margin, int hSpacing, int vSpacing)
    : QLayout(parent), m_hSpace(hSpacing), m_vSpace(vSpacing)
{
    setContentsMargins(margin, margin, margin, margin);
}

FlowLayout::FlowLayout(int margin, int hSpacing, int vSpacing)
    : m_hSpace(hSpacing), m_vSpace(vSpacing)
{
    setContentsMargins(margin, margin, margin, margin);
}
//! [1]

//! [2]
FlowLayout::~FlowLayout()
{
    QLayoutItem *item;
    while ((item = takeAt(0)))
        delete item;
}
//! [2]

//! [3]
void FlowLayout::addItem(QLayoutItem *item)
{
    itemList.append(item);
}
//! [3]

//! [4]
int FlowLayout::horizontalSpacing() const
{
    if (m_hSpace >= 0) {
        return m_hSpace;
    } else {
        return smartSpacing(QStyle::PM_LayoutHorizontalSpacing);
    }
}

int FlowLayout::verticalSpacing() const
{
    if (m_vSpace >= 0) {
        return m_vSpace;
    } else {
        return smartSpacing(QStyle::PM_LayoutVerticalSpacing);
    }
}
//! [4]

//! [5]
int FlowLayout::count() const
{
    return itemList.size();
}

QLayoutItem *FlowLayout::itemAt(int index) const
{
    return itemList.value(index);
}

QLayoutItem *FlowLayout::takeAt(int index)
{
    if (index >= 0 && index < itemList.size())
        return itemList.takeAt(index);
    return nullptr;
}
//! [5]

//! [6]
Qt::Orientations FlowLayout::expandingDirections() const
{
    return 0;
}
//! [6]

//! [7]
bool FlowLayout::hasHeightForWidth() const
{
    return true;
}

int FlowLayout::heightForWidth(int width) const
{
    int height = doLayout(QRect(0, 0, width, 0), true);
    return height;
}
//! [7]

//! [8]
void FlowLayout::setGeometry(const QRect &rect)
{
    QLayout::setGeometry(rect);
    doLayout(rect, false);
}

QSize FlowLayout::sizeHint() const
{
    return minimumSize();
}

QSize FlowLayout::minimumSize() const
{
    QSize size;
    for (const QLayoutItem *item : qAsConst(itemList))
        size = size.expandedTo(item->minimumSize());

    const QMargins margins = contentsMargins();
    size += QSize(margins.left() + margins.right(), margins.top() + margins.bottom());
    return size;
}
//! [8]

//! [9]
int FlowLayout::doLayout(const QRect &rect, bool testOnly) const
{
    int left, top, right, bottom;
    getContentsMargins(&left, &top, &right, &bottom);
    QRect effectiveRect = rect.adjusted(+left, +top, -right, -bottom);
    int x = effectiveRect.x();
    int y = effectiveRect.y();
    int lineHeight = 0;
//! [9]

//! [10]
    for (QLayoutItem *item : qAsConst(itemList)) {
        const QWidget *wid = item->widget();
        int spaceX = horizontalSpacing();
        if (spaceX == -1)
            spaceX = wid->style()->layoutSpacing(
                QSizePolicy::PushButton, QSizePolicy::PushButton, Qt::Horizontal);
        int spaceY = verticalSpacing();
        if (spaceY == -1)
            spaceY = wid->style()->layoutSpacing(
                QSizePolicy::PushButton, QSizePolicy::PushButton, Qt::Vertical);
//! [10]
//! [11]
        int nextX = x + item->sizeHint().width() + spaceX;
        if (nextX - spaceX > effectiveRect.right() && lineHeight > 0) {
            x = effectiveRect.x();
            y = y + lineHeight + spaceY;
            nextX = x + item->sizeHint().width() + spaceX;
            lineHeight = 0;
        }

        if (!testOnly)
            item->setGeometry(QRect(QPoint(x, y), item->sizeHint()));

        x = nextX;
        lineHeight = qMax(lineHeight, item->sizeHint().height());
    }
    return y + lineHeight - rect.y() + bottom;
}
//! [11]
//! [12]
int FlowLayout::smartSpacing(QStyle::PixelMetric pm) const
{
    QObject *parent = this->parent();
    if (!parent) {
        return -1;
    } else if (parent->isWidgetType()) {
        QWidget *pw = static_cast<QWidget *>(parent);
        return pw->style()->pixelMetric(pm, nullptr, pw);
    } else {
        return static_cast<QLayout *>(parent)->spacing();
    }
}
//! [12]

void FlowLayout::setHorizontalSpacing(int hSpacing)
{
    m_hSpace = hSpacing;
}

void FlowLayout::setVerticalSpacing(int vSpacing)
{
    m_vSpace = vSpacing;
}

void FlowLayout::refreshLayout()
{
    doLayout(this->geometry(), false);
}

说说我为何新增3个接口：

    // 重新调整水平/垂直方向的间距
    void setHorizontalSpacing(int hSpacing);
    void setVerticalSpacing(int vSpacing);
    // 立即刷新布局（重新设置水平/垂直方向的间距后，如果布局没有变化，可调用此接口显式刷新布局）
    void refreshLayout();

官方例子的源码中，水平和垂直方向的间距是在构造函数中设置的，一旦布局完成就无法修改了。

如果我们在窗体resize后需要重新调整这些间距就没办法了，所以我新增调整水平/垂直方向间距的单独接口void setHorizontalSpacing(int hSpacing)和void setVerticalSpacing(int vSpacing)，但是这两个接口调整间距后是无法立即生效的！需要手动刷新一下布局，让它按照最新的间距重新布局！

立即重新刷新布局的方法是调用“doLayout(this->geometry(), false)” ，由于入参需要该布局的尺寸信息且该函数是私有的，所以需要封装一下给外部调用，于是我新增void refreshLayout()函数来封装。

使用例子：

总结：

1.如果没有搜索、过滤，实时排序等高级要求，且子项顺序相对固定不变，那就直接使用轻巧的FlowLayout；

2.如果需要支持实时的搜索、过滤、指定位置插入子项、排序、选中、拖拽交互两个项位置、数据量大且要索引访问等高级功能，建议使用QListView或者QListWidget；

难搞哦~

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Qt实现水平方向（横向）流式布局FlowLayout简单又实用！提供2种最有用的方法！

如果没有搜索过滤，实时排序等高能要求，相对固定的顺序，直接使用轻巧的FlowLayout；如果需要支持实时的搜索、过滤、指定插入、实时排序、选中、拖拽交互两个项位置、数据量大且要索引访问等高级功能，建议使用QListView或者QListWidget；
复制链接

扫一扫