Jetpack Compose列表的下拉刷新实现

806 阅读1分钟

用accompanist库里的SwipeRefresh,里面套LazyColumn。难点在于何时收起loading转圈的图标。在LazyColumn里调完items方法后,加一句判断当loadState.refresh不是Loading时,把SwipeRefreshState状态改为false。执行流程因为涉及flow所以不好理解。最后附上示例代码:

@ExperimentalFoundationApi
@Composable
fun EventList(
    onItemClick: (Int) -> Unit,
    homeViewModel: HomeViewModel
) {
    val pagingItems = homeViewModel.events.collectAsLazyPagingItems()
    val refreshState: SwipeRefreshState = rememberSwipeRefreshState(false)

    SwipeRefresh(
        state = refreshState,
        onRefresh = {
            refreshState.isRefreshing = true
            pagingItems.refresh()
        }
    ) {
        LazyColumn {
            androidx.paging.compose.items(items = pagingItems) {
                if (it != null) {
                    EventItem(event = it, onClick = onItemClick)
                }
            }
            pagingItems.apply {
                if (loadState.refresh !is Loading) {
                    refreshState.isRefreshing = false
                }
                when {
                    loadState.refresh is Loading -> {
                        item { LoadingItem() }
                    }
                    ...
                }
            }
        }
    }
}