Flutter 使用 easy_refresh 实现分页ListView

本资源主要介绍了如何在Flutter项目中使用`easy_refresh`库（版本2.0.9）来实现ListView的分页加载效果。通过简单的界面示例，展示了如何引入库、设置本地化以及创建一个模拟数据的ListView。 在Flutter开发中，`easy_refresh`是一个强大的下拉刷新和上拉加载更多的插件。在这个教程中，首先需要在项目的`pubspec.yaml`文件中引入`flutter_localizations`和`flutter_easyrefresh`库，以便支持本地化和使用`EasyRefresh`组件。 ```yaml flutter_localizations: sdk: flutter flutter_easyrefresh: ^2.0.9 ``` 接着，在`main.dart`文件中，导入必要的库，并在`MaterialApp`中配置本地化代理，包括`GlobalMaterialLocalizations.delegate`、`GlobalWidgetsLocalizations.delegate`和`GlobalEasyRefreshLocalizations.delegate`，以支持`EasyRefresh`的本地化文本。 ```dart import 'package:flutter_easyrefresh/easy_refresh.dart'; import 'package:flutter_localizations/flutter_localizations.dart'; MaterialApp( localizationsDelegates: [ GlobalMaterialLocalizations.delegate, GlobalWidgetsLocalizations.delegate, GlobalEasyRefreshLocalizations.delegate ], supportedLocales: [Locale('zh', 'CN')], // ... ) ``` 为了展示分页效果，可以创建一个简单的ListView。在这个例子中，我们模拟了一个数据列表，每页显示10条数据。定义两个变量：`pageIndex`用于记录当前页数，`count`表示每页的数据条数。`getNewData`函数用于初始化数据，`getMoreData`则负责加载更多数据。 ```dart var dataArr; var pageIndex = 0; // 页数 var count = 10; // 每页10条 void getNewData() { pageIndex = 0; dataArr = new List(); for (int i = pageIndex * count; i < count; i++) { dataArr.add(i); } print(dataArr); } void getMoreData() { pageIndex++; for (int i = pageIndex * count; i < pageIndex * count + count; i++) { dataArr.add(i); } } ``` 然后，创建一个`StatefulWidget`，在`State`类中使用`EasyRefresh`控件构建ListView。`EasyRefresh`组件包含一个`EasyHeader`用于下拉刷新，一个`EasyFooter`用于上拉加载更多。当用户触发下拉或上拉事件时，调用对应的刷新或加载更多函数。 ```dart class _ListViewTest_SimplePullDownState extends State<ListViewTest_SimplePullDown> { EasyRefreshController _controller = EasyRefreshController(); @override Widget build(BuildContext context) { return Scaffold( body: EasyRefresh( controller: _controller, header: ClassicalHeader(), footer: ClassicalFooter(), onRefresh: () => getNewData(), onLoad: () async { await Future.delayed(Duration(seconds: 2)); // 模拟延迟加载 getMoreData(); }, child: ListView.builder( itemCount: dataArr.length, itemBuilder: (context, index) => Text('Item $index'), ), ), ); } } ``` 这个例子展示了如何结合`EasyRefresh`和ListView实现分页加载功能。开发者可以根据实际需求调整`EasyHeader`和`EasyFooter`的样式，或者自定义刷新和加载更多的动画。通过这种方式，可以轻松地在Flutter应用中实现高效且用户友好的分页加载体验。