Flutter自适应瀑布流

在Flutter中创建自适应瀑布流布局，可以使用StaggeredGridView这个第三方包。以下是一个简单的使用示例：

首先，在你的pubspec.yaml文件中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  staggered_grid_view: ^0.3.0

然后，你可以使用StaggeredGridView.count来创建自适应瀑布流。

import 'package:flutter/material.dart';
import 'package:staggered_grid_view/staggered_grid_view.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Staggered Grid View Example'),
        ),
        body: StaggeredGridView.count(
          crossAxisCount: 4,
          mainAxisSpacing: 4.0,
          crossAxisSpacing: 4.0,
          padding: const EdgeInsets.all(4),
          children: <Widget>[
            // 生成多个Item，每个Item是一个StaggeredGridView的格子
            // 格子内部可以填充不同高度的颜色、图片或其他Widget
            for (int i = 0; i < 10; i++)
              StaggeredGridView.countBuilder(
                itemCount: 10,
                itemBuilder: (BuildContext context, int index) => Container(
                  color: Colors.primaries[index % Colors.primaries.length],
                  child: Center(
                    child: Text(
                      '${index + 1}',
                      style: Theme.of(context).textTheme.headline,
                    ),
                  ),
                ),
                staggeredTileBuilder: (int index) =>
                    new StaggeredTile.count(2, index % 3),
                mainAxisSpacing: 4.0,
                crossAxisSpacing: 4.0,
                padding: const EdgeInsets.all(4),
              ),
          ],
        ),
      ),
    );
  }
}

在这个例子中，StaggeredGridView.countBuilder用于创建带有自适应大小格子的瀑布流。通过itemCount和itemBuilder属性来定义格子的内容，通过staggeredTileBuilder来定义格子的大小。mainAxisSpacing和crossAxisSpacing定义了主轴和交叉轴方向上的间隔，而padding定义了边缘填充。

这个例子中的瀑布流使用了固定的10个格子，但在实际应用中，你可以根据需要动态生成格