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
            }
        }
    }
}
相关推荐
小袁拒绝摆烂2 小时前
SQL开窗函数
android·sql·性能优化
apihz3 小时前
VM虚拟机全版本网盘+免费本地网络穿透端口映射实时同步动态家庭IP教程
android·服务器·开发语言·网络·数据库·网络协议·tcp/ip
baidu_247438613 小时前
Android MPAndroidChart使用
android
天平4 小时前
react native现代化组件库的推荐 【持续更新...】
android·前端·react native
apihz5 小时前
通用图片搜索-搜狗源免费API接口使用指南
android·java·python·php·音视频
你过来啊你5 小时前
Android开发中ARouter使用和原理详解
android
apihz7 小时前
腾讯云轻量服务器创建快照免费API接口教程
android·服务器·数据库·python·网络协议·tcp/ip·腾讯云
Kiri霧7 小时前
Noting
android·开发语言·kotlin
东风西巷13 小时前
NealFun安卓版:创意无限,娱乐至上
android·人工智能·智能手机·娱乐·软件需求
小李飞飞砖19 小时前
Sophix、Tinker 和 Robust 三大主流 Android 热修复框架的详细对比
android