一、下拉刷新组件

使用 Flutter 提供的 RefreshIndicator 组件 , 可以实现下拉刷新的功能 ;

使用 RefreshIndicator 组件包裹 ListView 组件 ;

在 RefreshIndicator 构造函数中 , 设置 onRefresh 参数 , 为其设置其下拉刷新回调事件 , 当用户下拉刷新时 , 会回调该方法 ;

onRefresh 参数原型如下 , 是一个 RefreshCallback 类型的对象 ;

final RefreshCallback onRefresh;

RefreshCallback 类型是一个返回值为 Future 的方法 ;

typedef RefreshCallback = Future<void> Function();

RefreshIndicator 构造函数原型 :

/// The signature for a function that's called when the user has dragged a
/// [RefreshIndicator] far enough to demonstrate that they want the app to
/// refresh. The returned [Future] must complete when the refresh operation is
/// finished.
///
/// Used by [RefreshIndicator.onRefresh].
typedef RefreshCallback = Future<void> Function();class RefreshIndicator extends StatefulWidget {const RefreshIndicator({Key? key,required this.child,this.displacement = 40.0,this.edgeOffset = 0.0,required this.onRefresh,this.color,this.backgroundColor,this.notificationPredicate = defaultScrollNotificationPredicate,this.semanticsLabel,this.semanticsValue,this.strokeWidth = 2.0,this.triggerMode = RefreshIndicatorTriggerMode.onEdge,})/// A function that's called when the user has dragged the refresh indicator/// far enough to demonstrate that they want the app to refresh. The returned/// [Future] must complete when the refresh operation is finished.final RefreshCallback onRefresh;
}

二、下拉刷新代码示例

