本文介绍了Flutter 实现下拉刷新上拉加载的示例代码,分享给大家,具体如下:
使用方法
添加依赖
1
2
|
dependencies: pull_to_refresh: ^1.5.7 |
导入包
1
|
import 'package:pull_to_refresh/pull_to_refresh.dart' ; |
页面代码样例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
class _MyHomePageState extends State<MyHomePage> { List<String> items = [ "1" , "2" , "3" , "4" , "5" , "6" , "7" , "8" ]; RefreshController _refreshController = RefreshController(initialRefresh: false ); void _onRefresh() async { // monitor network fetch await Future.delayed(Duration(milliseconds: 1000 )); // if failed,use refreshFailed() _refreshController.refreshCompleted(); } void _onLoading() async { // monitor network fetch await Future.delayed(Duration(milliseconds: 1000 )); // if failed,use loadFailed(),if no data return,use LoadNodata() items.add((items.length + 1 ).toString()); if (mounted) setState(() {}); _refreshController.loadComplete(); } @override Widget build(BuildContext context) { return Scaffold( body: SmartRefresher( enablePullDown: true , enablePullUp: true , header: WaterDropHeader(), footer: CustomFooter( builder: (BuildContext context, LoadStatus mode) { Widget body; if (mode == LoadStatus.idle) { body = Text( "pull up load" ); } else if (mode == LoadStatus.loading) { body = CircularProgressIndicator(); } else if (mode == LoadStatus.failed) { body = Text( "Load Failed!Click retry!" ); } else if (mode == LoadStatus.canLoading) { body = Text( "release to load more" ); } else { body = Text( "No more Data" ); } return Container( height: 55.0 , child: Center(child: body), ); }, ), controller: _refreshController, onRefresh: _onRefresh, onLoading: _onLoading, child: ListView.builder( itemBuilder: (c, i) => Card(child: Center(child: Text(items[i]))), itemExtent: 100.0 , itemCount: items.length, ), ), ); } } |
完整源代码
https://gitee.com/cxyzy1/flutter_pulldown_refresh
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。
原文链接:https://juejin.im/post/5de5becdf265da05de588214