如何处理撰写中分页数据的结果并实现页眉和页脚加载状态？

Question

在视图系统中，有官方示例如何实现加载状态并将页眉和页脚项目添加到列表中：

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

Only 类似的内容如何显示项目

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

但是我们如何在 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() },
    )
}