Flutter 瀑布流 带header

仿【闲鱼】首页做的瀑布流+顶部Header效果

IMG_5473.jpg
需要使用第三方组件：

// https://pub.dev/packages/flutter_staggered_grid_view
flutter_staggered_grid_view: ^0.7.0

瀑布流效果

61621701760118_.pic.jpg
全部代码

// 使用CustomScrollView 可以避免一次性全部绘制问题
CustomScrollView(
  slivers: [
    // 可以无限设置顶部header
    SliverToBoxAdapter(
      child: Image.network(
        ImageUtil.testImageH,
        fit: BoxFit.cover,
      ),
    ),
    // 瀑布流
    SliverMasonryGrid.count(
      // 每排显示两个
      crossAxisCount: 2,
      // 设置间距
      mainAxisSpacing: 10,
      crossAxisSpacing: 10,
      childCount: 20,
      itemBuilder: (context, index) {
        // item
        return Container(
            // 随机高度
            height: Random().nextInt(256).toDouble(),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10),
              // 随机颜色
              color: Color.fromARGB(
                  Random().nextInt(256),
                  Random().nextInt(256),
                  Random().nextInt(256),
                  Random().nextInt(256)),
            ),
            child: Center(
              child: Text("Test：$index"),
            ));
      },
    ),
  ],
)

之前见过一种ListView嵌套的，ListView 这种只有两个item（一个header，一个不瀑布流的GradView） 会导致一次性全部绘制出瀑布流列表，不建议使用这种嵌套

END