功能：
1、下拉加载
2、上拉加载
3、显示加载图标
4、更新列表数据，隐藏加载图标
flutter库：
flutter_spinkit: ^3.1.0 加载图标
其他：加载列表需要列表，基于上一节的flutter 列表展示
细节：
1、列表构造器
a、绑定列表controller // ScrollController scrollController = ScrollController();
b、更新LIST data
2、controller监听是否滑动到底部
@override void initState() { super.initState(); scrollController.addListener(() { if (scrollController.position.pixels == scrollController.position.maxScrollExtent) { print('滑动到了最底部${scrollController.position.pixels}'); setState(() { showMore = true; }); getMoreData(); // 增加点数据 } }); getListData(); // 暂时未使用 } @override void dispose() { super.dispose(); //手动停止滑动监听 scrollController.dispose(); }
3、 RefreshIndicator 刷新组件
new RefreshIndicator( child: isLoading == false // 判断是否正在加载中 ? new ListView.builder( controller: scrollController, itemCount: storyData.length, //列表长度+底部加载中提示 itemBuilder: (BuildContext context, int index) { // 传入MessageData返回列表项 return new StoryItem(storyData[index]); }, ) : new Stack( children: <Widget>[ new Padding( padding: new EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 35.0), child: new Center( child: SpinKitFadingCircle( color: Colors.blueAccent, size: 30.0, ), ), ), new Padding( padding: new EdgeInsets.fromLTRB(0.0, 35.0, 0.0, 0.0), child: new Center( child: new Text('正在加载中，莫着急哦~'), ), ), ], ), onRefresh: _onRefresh) // 刷新
4、部分异步函数
Future<void> _onRefresh() async { if (isLoading) { return; } setState(() { isLoading = true; page = 0; }); print('下拉刷新开始,page = $page'); await Future.delayed(Duration(seconds: 3), () { setState(() { isLoading = false; final arr = new StoryData( 26, 'images/story/03/cover.jpg', 'episode.26', '放课後', '终於可以和自己憧憬的同学自然的说早安。正当爽子正在为这件事感动的时候,这学期代理班导的副班导荒井一市(通称:阿瓶)登场了,阿瓶正想要擅自决定谁来制作出席簿时,不想看到大家困扰的爽子就举起了手…。', []); storyData.add(arr); print('下拉刷新结束,page = $page'); }); }); }
Future<void> getMoreData() async {
print('xx');
if (isLoading) {
return;
}
setState(() {
isLoading = true;
page = 0;
});
print('下拉刷新开始,page = $page');
await Future.delayed(Duration(seconds: 3), () {
setState(() {
isLoading = false;
final arr = new StoryData(
26,
'images/story/03/cover.jpg',
'episode.26',
'放课後',
'终於可以和自己憧憬的同学自然的说早安。正当爽子正在为这件事感动的时候,这学期代理班导的副班导荒井一市(通称:阿瓶)登场了,阿瓶正想要擅自决定谁来制作出席簿时,不想看到大家困扰的爽子就举起了手…。',
[]);
storyData.add(arr);
print('下拉刷新结束,page = $page');
});
});
}
-------------完整code-------------------
story.dart
import 'package:flutter/material.dart'; import 'story_data.dart'; import 'story_item.dart'; import 'package:flutter_spinkit/flutter_spinkit.dart'; void main() => runApp(Story()); class Story extends StatefulWidget { @override _Story createState() => new _Story(); } class _Story extends State<Story> { bool isLoading = false; //是否正在请求新数据 bool showMore = false; //是否显示底部加载中提示 bool offState = false; //是否显示进入页面时的圆形进度条 int page = 0; //暂时用不到 ScrollController scrollController = ScrollController(); Future<void> getMoreData() async {if (isLoading) { return; } setState(() { isLoading = true; }); print('下拉刷新开始,page = $page'); await Future.delayed(Duration(seconds: 3), () { setState(() { isLoading = false; final arr = new StoryData( 26, 'images/story/03/cover.jpg', 'episode.26', '放课後', '终於可以和自己憧憬的同学自然的说早安。正当爽子正在为这件事感动的时候,这学期代理班导的副班导荒井一市(通称:阿瓶)登场了,阿瓶正想要擅自决定谁来制作出席簿时,不想看到大家困扰的爽子就举起了手…。', []); storyData.add(arr); }); }); } void getListData() {} @override void initState() { super.initState(); scrollController.addListener(() { if (scrollController.position.pixels == scrollController.position.maxScrollExtent) { print('滑动到了最底部${scrollController.position.pixels}'); setState(() { showMore = true; }); getMoreData(); // 增加点数据 } }); getListData(); // 暂时未使用 } @override void dispose() { super.dispose(); //手动停止滑动监听 scrollController.dispose(); } @override Widget build(BuildContext context) { // TODO: implement build return Scaffold( body: new RefreshIndicator( child: isLoading == false ? new ListView.builder( controller: scrollController, itemCount: storyData.length, //列表长度+底部加载中提示 itemBuilder: (BuildContext context, int index) { // 传入MessageData返回列表项 return new StoryItem(storyData[index]); }, ) : new Stack( children: <Widget>[ new Padding( padding: new EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 35.0), child: new Center( child: SpinKitFadingCircle( color: Colors.blueAccent, size: 30.0, ), ), ), new Padding( padding: new EdgeInsets.fromLTRB(0.0, 35.0, 0.0, 0.0), child: new Center( child: new Text('正在加载中，莫着急哦~'), ), ), ], ), onRefresh: _onRefresh)); } Future<void> _onRefresh() async { if (isLoading) { return; } setState(() { isLoading = true; }); print('下拉刷新开始,page = $page'); await Future.delayed(Duration(seconds: 3), () { setState(() { isLoading = false; final arr = new StoryData( 26, 'images/story/03/cover.jpg', 'episode.26', '放课後', '终於可以和自己憧憬的同学自然的说早安。正当爽子正在为这件事感动的时候,这学期代理班导的副班导荒井一市(通称:阿瓶)登场了,阿瓶正想要擅自决定谁来制作出席簿时,不想看到大家困扰的爽子就举起了手…。', []); storyData.add(arr); print('下拉刷新结束); }); }); } }
部分截图：
加载完成之后，列表数据会增加相同的数据，这里没有涉及到接口。
今ならできます。
