当前位置：首页 > news >正文

flutter开发实战-下拉刷新与上拉加载更多实现

news 2025/6/25 16:10:50

在开发中经常遇到列表需要下拉刷新与上拉加载更多，这里使用EasyRefresh，版本是3.3.2+1

一、什么是EasyRefresh

EasyRefresh可以在Flutter应用程序上轻松实现下拉刷新和上拉加载。它几乎支持所有Flutter Scrollable小部件。它的功能与安卓的SmartRefreshLayout非常相似，也吸收了许多第三方库的优势。EasyRefresh集成了各种风格的页眉和页脚，但它没有任何限制，您可以轻松自定义。使用Flutter强大的动画，即使只是一个简单的控制也可以完成。EasyRefresh的目标是为Flutter创建一个强大、稳定、成熟的pull-to-refresh框架。

二、实现下拉刷新与上拉加载更多

在pubspec.yaml中引入EasyRefresh

 # 下拉刷新、上拉更多easy_refresh: ^3.3.2+1

在使用EasyRefresh过程中，需要用到EasyRefreshController来控制刷新结束。

/// Finish the refresh task and return the result./// [result] Result of task completion./// [force] Enforced, used to modify the result.void finishRefresh([IndicatorResult result = IndicatorResult.success, bool force = false]) {assert(controlFinishRefresh || force,'Please set controlFinishRefresh to true, then use. If you want to modify the result, you can set force to true.');_state?._headerNotifier._finishTask(result);}/// Finish the load task and return the result./// [result] Result of task completion./// [force] Enforced, used to modify the result.void finishLoad([IndicatorResult result = IndicatorResult.success, bool force = false]) {assert(controlFinishLoad || force,'Please set controlFinishLoad to true, then use. If you want to modify the result, you can set force to true.');_state?._footerNotifier._finishTask(result);}

整体实现下拉刷新与上拉加载更多完整代码如下

import 'package:easy_refresh/easy_refresh.dart';
import 'package:flutter/material.dart';class RefreshPage extends StatefulWidget {const RefreshPage({super.key});@overrideState<RefreshPage> createState() => _RefreshPageState();
}class _RefreshPageState extends State<RefreshPage> {int _count = 10;late EasyRefreshController _controller;@overridevoid initState() {super.initState();_controller = EasyRefreshController(controlFinishRefresh: true,controlFinishLoad: true,);}@overridevoid dispose() {_controller.dispose();super.dispose();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('EasyRefresh'),),body: EasyRefresh(controller: _controller,header: const BezierCircleHeader(),footer: const ClassicFooter(),onRefresh: () async {await Future.delayed(const Duration(seconds: 4));if (!mounted) {return;}setState(() {_count = 10;});_controller.finishRefresh();_controller.resetFooter();},onLoad: () async {await Future.delayed(const Duration(seconds: 4));if (!mounted) {return;}setState(() {_count += 5;});_controller.finishLoad(_count >= 20 ? IndicatorResult.noMore : IndicatorResult.success);},child: ListView.builder(itemBuilder: (context, index) {return Card(child: Container(alignment: Alignment.center,height: 80,child: Text('${index + 1}'),),);},itemCount: _count,),),);}
}