如何在组合和实现页眉和页脚加载状态时处理分页数据的结果？

Question

在View系统中有官方的例子实现loading states和添加header and footer item到list：

https://developer.android.com/topic/libraries/architecture/paging/load-state

https://github.com/android/architecture-components-samples/blob/main/PagingWithNetworkSample/app/src/main/java/com/android/example/paging/pagingwithnetwork/reddit/ui/RedditActivity.kt

我没有真正找到任何与 Jetpack Compose 类似的东西

仅显示项目的方式

https://developer.android.com/jetpack/compose/lists#large-datasets

但是我们如何在 Compose 中实现加载状态？

Answer 1

我们正在做这样的事情，效果很好：

val items by viewModel.pagedItems.collectAsLazyPagingItems()

LazyColumn() {
    if (items.loadState.prepend == LoadState.Loading) {
        item (key = "prepend_loading") { Loading() }
    }
    if (items.loadState.prepend is LoadState.Error) {
        item (key = "prepend_error") { Error() }
    }

    items(items) {}

    // the same thing with items.loadState.append
}

我们也有这个扩展功能，使它更容易一些，并消除 LazyColumn:

的噪音

fun LazyListScope.pagingLoadStateItem(
  loadState: LoadState,
  keySuffix: String? = null,
  loading: (@Composable LazyItemScope.() -> Unit)? = null,
  error: (@Composable LazyItemScope.(LoadState.Error) -> Unit)? = null,
) {
  if (loading != null && loadState == LoadState.Loading) {
    item(
      key = keySuffix?.let { "loadingItem_$it" },
      content = loading,
    )
  }
  if (error != null && loadState is LoadState.Error) {
    item(
      key = keySuffix?.let { "errorItem_$it" },
      content = { error(loadState)},
    )
  }
}

然后你可以这样使用它：

val items by viewModel.pagedItems.collectAsLazyPagingItems()

LazyColumn() {
    pagingLoadStateItem(
        loadState = items.loadState.prepend,
        keySuffix = "prepend",
        loading = { Loading() },
        error = { Error() },
    )

    // content

    pagingLoadStateItem(
        loadState = items.loadState.append,
        keySuffix = "append",
        loading = { Loading() },
        error = { Error() },
    )
}