【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:"// 本次我用的版本: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,其中包含对刷新手势做出反应所需的信息。

你可能感兴趣的:(android,Compose,下拉刷新,PullRefresh,Material3)