Flutter快学快用24讲--14 刷新加载：下拉刷新上拉加载，在 Flutter 中的实现

g_z_q_

已于 2023-03-20 22:03:44 修改

阅读量917

点赞数

文章标签： flutter android

于 2023-03-20 21:49:16 首次发布

本文链接：https://blog.csdn.net/g_z_q_/article/details/129677405

版权

本教程讲解如何在Flutter中使用RefreshIndicator组件实现下拉刷新和上拉加载功能。介绍了API返回结构的调整，新增状态管理，以及错误处理和加载效果的优化。通过监听ListView事件，结合RefreshIndicator和controller，实现初次加载、下拉刷新和上拉加载更多。同时，添加了错误提示组件和加载中组件，提升用户体验。

摘要由CSDN通过智能技术生成

你好，欢迎来到第 13 课时，上一课时我们实现了多种列表样式，但是缺乏下拉刷新和上拉加载更多的功能，本课时就来完善这部分的功能。实现下拉刷新和上拉加载更多，需要应用到 RefreshIndicator 组件，接下来我们就先了解这个组件的一些作用。

RefreshIndicator

该组件主要的作用是在下拉时实现刷新，具体看下组件参数的一些作用。

RefreshIndicator({
  Key key,
  @required this.child, // 子组件，需要更新的组件列表
  this.displacement = 40.0, // 刷新指示器离顶部的位置
  @required this.onRefresh, // 下拉触发函数，该函数必须是 Future<void>
  this.color, // 设置指示器的颜色
  this.backgroundColor, // 设置指示器的颜色
  this.notificationPredicate = defaultScrollNotificationPredicate, // 检查组件是否需要监听下拉事件
  this.semanticsLabel, // 设置指示器的一个标签名字
  this.semanticsValue, // 加载进度，一般使用百分比
  this.strokeWidth = 2.0 // 指示器的像素大小，默认 2.0
})

了解完 RefreshIndicator 组件，我们再来看下本课时所要实现的一个效果，如图 1 动画所示。

图 1 下拉刷新上拉加载效果

图 1 中的效果包含了下拉刷新，上拉滑动翻页，在翻页到最后一页时，给了一定的提示信息。接下来我们就实现这个功能。

实现原理

前面我介绍到了下拉刷新功能，使用到的是 RefreshIndicator 组件。而上拉加载更多，使用的是上课时 ListView.separated 中的 controller 属性，通过监听上拉动作，来判断是否需要执行下一页翻页。

那么在实现代码前，我们还是需要做一些前期的准备。因为现在涉及了翻页，因此 API 返回的数据结构不仅仅是数据列表了，需要加上翻页相关的一些参数，具体我们来看下实现方案。

API 增加返回结构

API 的数据结构调整为下面的一个 JSON 格式。

{
   "ret" : 0, 
   "message" : "success", 
   "hasMore" : true,
   "lastId" : null,
}

ret，表示返回的状态码，0 表示成功。
message，返回的提示信息。
hasMore，表示是否还有更多，或者说下一页。
lastId，翻页标识。

根据如上的结构，我们需要去 Struct 中新建一个 api_ret_info.dart 用来保存所有相关的 api 返回结构，具体代码如下：

import 'package:two_you_friend/util/struct/content_detail.dart';
/// api 拉取content list返回结构
///
/// {
///   "ret" : 0,
///   "message" : "success",
///   "hasMore" : true,
///   "lastId" : null,
/// }
class StructApiContentListRetInfo {
  /// 用户的昵称
  final int ret;
  /// 用户头像信息
  final String message;
  /// 是否还有更多
  final bool hasMore;
  /// 最后一个id
  final String lastId;
  /// 具体的content list
  final List<StructContentDetail> data;
  /// 构造函数
  const StructApiContentListRetInfo(
      this.ret, this.message, this.hasMore, this.lastId, this.data
      );
}

上面代码已经是一个比较常见的 Struct 结构。完成 Struct 代码后，我们再来修改 API 文件，将接口返回的类型从原来的 List 修改为 StructApiContent