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
            }
        }
    }
}
相关推荐
用户2018792831671 小时前
AMS和app通信的小秘密
android
用户2018792831671 小时前
ThreadPoolExecutor之市场雇工的故事
android
诺诺Okami1 小时前
Android Framework-Launcher-InvariantDeviceProfile
android
Antonio9152 小时前
【音视频】Android NDK 与.so库适配
android·音视频
sun00770011 小时前
android ndk编译valgrind
android
AI视觉网奇12 小时前
android studio 断点无效
android·ide·android studio
jiaxi的天空12 小时前
android studio gradle 访问不了
android·ide·android studio
No Silver Bullet13 小时前
android组包时会把从maven私服获取的包下载到本地吗
android
catchadmin13 小时前
PHP serialize 序列化完全指南
android·开发语言·php
tangweiguo0305198715 小时前
Kable使用指南:Android BLE开发的现代化解决方案
android·kotlin