import 'package:flutter/material.dart';var NAMES = [ '宋江', '卢俊义', '吴用', '公孙胜', '关胜','林冲', '秦明', '呼延灼', '花荣', '柴进','李应', '朱仝', '鲁智深', '武松', '董平','张清', '杨志', '徐宁', '索超', '岱宗','刘唐', '李逵', '史进', '穆弘' '雷横' ];/// ListView 垂直列表 , RefreshIndicator  下拉刷新
void main() {runApp(MyApp());
}class MyApp extends StatefulWidget {const MyApp({Key? key}) : super(key: key);@override_MyAppState createState() => _MyAppState();
}class _MyAppState extends State<MyApp> {@overrideWidget build(BuildContext context) {/// 材料设计主题return MaterialApp(home: Scaffold(appBar: AppBar(/// 标题组件title: Text("ListView 示例"),),/// 列表组件body: RefreshIndicator(onRefresh: _onRefresh,child: ListView(children: _buildList(),),),),);}/// 下拉刷新回调方法Future<Null> _onRefresh() async {/// 强制休眠 1 秒await Future.delayed(Duration(seconds: 1));/// 更新状态setState(() {/// 将 List 元素翻转NAMES = NAMES.reversed.toList();});return null;}/// 创建列表List<Widget> _buildList(){/// 遍历 NAMES 数组/// 调用 map 方法遍历数组元素return NAMES.map((name) => _generateWidget(name)).toList();}Widget _generateWidget(name){return Container(height: 80,margin: EdgeInsets.only(bottom: 5),alignment: Alignment.center,decoration: BoxDecoration(color: Colors.black),child: Text(name,style: TextStyle(color: Colors.yellowAccent,fontSize: 20),),);}
}

执行结果 :

三、相关资源

参考资料 :

Flutter 官网 : https://flutter.dev/
Flutter 插件下载地址 : https://pub.dev/packages
Flutter 开发文档 : https://flutter.cn/docs ( 强烈推荐 )
官方 GitHub 地址 : https://github.com/flutter
Flutter 中文社区 : https://flutter.cn/
Flutter 实用教程 : https://flutter.cn/docs/cookbook
Flutter CodeLab : https://codelabs.flutter-io.cn/
Dart 中文文档 : https://dart.cn/
Dart 开发者官网 : https://api.dart.dev/
Flutter 中文网 : https://flutterchina.club/ , http://flutter.axuer.com/docs/
Flutter 相关问题 : https://flutterchina.club/faq/ ( 入门阶段推荐看一遍 )
GitHub 上的 Flutter 开源示例 : https://download.csdn.net/download/han1202012/15989510
Flutter 实战电子书 : https://book.flutterchina.club/chapter1/
Dart 语言练习网站 : https://dartpad.dartlang.org/

重要的专题 :

Flutter 动画参考文档 : https://flutterchina.club/animations/

博客源码下载 :

GitHub 地址 : https://github.com/han1202012/flutter_listview ( 随博客进度一直更新 , 有可能没有本博客的源码 )
博客源码快照 : https://download.csdn.net/download/han1202012/21601609 ( 本篇博客的源码快照 , 可以找到本博客的源码 )

【Flutter】ListView 列表高级功能 ( RefreshIndicator 下拉刷新组件 )相关推荐

【Flutter】ListView 列表高级功能 ( ScrollController 上拉加载更多 )
文章目录一.ScrollController 上拉加载更多二.ScrollController 使用流程三.ScrollController 判定滑动到底部四.完整代码示例五.相关资源一. ...
Flutter RefreshIndicator 下拉刷新组件 Material 风格的刷新效果
题记 -- 优美的应用体验来自于细节的处理,更源自于码农的自我要求与努力,当然也需要码农年轻灵活的思维. 盘点Flutter跨平台APP开发中使用到的进度条 Flutter是谷歌推出的最新的移动开发 ...
[ vant ] vue移动端下拉刷新组件
学习关键语句: vant list组件和下拉刷新 vant 下拉刷新和局部滚动冲突写在前面每一次 ! 我是说每一次我在使用 vant 组件库里面 list组件和下拉刷新连在一起用的时候都会出现下 ...
android下拉刷新动画效果代码_vue项目实录：下拉刷新组件的开发及slot的使用
"下拉刷新"和"上滑加载更多"功能在前端.尤其是移动端项目中非常重要,这里笔者由曾经做过的vue项目中的"blink"功能和各位探讨下[下拉 ...
Google官方下拉刷新组件---SwipeRefreshLayout
今天在Google+上看到了SwipeRefreshLayout这个名词,遂搜索了下,发现竟然是刚刚google更新sdk新增加的一个widget,于是赶紧抢先体验学习下. SwipeRefreshL ...
vue项目实录：下拉刷新组件的开发及slot的使用
"下拉刷新"和"上滑加载更多"功能在前端.尤其是移动端项目中非常重要,这里笔者由曾经做过的vue项目中的"blink"功能和各位探讨下[下拉 ...
swift添加下拉刷新_React Native自定义下拉刷新组件
React Native 自定义下拉刷新组件 PullToRefresh 针对猴急一些的同学,可以先在这个 Expo网站在线运行下demo看看效果 . 完整的代码,在 Github仓库 . 下拉刷新, ...
Mint-ui中loadmore(上拉加载下拉刷新)组件在ios中滑动会触发点击事件的解决方法...
bug说明: Mint-ui中loadmore(上拉加载下拉刷新)组件在使用fastclick的情况下 ,在ios设备中滑动会触发点击事件: 解决方法: 我是按需引入,去项目中找到loadmore ...
php mescroll,mescroll.js上拉加载下拉刷新组件使用详解
本文实例为大家分享了上拉加载下拉刷新组件mescroll.js的具体代码,供大家参考,具体内容如下使用注意事项: 1.引入的时候出问题及时看官方给出的解决方案(基本上都必须看): 2.react中一 ...

【Flutter】ListView 列表高级功能 ( RefreshIndicator 下拉刷新组件 )

文章目录

一、下拉刷新组件

二、下拉刷新代码示例

三、相关资源

【Flutter】ListView 列表高级功能 ( RefreshIndicator 下拉刷新组件 )相关推荐

最新文章

热门文章