Qt 的流式布局 FlowLayout

一直苦寻于一个比较智能的布局方式，能够满足软件界面进行resize的时候，对已经存在的布局进行重新布局。能够合理的判断界面的size,在界面放大的时候，显示的item的行数减少，相反，界面缩小的时候，显示的 item 行数能相应的增加，也就是能够满足界面是充盈的并且不会有超出界面的显示 item。

而我们已知的在Qt中已有的几种布局方式，都没办法直接达到我们的预期。比较接近的是栅格布局，但也要进行二次开发才能满足需求。

1、 利用栅格布局和 QScrollArea 实现类似的流式布局

这种方式比较适合每个 item size 相同的情况，实现的原理也就是在调用 resizeEvent() 函数的以后，对界面已经存在的 item 先全部移除，再重新添加。

测试的时候发现，如果每个 item 的 size 不做限制，可能不同列的 item 宽度会存在不一样的情况，但至少每列的 item 均是一样大小。

如下，首先我们 new 一个 QGridLayout , 当然这种方式可以通过在 Qt designer 直接拖的方式创建，我这样做是因为我是直接在 Qt FlowLayout 的例子中做了测试，方便后面切换成 FlowLayout 。

QGridLayout* layout = new QGridLayout;
ui->scrollAreaWidgetContents->setLayout(layout);
QStringList list{"Short", "Longer", "Different text", "More text", "Even longer button text" };

for(auto& t : list)
{
    auto btn = new QPushButton(t);
    layout->addWidget(btn);
    m_list.push_back(btn);
}

接下来就是如何在调用 resizeEvent 函数的时候对界面上的 item 重新布局。

首先就是计算出当前的界面最多能放几列。我下面直接用了一个固定的值，实际使用的时候，如果所有的 item 是固定大小的，则直接使用固定大小的宽度即可。

接下来就是先将界面上所有的 item 移除，然后再根据重新计算的数值将所有的 item 再次添加，为了方便，我用了一个 QPoint 类型的变量来记录当前是栅格布局的某个栅格。

void Window::resizeEvent(QResizeEvent *event)
{
    int column = event->size().width() / 100;

	auto layout = ui->scrollAreaWidgetContents->layout();
    for (int index = 0, size = layout ->count(); index < size ; ++index)
    {
        auto btn = layout ->itemAt(index)->widget();
        layout ->removeWidget(btn);
    }

    QPoint pt(0, 0);
    for (auto& btn : m_list)
    {
        if(pt.y() == column)
        {
            pt.setX(pt.x() + 1);
            pt.setY(0);
        }

        static_cast<QGridLayout*>(layout)->addWidget(btn, pt.x(), pt.y());
        pt.setY(pt.y() + 1);
    }
}

这种方法在布局 item 是等大的时候比较有效。

2、使用 Qt 给的例子 Flowlayout

Qt 提供了一个 FlowLayout 的例子，但是并没有将其收录进模块，而是以源码的形式直接给出了可运行测试的例子程序。该类继承自 QLayout。

class FlowLayout : public QLayout
{
public:
	explicit FlowLayout(QWidget *parent, int margin = -1, int hSpacing = -1, int vSpacing = -1);
	explicit FlowLayout(int left, int top, int right, int bottom, int hSpacing = -1, int vSpacing = -1);
	explicit FlowLayout(int margin = -1, int hSpacing = -1, int vSpacing = -1);
	~FlowLayout();

    void addItem(QLayoutItem *item) override;
	void setSpacing(int hSpacing = -1, int vSpacing = -1);
	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;

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

通过重载的方式，实现部分成员函数，最后再通过调用 doLayout(const QRect &rect, bool testOnly) 成员函数实现布局显示。

因此，该类的主要功能集中在该函数中。

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;

	QLayoutItem *item = nullptr;
	foreach(item, m_itemList) 
	{
		QSize sizeItemHint(item->sizeHint());
		if (item == m_itemList.last())
		{
			sizeItemHint = QSize(qMax(m_minimumSize.width(), sizeItemHint.width()), qMax(m_minimumSize.height(), sizeItemHint.height()));
		}

		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);
		}
		
		int nextX = x + sizeItemHint.width() + spaceX;
		if (nextX - spaceX > effectiveRect.right() && lineHeight > 0) 
		{
			x = effectiveRect.x();
			y = y + lineHeight + spaceY;
			nextX = x + sizeItemHint.width() + spaceX;
			lineHeight = 0;
		}

		if (!testOnly)
		{
			item->setGeometry(QRect(QPoint(x, y), sizeItemHint));
		}

		x = nextX;
		lineHeight = qMax(lineHeight, sizeItemHint.height());
	}

	return y + lineHeight - rect.y() + bottom;
}

函数功能，主要是：通过遍历item list， 计算每个 item 绘制的坐标，如果矩形的剩余长度不够 item widget 的长度及两个控件中间的间距，则将 item widget 的 x 坐标设为矩形的起始，也就是另起一行。另起一行之后则需要考虑 item widget 所处的 y 坐标，最后通过取当前 item 的高度和 lineHeight 的较大值， lineHeight = qMax(lineHeight, sizeItemHint.height()); 得到每行的固定高度。

使用也是比较简单。

1、可以通过定义成员变量的方式

这样通过定义成员变量的方式，会方便后续对布局内的 widget 进行操作，比如如下：

m_layout = new FlowLayout(this);
m_layout->setMargin(0);
m_layout->setSpacing(10, 10);
ui->wdgCard->setLayout(m_layout);

使用时：

auto ptr = new XXXX(this);
m_layout->addWidget(ptr);

...

for(int index = 0, size = m_layout->size(); index < size; ++index)
{
    auto ptr = static_cast<XXXX*>(m_layout->item(index)->widget());
    ...
}

2、使用 Qt 给的例子 Flowlayout

auto layout = new FlowLayout(this);
layout->setMargin(0);
layout->setSpacing(10, 10);
ui->wdgCard->setLayout(layout);

使用时：

auto ptr = new XXXX(this);
ui->wdgCard->layout()->addWidget(ptr);
...
while (ui->wdgCard->layout()->count())
{
	auto ptr = ui->wdgCard->layout()->itemAt(0)->widget();
	ui->wdgCard->layout()->removeWidget(wdg);
	wdg->deleteLater();
}

FlowLayout源码