写点什么

Flutter 的 staggered GridView 详细使用

用户头像
潘珉
关注
发布于: 2020 年 05 月 26 日

一、简介

flutter staggered gridview是一个支持多列网格大小不同的布局,且Android、iOS、Web都适用

在这种布局中每个单元格都可以称为一个Tile。

它有以下几种特性:

  • 可以像GridView一样设置多列

  • 在纵轴和主轴上可以设置Tile的个数或者所占用的比例(如crossAxisCount:4,StaggeredTile.fit(2)则表示在纵轴上有两列,如果StaggeredTile.fit(1)则表示在纵轴上有4列,如果使用StaggeredTile.Count(2,index==0?2.5:3)则表示纵轴有两列并且主轴方向上第一个Tile的大小其他Tile高度的2.5比3)

  • 可以设置Tile间的行间距和列间距

  • 能够在CustomScollerView内使用(可以用shrinkWrap:true,以及ScrollerController关联两个Widget)

  • Tile能够在主轴方向上自适应高度(这是比GridView好的地方,不用设置宽高比,不担心溢出)



二、使用

2.1、pubspec.yaml添加依赖

dependencies:
flutter_staggered_grid_view:



2.2、导包

import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart’;



2.3、6种创建方式

区别:

  • StaggeredGridView.countStaggeredGridView.extent,前者创建了一个纵轴方向固定Tile个数的布局,后者只是在纵轴方法指定了一个Tile个数的最大值,这两种都是适合子Widget个数比较少的情况,都是List<Widget>来设置

  • StaggeredGridView.countBuilderStaggeredGridView.extentBuild,这两个跟上面的含义差不多,区别在于适合子Widget数量比较多的需要动态创建的情况

  • 更高级的还有StaggeredGridView.builderStaggeredGridView.custom,区别在于创建的方式不同,而且也更加灵活

2.4、StaggeredTile的使用

  • StaggeredTile.count:固定纵轴和主轴上的数量

  • StaggeredTile.extent:纵轴上的数量和主轴上的最大范围

  • StaggeredTile.fit:纵轴上的数量



StaggeredGridView有几列是由crossAxisCount除以StaggeredTile设置上的纵轴的数量的结果。



三、应用场景

3.1、无法确定GridView中的item的高度,所以无法设置宽高比,这种情况可以使用StaggeredGridView来自动适配高度

StaggeredGridView.countBuilder(
shrinkWrap: true,
controller: _scrollController,
crossAxisCount: 4,
crossAxisSpacing: 4,
mainAxisSpacing: 10,
itemCount: _count,
itemBuilder: (context, index) {
return Container(
color: Colors.green,
child: new Center(
child: new CircleAvatar(
backgroundColor: Colors.white,
child: new Text('$index'),
),
));
},
staggeredTileBuilder: (index) =>
StaggeredTile.fit(2))



3.2、瀑布流样式

StaggeredGridView.countBuilder(
shrinkWrap: true,
controller: _scrollController,
crossAxisCount: 4,
crossAxisSpacing: 4,
mainAxisSpacing: 10,
itemCount: _count,
itemBuilder: (context, index) {
return Container(
color: Colors.green,
child: new Center(
child: new CircleAvatar(
backgroundColor: Colors.white,
child: new Text('$index'),
),
));
},
staggeredTileBuilder: (index) =>
StaggeredTile.count(2, index == 0 ? 2.5 : 3))



3.3、配合RefreshIndicator实现下拉刷新

CustomScrollView(
controller: _scrollController,
slivers: <Widget>[
SliverToBoxAdapter(
child: RefreshIndicator(
onRefresh: () async {
await Future.delayed(Duration(seconds: 5));
},
child: StaggeredGridView.countBuilder(
shrinkWrap: true,
controller: _scrollController,
crossAxisCount: 4,
crossAxisSpacing: 4,
mainAxisSpacing: 10,
itemCount: _count,
itemBuilder: (context, index) {
return Container(
color: Colors.green,
child: new Center(
child: new CircleAvatar(
backgroundColor: Colors.white,
child: new Text('$index'),
),
));
},
staggeredTileBuilder: (index) =>
StaggeredTile.count(2, index == 0 ? 2.5 : 3)),
),
),
],
))



四、常见问题总结(持续更新)



4.1、嵌套CustomScrollView使用时无法滑动



1、升级StaggeredGridView的版本,据说0.3.0以上版本已经解决



2、StaggeredGridView设置shrinkWrap:true



发布于: 2020 年 05 月 26 日阅读数: 274
用户头像

潘珉

关注

还未添加个人签名 2019.08.21 加入

还未添加个人简介

评论 (1 条评论)

发布
用户头像
内容干货。不过好像不怎么爱用 。号 ?
2020 年 05 月 26 日 14:13
回复
没有更多了
Flutter的staggered GridView详细使用