如何在Flutter中实现类似Google Keep/Photos的动态子部件高度布局？

Wrap组件本身的逻辑是每行高度由该行内最高的子元素决定，所以当子组件高度不一致时，矮组件下方必然会出现空白，这没法满足你要的类似Google Keep/Photos的瀑布流紧密排列需求。

推荐用flutter_staggered_grid_view这个第三方包来实现，它专门处理这种动态高度的网格布局，能自动填充空隙，让元素紧密排列。

步骤1：添加依赖 #

在pubspec.yaml里添加：

dependencies:
  flutter_staggered_grid_view: ^0.6.7

然后执行flutter pub get安装依赖。

步骤2：示例代码 #

用StaggeredGridView.count来实现，子组件高度可以动态设置：

import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

class StaggeredLayoutDemo extends StatelessWidget {
  // 模拟动态高度的数据
  final List<int> itemHeights = [150, 200, 120, 250, 180, 160];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('瀑布流布局示例')),
      body: StaggeredGridView.count(
        crossAxisCount: 2, // 列数
        crossAxisSpacing: 8, // 列间距
        mainAxisSpacing: 8, // 同列相邻元素的间距
        staggeredTiles: itemHeights.map((height) {
          return StaggeredTile.fit(1); // 每个元素占1列宽度
        }).toList(),
        children: itemHeights.map((height) {
          return Container(
            color: Colors.blue[100 + itemHeights.indexOf(height)*100],
            height: height.toDouble(),
            child: Center(child: Text('高度$height')),
          );
        }).toList(),
      ),
    );
  }
}

如果需要更灵活的宽度控制，比如部分元素占2列宽度，可以用StaggeredTile.count(2, heightRatio)来配置，其中heightRatio是高度相对于宽度的比例，也可以结合实际需求直接指定高度。

自定义方案（不依赖第三方包） #

如果不想用第三方包，可以自定义SliverGridDelegate来实现瀑布流逻辑，但需要自己处理子组件的位置计算，复杂度较高，对于大多数场景来说，第三方包已经足够好用。

内容的提问来源于stack exchange，提问作者ChandraKumar