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 简单封装

@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 使用

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