借助 Compose Material 3，您可以轻松实现下拉刷新功能。

在线上有许多关于如何使用Compose Material 3库实现下拉刷新的文章。但是，自从1.2.0版本以来，下拉刷新API的变动很大，带来了重大的不兼容变更，使得大多数相关博客文章变得过时。

本文将教你如何使用新API为你的App添加下拉刷新特性，以及如何将你的App升级到最新的Jetpack Compose Material 3库。

Google 建议使用 Compose 结合 Material 3，尽管大部分 API 目前仍属实验性，而且其行为也可能与 Material 2 不同。如需了解更多，可参阅此链接。

韩国的梨花女子大学位于何处？

#

要翻译成：

#

韩国的梨花女子大学在哪里？

#

应翻译为：

#

韩国梨花女子大学位于何处？

#

正确翻译应为：

#

基于专家建议和原文要求，正确的翻译应为：

#

韩国梨花女子大学位于何处？

#

正确翻译应为：

#

韩国梨花女子大学位于何处？

#

正确翻译应为：

#

韩国梨花女子大学位于何处？

#

正确翻译应为：

#

什么是下拉刷新？

在移动应用中，下拉刷新或滑动刷新是一种常见的手势触发的功能，允许用户通过滑动或下拉屏幕手动刷新页面上的内容。

它通常被用来显示从远程服务器获取的数据列表，这些数据经常更新。你可以在这些社交和新闻应用，如 Facebook、Instagram、Twitter、Reddit 中看到这种设计。以及其他社交和新闻应用。

这是一个应用中使用下拉刷新的例子。

初始代码

我们将为一个简单的HomeScreen添加下拉刷新功能，该屏幕显示随机的狗的事实的滚动列表。屏幕的状态由一个ViewModel提供，该ViewModel从数据仓库中加载数据并通过StateFlow发布数据。这种架构在大多数现代应用中很常见。

最初的主屏幕状态。

最初的主页模型。

我们在视图（Compose）中从view model获取状态，并展示一个可滚动的事实列表。

初始主屏幕组件。

以上所有操作会导致此屏幕显示一系列事实信息。要查看新事实，用户需要关闭并重新启动应用，这导致用户体验不佳。因此，我们将在该屏幕上添加一个下拉刷新的手势，让用户轻松刷新数据。

显示事实列表的初始界面

使用Compose Material 3实现下拉刷新

Compose Material 3库提供了一种开箱即用的解决方案，可以轻松地将下拉刷新功能添加到您的应用中。它包含PullToRefreshBox容器和.pullToRefresh修饰符。

添加最新依赖

要开始，请，确保已将最新版本的 Compose Material 3 依赖项添加到您的应用级别的构建文件中。

在 app 的构建文件中添加 Material 3 组件依赖。

或者如果你使用的是版本目录依赖管理方式：

在版本目录中加入 Compose Material 3 依赖。

在应用的构建文件中通过版本管理添加 Compose Material 3 的依赖项。

关于 PullToRefreshBox 的使用

最简单的方法是使用 PullToRefreshBox 容器。它需要一个可滚动的布局作为其内容，并启用手势支持，允许用户通过从顶部向下滑动手势来手动刷新内容。它还提供了一个默认的刷新指示器。

Compose Material 3 库中的下拉刷新定义。

我们需要提供以下内容。

• isRefreshing — 是否正在进行刷新，用于使圆圈动画生效
• onRefresh — 当用户的手势超过阈值时触发的回调函数，用于启动刷新请求
• content — 可垂直滚动的内容/布局，例如 LazyColumn，在此之上会显示刷新指示器

给我们的示例添加下拉刷新

首先，我们需要更新屏幕状态对象，添加一个新属性 isRefreshing，然后我们可以把这个属性传递给 PullToRefreshBox。

主屏幕的新刷新特性

接下来，我们需要更新我们的 ViewModel，以更新 isRefreshing 状态并触发数据刷新。我们还添加了一个新的 _isRefreshing: MutableStateFlow<Boolean> 用于控制刷新状态。每当此流更新时，它都会更新屏幕状态。

