一，概述
RefreshIndicator是Flutter基于Material设计语言内置的控件，集合了下拉手势、加载指示器和刷新操作一体，可玩性比FutureBuilder差了一大截，不过大家也用过Material设计语言的其他控件，视觉效果也不赖的。
要实现拉刷新列表的功能仅仅依靠RefreshIndicator还不行，我们还需要ScrollController对ListView的移动偏移量进行监控。
二，两个重要的组件
- RefreshIndicator
- 构造函数
/** * 下拉刷新组件 *const RefreshIndicator ({ Key key, @required this.child, this.displacement: 40.0, //触发下拉刷新的距离 @required this.onRefresh, //下拉回调方法,方法需要有async和await关键字，没有await，刷新图标立马消失，没有async，刷新图标不会消失 this.color, //进度指示器前景色 默认为系统主题色 this.backgroundColor, //背景色 this.notificationPredicate: defaultScrollNotificationPredicate, }) */
- 构造函数
注意：
-
-
- RefreshIndicator的子元素必须是一个可以滚动的控件
- 如果你遇到不符合条件的控件，请将其用可以滚动的控件（如ListView、PageView等）包装一下
onRefresh的回调函数必须是Future<Null>类型
-
- ScrollController
- 构造函数
ScrollController({ double initialScrollOffset = 0.0, //初始滚动位置 this.keepScrollOffset = true,//是否保存滚动位置 ... })
-
属性和方法
- offset：可滚动Widget当前滚动的位置。
- jumpTo(double offset)、animateTo(double offset,...)：这两个方法用于跳转到指定的位置，它们不同之处在于，后者在跳转时会执行一个动画，而前者不会。
-
滚动监听(addListener(listener))
ScrollController间接继承自Listenable，我们可以根据ScrollController来监听滚动事件。如：
controller.addListener(()=>print(controller.offset))
-
滚动位置恢复(keepScrollOffset,initialScrollOffset)
PageStorage是一个用于保存页面(路由)相关数据的Widget，它并不会影响子树的UI外观，其实，PageStorage是一个功能型Widget，它拥有一个存储桶（bucket），子树中的Widget可以通过指定不同的PageStorageKey来存储各自的数据或状态。
每次滚动结束，Scrollable Widget都会将滚动位置offset存储到PageStorage中，当Scrollable Widget 重新创建时再恢复。如果ScrollController.keepScrollOffset为false，则滚动位置将不会被存储，Scrollable Widget重新创建时会使用ScrollController.initialScrollOffset；ScrollController.keepScrollOffset为true时，Scrollable Widget在第一次创建时，会滚动到initialScrollOffset处，因为这时还没有存储过滚动位置。在接下来的滚动中就会存储、恢复滚动位置，而initialScrollOffset会被忽略。
-
滚动监听
Flutter Widget树中子Widget可以通过发送通知（Notification）与父(包括祖先)Widget通信。父Widget可以通过NotificationListener Widget来监听自己关注的通知，这种通信方式类似于Web开发中浏览器的事件冒泡，我们在Flutter中沿用“冒泡”这个术语。Scrollable Widget在滚动时会发送ScrollNotification类型的通知，ScrollBar正是通过监听滚动通知来实现的。通过NotificationListener监听滚动事件和通过ScrollController有两个主要的不同：
- 通过NotificationListener可以在从Scrollable Widget到Widget树根之间任意位置都能监听。而ScrollController只能和具体的Scrollable Widget关联后才可以。
- 收到滚动事件后获得的信息不同；NotificationListener在收到滚动事件时，通知中会携带当前滚动位置和ViewPort的一些信息，而ScrollController只能获取当前滚动位置。
NotificationListener
NotificationListener是一个Widget，模板参数T是想监听的通知类型，如果省略，则所有类型通知都会被监听，如果指定特定类型，则只有该类型的通知会被监听。NotificationListener需要一个onNotification回调函数，用于实现监听处理逻辑，该回调可以返回一个布尔值，代表是否阻止该事件继续向上冒泡，如果为true时，则冒泡终止，事件停止向上传播，如果不返回或者返回值为false 时，则冒泡继续。
- 构造函数
-
-
ScrollController控制原理
我们来介绍一下ScrollController的另外三个方法：
ScrollPosition createScrollPosition( ScrollPhysics physics, ScrollContext context, ScrollPosition oldPosition ); void attach(ScrollPosition position) ; void detach(ScrollPosition position) ;
当ScrollController和Scrollable Widget关联时，Scrollable Widget首先会调用ScrollController的createScrollPosition()方法来创建一个ScrollPosition来存储滚动位置信息，接着，Scrollable Widget会调用attach()方法，将创建的ScrollPosition添加到ScrollController的positions属性中，这一步称为“注册位置”，只有注册后animateTo() 和 jumpTo()才可以被调用。当Scrollable Widget销毁时，会调用ScrollController的detach()方法，将其ScrollPosition对象从ScrollController的positions属性中移除，这一步称为“注销位置”，注销后animateTo() 和 jumpTo() 将不能再被调用。
需要注意的是，ScrollController的animateTo() 和 jumpTo()内部会调用所有ScrollPosition的animateTo() 和 jumpTo()，以实现所有和该ScrollController关联的Scrollable Widget都滚动到指定的位置。
-
三，下拉加载，上拉刷新实现
class Widget_RefreshIndicator_State extends State<Widget_RefreshIndicator_Page> { var list = []; int page = 0; bool isLoading = false;//是否正在请求新数据 bool showMore = false;//是否显示底部加载中提示 bool offState = false;//是否显示进入页面时的圆形进度条 ScrollController scrollController = ScrollController(); @override void initState() { super.initState(); scrollController.addListener(() { if (scrollController.position.pixels == scrollController.position.maxScrollExtent) { print('滑动到了最底部${scrollController.position.pixels}'); setState(() { showMore = true; }); getMoreData(); } }); getListData(); } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text("RefreshIndicator"), ), body: Stack( children: <Widget>[ RefreshIndicator( child: ListView.builder( controller: scrollController, itemCount: list.length + 1,//列表长度+底部加载中提示 itemBuilder: choiceItemWidget, ), onRefresh: _onRefresh, ), Offstage( offstage: offState, child: Center( child: CircularProgressIndicator(), ), ), ], ) ), ); } @override void dispose() { super.dispose(); //手动停止滑动监听 scrollController.dispose(); } /** * 加载哪个子组件 */ Widget choiceItemWidget(BuildContext context, int position) { if (position < list.length) { return HomeListItem(position, list[position], (position) { debugPrint("点击了第$position条"); }); } else if (showMore) { return showMoreLoadingWidget(); }else{ return null; } } /** * 加载更多提示组件 */ Widget showMoreLoadingWidget() { return Container( height: 50.0, child: Row( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ Text('加载中...', style: TextStyle(fontSize: 16.0),), ], ), ); } /** * 模拟进入页面获取数据 */ void getListData() async { if (isLoading) { return; } setState(() { isLoading = true; }); await Future.delayed(Duration(seconds: 3), () { setState(() { isLoading = false; offState = true; list = List.generate(20, (i) { return ItemInfo("ListView的一行数据$i"); }); }); }); } /** * 模拟到底部加载更多数据 */ void getMoreData() async { if (isLoading) { return; } setState(() { isLoading = true; page++; }); print('上拉刷新开始,page = $page'); await Future.delayed(Duration(seconds: 3), () { setState(() { isLoading = false; showMore = false; list.addAll(List.generate(3, (i) { return ItemInfo("上拉添加ListView的一行数据$i"); })); print('上拉刷新结束,page = $page'); }); }); } /** * 模拟下拉刷新 */ Future < void > _onRefresh() async { if (isLoading) { return; } setState(() { isLoading = true; page = 0; }); print('下拉刷新开始,page = $page'); await Future.delayed(Duration(seconds: 3), () { setState(() { isLoading = false; List tempList = List.generate(3, (i) { return ItemInfo("下拉添加ListView的一行数据$i"); }); tempList.addAll(list); list = tempList; print('下拉刷新结束,page = $page'); }); }); } }