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

Flutter EasyRefresh：介绍与使用指南

news 2025/7/6 18:47:35

什么是 Flutter EasyRefresh？

Flutter EasyRefresh 是一个强大的下拉刷新和上拉加载组件，用于构建流畅且高效的 Flutter 应用程序。它提供了多种自定义配置和动画效果，使开发者可以轻松实现列表的刷新和加载功能。

主要功能

支持下拉刷新和上拉加载：可以分别设置刷新和加载的回调函数。
丰富的刷新样式：内置了多种常用的刷新样式，如经典样式、球脉冲样式等。
自定义 Header 和 Footer：开发者可以自定义刷新头部和加载尾部的样式。
支持横向刷新：不仅支持垂直方向的刷新，还支持水平方向的刷新。
与 ScrollView 完美结合：与 ListView、GridView、CustomScrollView 等 Flutter 内置的滚动视图无缝结合。

安装

在 pubspec.yaml 文件中添加 easy_refresh 依赖：

dependencies:flutter:sdk: fluttereasy_refresh: ^请使用最新版本

然后运行 flutter pub get 命令来安装依赖。

基本使用

下面是一个简单的示例，展示如何在 Flutter 中使用 EasyRefresh 实现下拉刷新和上拉加载：

import 'package:flutter/material.dart';
import 'package:easy_refresh/easy_refresh.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('EasyRefresh 示例')),body: RefreshList(),),);}
}class RefreshList extends StatefulWidget {@override_RefreshListState createState() => _RefreshListState();
}class _RefreshListState extends State<RefreshList> {List<int> _items = List.generate(20, (index) => index);EasyRefreshController _controller = EasyRefreshController();@overrideWidget build(BuildContext context) {return EasyRefresh(controller: _controller,onRefresh: () async {await Future.delayed(Duration(seconds: 2));setState(() {_items = List.generate(20, (index) => index);});_controller.finishRefresh(success: true);},onLoad: () async {await Future.delayed(Duration(seconds: 2));setState(() {_items.addAll(List.generate(20, (index) => _items.length + index));});_controller.finishLoad(success: true, noMore: _items.length >= 60);},child: ListView.builder(itemCount: _items.length,itemBuilder: (context, index) {return ListTile(title: Text('Item ${_items[index]}'));},),);}
}

在上面的代码中，我们创建了一个简单的列表，并通过 EasyRefresh 实现了下拉刷新和上拉加载的功能。EasyRefresh 通过 EasyRefreshController 来控制刷新和加载的状态。

自定义 Header 和 Footer

如果内置的样式不能满足需求，可以自定义 Header 和 Footer：

import 'package:flutter/material.dart';
import 'package:easy_refresh/easy_refresh.dart';class CustomHeader extends Header {@overrideWidget build(BuildContext context, RefreshMode mode, double pulledExtent, double refreshTriggerPullDistance, double refreshIndicatorExtent, AxisDirection axisDirection, bool float, Duration completeDuration, bool enableInfiniteRefresh, bool success, bool noMore) {return Container(alignment: Alignment.center,child: Text(mode == RefreshMode.inactive ? '下拉刷新' : '刷新中...'),);}
}class CustomFooter extends Footer {@overrideWidget build(BuildContext context, LoadMode mode, double pulledExtent, double loadTriggerPullDistance, double loadIndicatorExtent, AxisDirection axisDirection, bool float, Duration completeDuration, bool enableInfiniteLoad, bool success, bool noMore) {return Container(alignment: Alignment.center,child: Text(mode == LoadMode.inactive ? '上拉加载' : '加载中...'),);}
}void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('自定义 Header 和 Footer')),body: RefreshList(),),);}
}class RefreshList extends StatefulWidget {@override_RefreshListState createState() => _RefreshListState();
}class _RefreshListState extends State<RefreshList> {List<int> _items = List.generate(20, (index) => index);EasyRefreshController _controller = EasyRefreshController();@overrideWidget build(BuildContext context) {return EasyRefresh(controller: _controller,header: CustomHeader(),footer: CustomFooter(),onRefresh: () async {await Future.delayed(Duration(seconds: 2));setState(() {_items = List.generate(20, (index) => index);});_controller.finishRefresh(success: true);},onLoad: () async {await Future.delayed(Duration(seconds: 2));setState(() {_items.addAll(List.generate(20, (index) => _items.length + index));});_controller.finishLoad(success: true, noMore: _items.length >= 60);},child: ListView.builder(itemCount: _items.length,itemBuilder: (context, index) {return ListTile(title: Text('Item ${_items[index]}'));},),);}
}