本文是关于flutter_staggered_grid_view 0.6.1版本的实现的一种可行方式。个人认为最好是使用 StaggeredGrid.count 嵌套 StaggeredGridTile.fit 的方式实现。因为我们自己设定了各个组件的尺寸(轮播图和视频卡片),所以最好是用自适应的方式来实现。当然,用 StaggeredGrid.count 嵌套 StaggeredGridTile.count 的方式实现也是没有问题的。
本文参考了之前两位前辈提出的方案,对两种方案做出比较,并阅读了相关代码的英文说明,做出以下笔记。
下面是一个带有详细注解+实现了瀑布流的参考代码,祝各位同学食用愉快~
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,),
);
}),
],
),
),
)
);
}
一次性掌握Flutter高阶技能+商业级复杂项目架构设计与开发方案
了解课程