Compose 组合项

组合项"/>

Compose 组合项

一、概念

1.1 修饰符 Modifier.pullRefresh()

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

1.2 状态管理 rememberPullRefreshState()

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

1.3 下拉指示器 PullRefreshIndicator

二、代码示例

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