Flutter 实现下拉刷新上拉加载的示例代码

Flutter 实现下拉刷新上拉加载的示例代码,第1张

概述Flutter 实现下拉刷新上拉加载的示例代码 本文介绍了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 = [" ...

本文介绍了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

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

总结

以上是内存溢出为你收集整理的Flutter 实现下拉刷新上拉加载的示例代码全部内容,希望文章能够帮你解决Flutter 实现下拉刷新上拉加载的示例代码所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/1144258.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-05-31
下一篇2022-05-31

发表评论

登录后才能评论

评论列表(0条)

    保存