Qt实现的流式布局，20行代码实现

Qt流式布局精简实现

最新推荐文章于 2025-10-14 10:20:41 发布

原创

最新推荐文章于 2025-10-14 10:20:41 发布 · 1.9k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#qt5 #软件开发 #c++

本文介绍了一种在Qt中实现流式布局的简洁方法，利用栅格布局和scrollArea，根据窗口大小动态调整子窗体的排列，代码量少且效果良好。

在我们进行应用程序开发时，流式布局是很常见的一种布局。Qt中自带的布局并没有实现流式布局，因此我们需要自己实现。写之前看了网上几篇流式布局的博客，感觉实现的比较麻烦，代码不够简洁，不太能满足博主的需要，于是决定自己实现,本篇博客中实现的流式布局应该是全网代码量最少的流式布局了，代码比较简单，但是效果还是不错的。
博主在项目中实现的效果如下图所示：
fdfafaf
在这里插入图片描述

思路比较简单：
利用栅格布局和scrollArea，子窗体放在栅格布局中，将栅格布局放入scrollArea，每当窗体大小改变时，重新计算scrollArea每行能放几个子窗体，然后利用addWidget()对栅格布局中的子窗体进行重新排列即可。

代码如下：

template <typename  equ_type>
void UIDemo01::set_flow_layout(int width,int height,int equ_width,QList<equ_type*> equ_list,QGridLayout *gri_lay)
{
   
   

    int col_cnt=width