flutter_staggered_grid_view 0.6.1版本的实现+超级详细的注解（包括瀑布流的实现）

来源：6-6 基于StaggeredGridView封装首页双Feed列表

Cloud_Iris

2022-07-27

本文是关于flutter_staggered_grid_view 0.6.1版本的实现的一种可行方式。个人认为最好是使用 StaggeredGrid.count 嵌套 StaggeredGridTile.fit 的方式实现。因为我们自己设定了各个组件的尺寸（轮播图和视频卡片），所以最好是用自适应的方式来实现。当然，用 StaggeredGrid.count 嵌套 StaggeredGridTile.count 的方式实现也是没有问题的。

本文参考了之前两位前辈提出的方案，对两种方案做出比较，并阅读了相关代码的英文说明，做出以下笔记。
下面是一个带有详细注解+实现了瀑布流的参考代码，祝各位同学食用愉快~

@override
  Widget build(BuildContext context) {
    /// ListView 和 GridView 有自带的默认内边距，所以需要去掉上面的内边距
    /// 这样，轮播图和 HomePage 的 tab级别页面 切换栏 的距离仅由
    /// 我们自己在 SingleChildScrollView 中定义，以及HomePage 的 tab级别页面 切换栏的外层容器Container的边距
    return MediaQuery.removePadding(
      context: context,
      removeTop: true,
      child: Container(
        child: SingleChildScrollView(
          /// 滚动控制器实现瀑布流
          controller: _scrollController,
          /// 默认行为是，当列表高度不足以占满屏幕的时候，下拉刷新和瀑布流均失效
          /// 所以这里应该设置  始终允许刷新
          physics: const AlwaysScrollableScrollPhysics(),
          padding: EdgeInsets.only(top: 10, left: 10, right: 10),
          /// VERY IMPOARTANT
          /// 引入插件 StaggeredGrid(0.6.1) 的使用
          child: StaggeredGrid.count(
            crossAxisCount: 2,
            /// 列表滚动方向 默认向下
            axisDirection: AxisDirection.down,
            /// 由于选择了向下的列表方向，所以主轴上 item 间距是指 垂直方向上的边距
            mainAxisSpacing: 4,
            /// 由于选择了向下的列表方向，所以辅轴上 item 间距是指 水平方向上的边距
            crossAxisSpacing: 4,
            children: [
              /// VERY IMPOARTANT  StaggeredGridTile.fit
              /// 是指 不指定主轴方向该item占用的 单元格数目，而是由它自己设定的高度撑开
              /// Creates a [StaggeredGrid]'s tile that fits its main axis extent to its [child]'s content

              /// 如果存在banner，则 第一个item位置显示banner (HomePage 的 tab级别页面 切换栏)
              if (widget.bannerList != null) StaggeredGridTile.fit(
                  crossAxisCellCount: 2,
                  child: _banner()
              ),

              ...videoList.map((VideoModel videoModel){
                return StaggeredGridTile.fit(
                  crossAxisCellCount: 1,
                  child: VideoCard(videoModel: videoModel,),
                );
              }),

            ],
            
          ),
        ),
      )
    );
  }