Compose 组合项 - 下拉刷新 pullRefresh

一、概念

1.1 修饰符 Modifier.pullRefresh()

功能实现采用的是 Modifier 修饰符而不是一个单独的组合项,所以需要提供一个父容器来存放内容和下拉指示器。需求是下拉指示器显示在内容之上,因此选择 Box,注意内容必须具备纵向滑动能力否则无法触发(非LazyColumn可设置Modifier.verticalScroll)。

|-------------------------------------------------------------------------------------------------|
| fun Modifier.pullRefresh( state: PullRefreshState, //下拉刷新的状态管理 enabled: Boolean = true //是否启用 ) |

1.2 状态管理 rememberPullRefreshState()

用于管理刷新状态和刷新业务。通过实例.progress可以获取进度来自定义指示器或动画。

|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| fun rememberPullRefreshState( refreshing: Boolean, //是否在刷新 onRefresh: () -> Unit, //处理刷新的业务逻辑,结束后将刷新状态设为false refreshThreshold: Dp = PullRefreshDefaults.RefreshThreshold, refreshingOffset: Dp = PullRefreshDefaults.RefreshingOffset, ): PullRefreshState |

1.3 下拉指示器 PullRefreshIndicator

|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| fun PullRefreshIndicator( refreshing: Boolean, //是否在刷新 state: PullRefreshState, //下拉刷新的状态管理 modifier: Modifier = Modifier, backgroundColor: Color = MaterialTheme.colors.surface, contentColor: Color = contentColorFor(backgroundColor), scale: Boolean = false ) |

二、代码示例

2.1 简单封装

Kotlin 复制代码
@Composable
fun Demo(
    onRefreshing: () -> Unit,    //刷新时的回调
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit,    //包裹的内容(必须具备纵向滑动否则无法触发)
) {
    //是否在刷新
    var isRefreshing by remember{ mutableStateOf(false) }
    //下拉刷新的状态管理
    val pullRefreshState = rememberPullRefreshState(
        refreshing = isRefreshing,
        onRefresh = { isRefreshing = true }
    )
    //刷新时的业务处理
    if (isRefreshing) {
        onRefreshing()
        isRefreshing = false    //刷新业务执行完毕后修改状态
    }
    Box(modifier = modifier
        .fillMaxSize()
        .pullRefresh(state = pullRefreshState)
    ) {
        content()
        PullRefreshIndicator(
            refreshing = isRefreshing,
            state = pullRefreshState,
            modifier = Modifier.align(Alignment.TopCenter)
        )
    }
}

2.2 结合 Paging 使用

Kotlin 复制代码
@Composable
fun DemoScreen(
    viewModel: DemoViewModel = viewModel()
) {
    val lazyPagingItems = viewModel.pagingDataFlow.collectAsLazyPagingItems() //获取Paging数据
    Demo(
        onRefreshing = { lazyPagingItems.refresh() } //刷新Paging
    ) {
        Content(lazyPagingItems = lazyPagingItems)
    }
}

@Composable
fun Content(
    lazyPagingItems: LazyPagingItems<...>,
    lazyListState: LazyListState = rememberLazyListState(),
    modifier: Modifier = Modifier
) {
    LazyColumn(
        modifier = modifier.fillMaxSize(),
        state = lazyListState
    ) {
        items(
            count = lazyPagingItems.itemCount,
            key = lazyPagingItems.itemKey { it.id }
        ) { index ->
            val bean = lazyPagingItems[index]
            if (bean != null) {
                Item(...)    //为Item设置内容
            } else {
                Text("")    //内容为空时显示的占位Item
            }
        }
    }
}
相关推荐
alexhilton14 小时前
面向开发者的系统设计:像建筑师一样思考
android·kotlin·android jetpack
CYRUS_STUDIO1 天前
用 Frida 控制 Android 线程:kill 命令、挂起与恢复全解析
android·linux·逆向
CYRUS_STUDIO1 天前
Frida 实战:Android JNI 数组 (jobjectArray) 操作全流程解析
android·逆向
用户091 天前
Gradle Cache Entries 深度探索
android·java·kotlin
循环不息优化不止1 天前
安卓 View 绘制机制深度解析
android
叽哥1 天前
Kotlin学习第 9 课:Kotlin 实战应用:从案例到项目
android·java·kotlin
雨白2 天前
Java 线程通信基础:interrupt、wait 和 notifyAll 详解
android·java
诺诺Okami2 天前
Android Framework-Launcher-UI和组件
android
潘潘潘2 天前
Android线程间通信机制Handler介绍
android
潘潘潘2 天前
Android动态链接库So的加载
android