文章目录
一、下拉刷新组件二、下拉刷新代码示例三、相关资源一、下拉刷新组件
使用 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/packagesFlutter 开发文档 :/docs( 强烈推荐 )官方 GitHub 地址: /flutterFlutter 中文社区 :/Flutter 实用教程 :/docs/cookbookFlutter CodeLab :https://codelabs.flutter-/Dart 中文文档 :/Dart 开发者官网 :https://api.dart.dev/Flutter 中文网 :https://flutterchina.club/ , /docs/Flutter 相关问题 :https://flutterchina.club/faq/ ( 入门阶段推荐看一遍 )GitHub 上的 Flutter 开源示例 :/download/han120/15989510Flutter 实战电子书 :https://book.flutterchina.club/chapter1/Dart 语言练习网站 :/
重要的专题 :
Flutter 动画参考文档 :https://flutterchina.club/animations/
博客源码下载 :
GitHub 地址 :/han120/flutter_listview ( 随博客进度一直更新 , 有可能没有本博客的源码 )
博客源码快照 :/download/han120/21601609 ( 本篇博客的源码快照 , 可以找到本博客的源码 )
