作者:jb51 来源:脚本之家 时间:2020-01-26 03:37:18 我要评论

本文介绍了Flutter 实现下拉刷新上拉加载的示例代码,分享给大家,具体如下:

 

使用方法

添加依赖

  dependencies:   pull_to_refresh: ^1.5.7

导入包

  import 'package:pull_to_refresh/pull_to_refresh.dart';

页面代码样例

  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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

38阅读 | 0评论
你的回应
写文章

联系我们