Flutter 下拉刷新之RefreshIndicator

最新推荐文章于 2025-06-18 09:38:07 发布

yechaoa

最新推荐文章于 2025-06-18 09:38:07 发布

阅读量1.1w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Flutter Flutter 开发实战文章标签： Flutter 下拉刷新 Flutter RefreshIndicator Flutter 加载更多 Flutter 下拉刷新加载更多 RefreshIndicator

本文链接：https://blog.youkuaiyun.com/yechaoa/article/details/98193911

Flutter 开发实战同时被 2 个专栏收录

17 篇文章 ¥9.90 ¥99.00

订阅专栏

Flutter

42 篇文章

订阅专栏

本文介绍了在Flutter中使用RefreshIndicator实现下拉刷新的功能，并提供了简单的代码示例。同时，文章提到了如何结合ScrollController实现上拉加载更多，并强调了在处理加载状态时应定义并管理好各种状态，以保持逻辑清晰。最后，提供了开源项目的GitHub链接供读者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果

在这里插入图片描述

属性

RefreshIndicator 是 Material Design 风格的下拉刷新控件，所以同android中的SwipeRefreshLayout用法一样，嵌套在外层即可。
先了解一下属性：

  const RefreshIndicator({
    Key key,
    @required this.child,
    this.displacement = 40.0,//指示器显示时距顶部位置
    @required this.onRefresh,//下拉刷新回调
    this.color,//指示器颜色，默认ThemeData.accentColor
    this.backgroundColor,//指示器背景颜色，默认ThemeData.canvasColor
    this.notificationPredicate = defaultScrollNotificationPredicate,
    this.semanticsLabel,
    this.semanticsValue,
  })

基本上只需要关心onRefresh回调即可。