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

这里写自定义目录标题

• [1、`（新）`用于 Jetpack Compose 的刷新指示器](#1、（新）用于 Jetpack Compose 的刷新指示器)
• • [1.1 SwipeRefresh 迁移到新的 PullRefresh](#1.1 SwipeRefresh 迁移到新的 PullRefresh)
  • [1.2 迁移步骤](#1.2 迁移步骤)
  • [1.3 自定义指示器](#1.3 自定义指示器)
• [2、原始文档（SwipeRefresh ）的使用](#2、原始文档（SwipeRefresh ）的使用)
• • 依赖导入
  • [2.1 使用方法](#2.1 使用方法)
  • [2.2 完整示例（包括视图模型的实现）](#2.2 完整示例（包括视图模型的实现）)
  • [2.3 无需轻扫即可显示刷新](#2.3 无需轻扫即可显示刷新)
  • [2.4 指标](#2.4 指标)
  • [2.5 自定义指标](#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 through
            state = state,
            refreshTriggerDistance = trigger,
            // Enable the scale animation
            scale = true,
            // Change the color and shape
            backgroundColor = MaterialTheme.colors.primary,
            shape = MaterialTheme.shapes.small,
        )
    }
)

2.5 自定义指标

如前所述，您也可以提供自己的自定义指示器内容。我们会为指示器内容槽提供一个 SwipeRefreshState，其中包含对刷新手势做出反应所需的信息。