我们还增加了一个 onPullToRefreshTrigger() 函数，当 Compose 中触发下拉刷新时会调用它。它控制刷新状态的控制并重新获取数据。

最后，我们必须更新我们的屏幕可组合项，添加下拉刷新功能。为此，我们将现有的 LazyColumn 用 PullToRefreshBox 包围，并为它提供 isRefreshing 状态和一个 onRefresh 回调，该回调调用 ViewModel 中的相应函数。

当我们下拉屏幕时，指示器会显示出来，我们就会接收到一个 onRefresh() 回调。此时我们需要通过 ViewModel 触发数据的刷新，并将 isRefreshing 设置为 true。否则，刷新指示器会卡住，不会显示动画。

将 isRefreshing 重新设置为 false，以在数据刷新后隐藏刷新指示器。

就这样！我们在应用中加入了下拉更新的手势。

在主屏幕上设置下拉刷新。

自定义指示器动画

我们可以进一步通过扩展 PullToRefreshState 来自定义下拉刷新组件。这能使我们调整刷新指示器的动画。下面是一个例子，说明如何在释放后添加弹簧/反弹效果。

给刷新指示器添加一个弹簧动画或者弹跳动画。

这就是最后的结果：

带有自定义弹簧效果的下拉更新提示。

进一步的自定义

PullToRefreshBox 提供了一个易用的 API，但提供的自定义选项不多。例如，它缺少一个 enabled 属性，我们可以用这个属性来开启或关闭下拉刷新功能。

如果我们需要更多的控制，可以直接使用 .pullToRefresh 修饰符来实现，它实际上是由 PullToRefreshBox 使用的。它提供了 enabled: Boolean 属性，并且我们还可以通过设置 threshold: Dp 属性来控制刷新触发的时机。

实现下拉刷新功能。

我们可以将这个修饰符应用在任何包含可垂直滚动布局的布局中。或者，我们可以创建一个包装器，并像使用 PullToRefreshBox 一样使用它。

一个用于包裹 pullToRefresh 修饰符的可组合项

从之前的API迁移

如果你的应用已经在使用较旧版本的 Compose Material 3，并且已经用 PullToRefreshContainer 实现了下拉刷新功能，你需要将 PullToRefreshContainer 迁移到 PullToRefreshBox。之前的 API 在版本 1.3.0 中已被弃用，并不再包含在库中，这会使升级过程变得复杂。

在本文的第一部分，我们介绍了如何使用这些新API。是否迁移到PullToRefreshBox或使用pullToRefresh修饰符将取决于您的需求。如果您需要启用或禁用下拉刷新手势的功能，则需使用pullToRefresh修饰符。如果没有此需求，您可以直接使用PullToRefreshBox。

主要变化：

• rememberPullToRefreshState()：不再接受 enabled 参数，可以通过 pullToRefresh 修饰符来控制。
• PullToRefreshContainer：被 PullToRefreshBox 或 pullToRefresh 修饰符代替。
• isRefreshing 状态现在由用户控制，而不是通过 PullToRefreshState。

实现下拉刷新，使用的是已弃用的 PullToRefreshContainer

结论.

我们来尝试一下如何使用最新的Compose Material 3库在应用程序中实现简单的下拉刷新功能。

这些API正处于实验阶段，并且可以通过两种方式使用：通过应用包装器布局或通过添加修饰符。你的需求将决定你选择哪一种，比如需要自定义动画或控制手势的启用和禁用。

你可以在我位于GitHub上的代码库中找到完整实现的下拉刷新示例，该代码库位于GitHub。

GitHub - landomen/compose-material3-pull-to-refresh-sample: 示例项目，展示如何使用 Compose Material 3 下拉刷新。…github.com 资源：

• https://developer.android.com/develop/ui/compose/designsystems/material (Android官方UI设计与Compose实现的Material设计系统)
• https://developer.android.com/jetpack/androidx/releases/compose-material3#compose_material3_version_14_2 (Androidx Compose Material3版本14.2的发布说明)
• https://composables.com/material3/pulltorefreshbox (Composables网站上关于Material3的PullToRefreshBox组件的介绍)