【Android-Compose】Material3 新版下拉刷新 PullRefresh

这里写自定义目录标题

1、`（新）`用于 Jetpack Compose 的刷新指示器
- 1.1 SwipeRefresh 迁移到新的 PullRefresh
- 1.2 迁移步骤
- 1.3 自定义指示器
2、原始文档（SwipeRefresh ）的使用
- 依赖导入
- 2.1 使用方法
- 2.2 完整示例（包括视图模型的实现）
- 2.3 无需轻扫即可显示刷新
- 2.4 指标
- 2.5 自定义指标

翻译和简单修改，原文：https://google.github.io/accompanist/swiperefresh/#migration

1、`（新）`用于 Jetpack Compose 的刷新指示器

1.1 SwipeRefresh 迁移到新的 PullRefresh

在 Compose Material 1.3.0 中，Accompanist SwipeRefresh 已被 PullRefresh 所取代。实现方式类似，但它不是一个可组合函数，而是一个可应用于可组合函数的修改器。

下面是一个简单的示例：

// 状态可以由 ViewModel 提供
val viewModel: MyViewModel = viewModel()
val refreshing by viewModel.isRefreshing// 当前是否要刷新// 获取状态：使用 ViewModel 中的状态初始化
val pullRefreshState = rememberPullRefreshState(refreshing, { viewModel.refresh() })// 你自定义容器，比如Box，使用其中的 Modifier 的函数即可控制
Box(Modifier.pullRefresh(pullRefreshState)) {LazyColumn(Modifier.fillMaxSize()) {// 列表...}PullRefreshIndicator(// 指示器refreshing, // 当前是否要刷新pullRefreshState, Modifier.align(Alignment.TopCenter))
}

1.2 迁移步骤

将 SwipeRefresh 替换为方框或你选择的其他布局，将你的 onRefresh lambda 保存到下一步。
将 rememberSwipeRefreshState() 替换为 rememberPullRefreshState(refreshing, onRefresh)
在布局中添加默认的 PullRefreshIndicator 或自定义实现。

1.3 自定义指示器

与其使用提供的可组合 PullRefreshIndicator，您可以创建您自己的

旧的文档参考：

2、原始文档（SwipeRefresh ）的使用

一个提供刷新用户体验模式的布局库，类似于 Android 的 SwipeRefreshLayout。

依赖导入

repositories {mavenCentral()
}dependencies {implementation "com.google.accompanist:accompanist-swiperefresh:<version>"// 本次我用的版本：0.30.1
}

2.1 使用方法

要实现这种用户体验模式，需要两个关键的应用程序接口： SwipeRefresh（提供布局）和 rememberSwipeRefreshState()（提供一些记忆状态）。

使用 ViewModel 的 SwipeRefresh 的基本用法如下：

val viewModel: MyViewModel = viewModel()
val isRefreshing by viewModel.isRefreshing.collectAsState()SwipeRefresh(state = rememberSwipeRefreshState(isRefreshing),onRefresh = { viewModel.refresh() },
) {LazyColumn {items(30) { index ->// TODO: list items}}
}

2.2 完整示例（包括视图模型的实现）

内容需要 “可垂直滚动”，SwipeRefresh() 才能对轻扫手势做出反应。LazyColumn 等布局可以自动垂直滚动，但 Column 或 LazyRow 等布局则不行。在这种情况下，你可以为该内容提供一个 Modifier.verticalScroll 修改器，就像这样：

SwipeRefresh(// ...
) {Column(Modifier.verticalScroll(rememberScrollState())) {// content}
}

2.3 无需轻扫即可显示刷新

由于该库是通过一个独立的状态对象构建的，因此很容易显示刷新指示器，而无需轻扫触发。

下面这个不切实际的示例就显示了一个永远刷新的指示器：

val swipeRefreshState = rememberSwipeRefreshState(true)SwipeRefresh(state = swipeRefreshState,onRefresh = { /* todo */ },
) {LazyColumn {items(30) { index ->// TODO: list items}}
}

2.4 指标

库提供了一个默认指示器： SwipeRefreshIndicator() 是 SwipeRefresh 自动使用的指示器。您可以自定义默认指示器，甚至使用指示器槽提供自己的指示器内容。
自定义默认指示器

要自定义默认指示器，我们可以提供自己的指示器内容块，使用自定义参数调用 SwipeRefreshIndicator() ：

SwipeRefresh(state = /* ... */,onRefresh = /* ... */,indicator = { state, trigger ->SwipeRefreshIndicator(// Pass the SwipeRefreshState + trigger throughstate = state,refreshTriggerDistance = trigger,// Enable the scale animationscale = true,// Change the color and shapebackgroundColor = MaterialTheme.colors.primary,shape = MaterialTheme.shapes.small,)}
)