下拉刷新与上拉加载 - 鸿蒙Flutter无限滚动列表

概述下拉刷新和上拉加载是移动端应用中常见的交互模式用于实现数据的实时更新和分页加载。Flutter提供了RefreshIndicator组件实现下拉刷新通过ScrollController实现上拉加载更多。下拉刷新RefreshIndicatorRefreshIndicator构造函数RefreshIndicator({Key?key,requiredWidgetchild,// 子组件requiredRefreshCallbackonRefresh,// 刷新回调double displacement40,// 下拉距离Color?color,// 指示器颜色Color?backgroundColor,// 背景颜色double strokeWidth2.0,// 指示器宽度RefreshIndicatorModerefreshIndicatorLayoutDelegateconstDefaultRefreshIndicatorLayoutDelegate(),})基本用法RefreshIndicator(onRefresh:()async{// 执行刷新操作await_loadData();},child:ListView.builder(itemCount:items.length,itemBuilder:(context,index)ListTile(title:Text(items[index])),),)onRefresh回调onRefresh返回一个FutureRefreshIndicator会在Future完成后隐藏刷新指示器Futurevoid_onRefresh()async{// 模拟网络请求awaitFuture.delayed(constDuration(seconds:2));// 更新数据setState((){itemsList.generate(20,(i)刷新后的 Item$i);});}上拉加载更多使用ScrollController实现finalScrollController_controllerScrollController();bool _isLoadingfalse;int _page1;overridevoidinitState(){super.initState();_loadData();_controller.addListener(_scrollListener);}overridevoiddispose(){_controller.dispose();super.dispose();}void_scrollListener(){if(_controller.position.pixels_controller.position.maxScrollExtent-100){_loadMore();}}Futurevoid_loadData()async{setState(()_isLoadingtrue);awaitFuture.delayed(constDuration(seconds:1));setState((){itemsList.generate(20,(i)Item${(_page-1)*20i1});_isLoadingfalse;});}Futurevoid_loadMore()async{if(_isLoading)return;setState(()_isLoadingtrue);_page;awaitFuture.delayed(constDuration(seconds:1));setState((){items.addAll(List.generate(20,(i)Item${(_page-1)*20i1}));_isLoadingfalse;});}加载状态显示在列表末尾显示加载状态ListView.builder(controller:_controller,itemCount:items.length1,itemBuilder:(context,index){if(indexitems.length){return_isLoading?constPadding(padding:EdgeInsets.all(16),child:Center(child:CircularProgressIndicator()),):constPadding(padding:EdgeInsets.all(16),child:Center(child:Text(没有更多数据)),);}returnListTile(title:Text(items[index]));},)无限滚动列表实战完整实现classInfiniteScrollListextendsStatefulWidget{constInfiniteScrollList({super.key});overrideStateInfiniteScrollListcreateState()_InfiniteScrollListState();}class_InfiniteScrollListStateextendsStateInfiniteScrollList{finalScrollController_controllerScrollController();ListString_items[];bool _isLoadingfalse;bool _hasMoretrue;int _page1;overridevoidinitState(){super.initState();_loadData();_controller.addListener(_scrollListener);}overridevoiddispose(){_controller.dispose();super.dispose();}void_scrollListener(){if(!_hasMore||_isLoading)return;if(_controller.position.pixels_controller.position.maxScrollExtent-100){_loadMore();}}Futurevoid_loadData()async{setState(()_isLoadingtrue);awaitFuture.delayed(constDuration(seconds:1));setState((){_itemsList.generate(20,(i)Item${(_page-1)*20i1});_isLoadingfalse;_hasMoretrue;_page1;});}Futurevoid_loadMore()async{if(_isLoading||!_hasMore)return;setState(()_isLoadingtrue);_page;awaitFuture.delayed(constDuration(seconds:1));setState((){if(_page5){_hasMorefalse;}else{_items.addAll(List.generate(20,(i)Item${(_page-1)*20i1}));}_isLoadingfalse;});}overrideWidgetbuild(BuildContextcontext){returnRefreshIndicator(onRefresh:_loadData,child:ListView.builder(controller:_controller,itemCount:_items.length1,itemBuilder:(context,index){if(index_items.length){if(!_hasMore){returnconstPadding(padding:EdgeInsets.all(16),child:Center(child:Text(没有更多数据)),);}return_isLoading?constPadding(padding:EdgeInsets.all(16),child:Center(child:CircularProgressIndicator()),):constSizedBox.shrink();}returnListTile(title:Text(_items[index]));},),);}}自定义下拉刷新自定义RefreshIndicatorclassCustomRefreshIndicatorextendsStatefulWidget{finalWidgetchild;finalFuturevoidFunction()onRefresh;constCustomRefreshIndicator({super.key,requiredthis.child,requiredthis.onRefresh,});overrideStateCustomRefreshIndicatorcreateState()_CustomRefreshIndicatorState();}class_CustomRefreshIndicatorStateextendsStateCustomRefreshIndicator{bool _isRefreshingfalse;Futurevoid_handleRefresh()async{setState(()_isRefreshingtrue);awaitwidget.onRefresh();setState(()_isRefreshingfalse);}overrideWidgetbuild(BuildContextcontext){returnStack(children:[widget.child,if(_isRefreshing)constPositioned(top:0,left:0,right:0,child:LinearProgressIndicator(),),],);}}高级上拉加载使用NotificationListenerNotificationListenerScrollNotification(onNotification:(notification){if(notificationisScrollEndNotificationnotification.metrics.extentAfter100){_loadMore();}returnfalse;},child:ListView.builder(...),)使用第三方库// 推荐使用pull_to_refresh库importpackage:pull_to_refresh/pull_to_refresh.dart;SmartRefresher(controller:_refreshController,onRefresh:_onRefresh,onLoading:_onLoading,child:ListView.builder(...),)性能优化策略防抖处理避免频繁触发加载更多bool _isLoadingfalse;Timer?_debounceTimer;void_scrollListener(){if(_isLoading)return;if(_controller.position.pixels_controller.position.maxScrollExtent-100){_debounceTimer?.cancel();_debounceTimerTimer(constDuration(milliseconds:200),(){_loadMore();});}}预加载在滚动到距离底部一定距离时就开始加载void_scrollListener(){// 在距离底部200像素时开始预加载if(_controller.position.pixels_controller.position.maxScrollExtent-200){_loadMore();}}使用ValueNotifier避免频繁调用setStatefinalValueNotifierbool_isLoadingValueNotifier(false);void_loadMore()async{if(_isLoading.value)return;_isLoading.valuetrue;awaitFuture.delayed(constDuration(seconds:1));_isLoading.valuefalse;}ValueListenableBuilderbool(valueListenable:_isLoading,builder:(context,isLoading,child){returnisLoading?constCircularProgressIndicator():constSizedBox.shrink();},)下拉刷新与上拉加载对比特性下拉刷新上拉加载触发方式下拉手势滚动到底部用途更新当前数据加载更多数据实现方式RefreshIndicatorScrollController状态显示顶部指示器底部加载状态数据处理重置数据追加数据关键要点总结RefreshIndicator实现下拉刷新ScrollController实现上拉加载onRefresh返回Future完成后隐藏指示器监听滚动位置实现加载更多控制加载状态避免重复请求显示加载状态提升用户体验常见问题Q1: 下拉刷新不生效怎么办A: 确保子组件是可滚动的且高度超过屏幕。Q2: 上拉加载频繁触发怎么办A: 添加加载状态判断使用防抖处理。Q3: 如何自定义下拉刷新样式A: 使用RefreshIndicator的color和backgroundColor属性或自定义组件。Q4: 如何实现预加载A: 在距离底部一定距离时就开始加载。实践建议下拉刷新使用RefreshIndicator组件上拉加载使用ScrollController监听滚动位置加载状态在列表末尾显示加载状态防抖处理避免频繁触发加载资源释放在dispose中释放ScrollController复杂场景使用第三方库如pull_to_refresh通过合理实现下拉刷新和上拉加载可以创建出流畅的无限滚动列表提升用户体验。