【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 所取代。实现方式类似,但它不是一个可组合函数,而是一个可应用于可组合函数的修改器。

下面是一个简单的示例:

kotlin 复制代码
// 状态可以由 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。

依赖导入

kotlin 复制代码
repositories {
    mavenCentral()
}

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

2.1 使用方法

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

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

kotlin 复制代码
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 修改器,就像这样:

kotlin 复制代码
SwipeRefresh(
    // ...
) {
    Column(Modifier.verticalScroll(rememberScrollState())) {
        // content
    }
}

2.3 无需轻扫即可显示刷新

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

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

kotlin 复制代码
val swipeRefreshState = rememberSwipeRefreshState(true)

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

2.4 指标

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

自定义默认指示器

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

kotlin 复制代码
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,其中包含对刷新手势做出反应所需的信息。

相关推荐
H1001 小时前
重构(二)
android·重构
拓端研究室1 小时前
R基于贝叶斯加法回归树BART、MCMC的DLNM分布滞后非线性模型分析母婴PM2.5暴露与出生体重数据及GAM模型对比、关键窗口识别
android·开发语言·kotlin
zhangphil2 小时前
Android简洁缩放Matrix实现图像马赛克,Kotlin
android·kotlin
m0_512744642 小时前
极客大挑战2024-web-wp(详细)
android·前端
lw向北.2 小时前
Qt For Android之环境搭建(Qt 5.12.11 Qt下载SDK的处理方案)
android·开发语言·qt
不爱学习的啊Biao2 小时前
【13】MySQL如何选择合适的索引?
android·数据库·mysql
Clockwiseee3 小时前
PHP伪协议总结
android·开发语言·php
mmsx9 小时前
android sqlite 数据库简单封装示例(java)
android·java·数据库
众拾达人12 小时前
Android自动化测试实战 Java篇 主流工具 框架 脚本
android·java·开发语言
吃着火锅x唱着歌13 小时前
PHP7内核剖析 学习笔记 第四章 内存管理(1)
android·笔记·学习