html瀑布流下拉刷新,Flutter笔记(六)：StaggeredGridView瀑布流+下拉刷新和加载更多...
前言
Flutter中有对应的ListView和GridView但是没有提供瀑布流的展示，这里我们使用现在比较火的瀑布流组件flutter_staggered_grid_view
example_01.png
1、引入组件
这里推荐使用0.3.0版本，github中的文档现在的版本0.2.7版本存在一些bug，当然这个组件在持续的更新中，读者在使用时应该使用最新的稳定版本。
在pubspec.yaml中引入
dependencies:
#...
flutter_staggered_grid_view: "^0.3.0"
点击Packages get获取组件
1.jpg
如果加载失败或者一直提示
Waiting for another flutter command to release the startup lock。。。
解决办法如下：
1、打开flutter的安装目录/bin/cache/
2.jpg
2、删除lockfile文件 。ps:如果显示dart正在运行，请打开任务管理器关闭dart进程
3、重新运行。
2、使用StaggeredGridView
大体就两种方式，一种是传入List另一种是用itemBuilder创建item，默认提供了一下几种方法创建，根据自己的需要选择即可
StaggeredGridView()
StaggeredGridView.builder()
StaggeredGridView.custom()
StaggeredGridView.count()
StaggeredGridView.countBuilder()
StaggeredGridView.extent()
StaggeredGridView.extentBuilder()
这里我们选择使用countBuilder这种模式
StaggeredGridView.countBuilder(
controller: _scrollController, //滚动控制器
padding: EdgeInsets.all(8),
crossAxisCount: 4,
itemCount: _imageList,
itemBuilder: (BuildContext context, int index) => MeiZiItem(), //返回的组件即为每个item。
staggeredTileBuilder: (int index) =>
new StaggeredTile.count(2, index == 0 ? 2.5 : 3), //
mainAxisSpacing: 8.0,
crossAxisSpacing: 8.0,
)
staggeredTileBuilder则决定每个item的宽高。
const StaggeredTile.count(this.crossAxisCellCount, this.mainAxisCellCount)
//crossAxisCellCount:横轴占据的单元数。
//mainAxisCellCount:主轴占用的单元数。
展示如下，ps：我这里设置第一张主轴为2.5其他的为3这样就形成了一个简单的瀑布流样式。
3.jpg
3、下拉刷新
下拉刷新很简单，在flutter中自带了RefreshIndicator
RefreshIndicator(
onRefresh: _onRefresh,
child: StaggeredGridView.countBuilder(
controller: _scrollController,
padding: EdgeInsets.all(8),
crossAxisCount: 4,
itemCount: _imageList,
itemBuilder: (BuildContext context, int index) => MeiZiItem(),
staggeredTileBuilder: (int index) =>
new StaggeredTile.count(2, index == 0 ? 2.5 : 3),
mainAxisSpacing: 8.0,
crossAxisSpacing: 8.0,
),
),
Future _onRefresh() async {
await Future.delayed(Duration(milliseconds: 1500)); //模拟网络请求
setState(() {
_imageList = 10;
});
print("_onRefresh");
}
4、加载更多
flutter中没有自带的加载更多，但是我们可以使用ScrollController实现。
var _scrollController = new ScrollController(initialScrollOffset: 0);
@override
void initState() {
super.initState();
_scrollController.addListener(() {
var px = _scrollController.position.pixels;
if (px == _scrollController.position.maxScrollExtent) {
print("加载更多！");
_onLoadMore();
}
});
}
Future _onLoadMore() async {
setState(() {
_load=2;
});
await await Future.delayed(Duration(milliseconds: 1500)); //模拟网络请求
setState(() {
_imageList = _imageList + 5;
_load=0;
});
print("_onLoadMore");
}
这样就可以实现加载更多功能，但是一般为了更好的体验，我们可以在底部加上加载更多的loading，这里我只是简单的实现了一个，用到了Offstage，一个布局widget，可以控制其子widget的显示和隐藏。loading指示器使用CircularProgressIndicator。
Offstage(
offstage: _load!=2,
child: Center(
child: Container(
child: Row(
children: [
Expanded(
child: Container(
child: SizedBox(
child: CircularProgressIndicator(
strokeWidth: 2,
),
width: 14,
height: 14,
),
alignment: Alignment.centerRight,
margin: EdgeInsets.only(right: 10),
),
),
Expanded(
child: Text("加载更多..."),
)
],
),
padding: EdgeInsets.all(15),
),
),
)
最终呈现效果如下
3.gif
完整代码