Compose 可组合项 - 下拉刷新 pullRefresh()、PullToRefreshBox()

原创已于 2025-05-17 18:53:48 修改 · 1.8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#android

于 2023-11-04 04:16:36 首次发布

Compose 专栏收录该内容

45 篇文章

订阅专栏

本文讲解了在Android开发中如何在KotlinCompose中实现PullRefresh功能，包括状态管理、指示器和与Paging集成的应用

一、material 包

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, //处理业务，开始时将refreshing设为true，结束后将refreshing设为false
refreshThreshold: Dp = PullRefreshDefaults.RefreshThreshold, //超过阈值会触发onRefresh
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
)

1.4 代码示例

1.4.1 简单封装

@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    //状态设为刷新中
            onRefreshing()         //执行业务
            isRefreshing = false   //状态设为停止
        }
    )
    Box(modifier = modifier
        .fillMaxSize()
        .pullRefresh(state = pullRefreshState)
    ) {
        content()
        PullRefreshIndicator(
            refreshing = isRefreshing,
            state = pullRefreshState,
            modifier = Modifier.align(Alignment.TopCenter)
        )
    }
}

1.4.2 结合 Paging 使用

@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
            }
        }
    }
}

二、material3 包

官方介绍

2.1 可组合项 PullToRefreshBox()

fun PullToRefreshBox(
isRefreshing: Boolean, //是否在刷新
onRefresh: () -> Unit, //刷新时执行的业务
modifier: Modifier = Modifier,
state: PullToRefreshState = rememberPullToRefreshState(),
contentAlignment: Alignment = Alignment.TopStart,
indicator: @Composable BoxScope.() -> Unit = {
Indicator(
modifier = Modifier.align(Alignment.TopCenter),
isRefreshing = isRefreshing,
state = state
)
},
content: @Composable BoxScope.() -> Unit
)

var isRefreshing by remember{ mutableStateOf(false) }
PullToRefreshBox(
    isRefreshing = isRefreshing,
    onRefresh = {
        isRefreshing = true
        //TODO()
        isRefreshing = false
    }
) {
    //UI
}