Compose () - 使用Paging

最新推荐文章于 2025-10-10 04:36:56 发布

原创最新推荐文章于 2025-10-10 04:36:56 发布 · 241 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#android

该代码展示了如何在JetpackCompose中使用Flow和Paging库来处理分页数据。通过collectAsLazyPagingItems收集数据，监听loadState以控制进度条和列表的显示。当数据加载时，显示进度条；加载完成或出错时，显示列表。错误状态下，日志记录错误信息。

点击跳转普通使用方式

@Composable
fun Screen(flow: Flow<PagingData<HotNewestArticleBean.HotNewestArticle.Article>>) {
    val data = flow.collectAsLazyPagingItems()
    var showProgressBar by remember{ mutableStateOf(true) }
    var showList by remember{ mutableStateOf(false) }
    //监听paging状态，控制列表和进度条显示
    when (data.loadState.refresh) {
        //正在加载
        is LoadState.Loading -> {
            showProgressBar = true
            showList = false
        }
        //当没有加载动作并且没有错误的时候
        is LoadState.NotLoading -> {
            showProgressBar = false
            showList = true
        }
        //加载错误
        is LoadState.Error -> {
            showProgressBar = false
            val error = (data.loadState.refresh as LoadState.Error).error
            Log.e("Paging错误","${error.message}")
        }
    }
    //列表
    if (showList) {
        LazyColumn{
            items(data){ item ->
                item?.let {
                    Item(data = it)
                }
            }
        }
    }
    //进度条
    if (showProgressBar){ CircularProgressIndicator() }
}

@Composable
fun Item(
    modifier: Modifier = Modifier,
    data: HotNewestArticleBean.HotNewestArticle.Article
) {
    val author = data.author
    val shareUser = data.shareUser
    val superChapterName = data.superChapterName
    val userName = if (author.isEmpty()) {
        String.format("%s · %s", superChapterName, shareUser)
    } else {
        String.format("%s · %s", superChapterName, author)
    }
    Box {
        Column(
            modifier = modifier
                .padding(3.dp)
                .border(BorderStroke(width = 2.dp, color = Color(0xFF777777)))
                .padding(3.dp)
                .fillMaxWidth()
        ) {
            Text(text =  Html.fromHtml(data.title).toString(), fontSize = (20.sp))
            Text(text = userName)
            Text(text = data.niceDate)
        }
    }
}