如何在 Jetpack Compose 中预览 LazyPagingItems/Paging 3 库

Question

我认为标题已经说明了一切。

LazyPagingItems

构造函数是内部的。我无法在 Preview Composable 中将

LazyPagingItems

作为参数传递，更不用说传递示例数据了。但我想显示我的可组合项的预览，我应该怎么做？

@Composable
fun MainUi(users: LazyPagingItems<User>) {
    Scaffold {
        LazyColumn() {
            items(users) {
                // Rest of the code..
            }
        }
    }
}

@Preview
@Composable
fun Preview() {
    DefaultTheme {
        MainUi(users = ) // How to pass sample data here?
    }
}

Answer 1

您可以使用

PagingData.empty()

或

PagingData.from(List<T>)

，如下所示：

@Preview
@Composable
fun Preview() {
    DefaultTheme {
        MainUi(users = flowOf(PagingData.from(listOf(User(..)))).collectAsLazyPagingItems()
    }
}

我不确定这些项目是否显示在预览中，但至少你可以渲染它......

Answer 2

这也是您处理和显示页面状态的方式。刷新、追加、前置。

@Preview
@Composable
fun ScreenContentPreview() {
    ScreenContent(
        Modifier,
        "One Free ticket",
        pageState =
        flowOf(
            PagingData.from(
                listOf(*YOUR_LIST_OF_OBJECT*
                ),
                sourceLoadStates =
                LoadStates(
                    refresh = LoadState.NotLoading(false),
                    append = LoadState.NotLoading(false),
                    prepend = LoadState.NotLoading(false),
                ),
            ),
        ).collectAsLazyPagingItems(),
    )
}

希望这对某人有帮助。

Answer 3

我没有尝试过这个，但是分页存储库中有一个预览 LazyPagingItems 的示例

https://github.com/androidx/androidx/blob/androidx-main/paging/paging-compose/src/androidTest/java/androidx/paging/compose/LazyPagingItemsPreviewTest.kt

@OptIn(ExperimentalCoroutinesApi::class)
@Preview
@Composable
fun PagingPreview() {
    val data = List(50) { it }
    val flow = MutableStateFlow(PagingData.from(data))
    CompositionLocalProvider(
        LocalInspectionMode provides true,
    ) {
        // Use StandardTestDispatcher so we don't start collecting on PagingData
        val lazyPagingItems = flow.collectAsLazyPagingItems(StandardTestDispatcher())
        LazyColumn(Modifier.height(500.dp)) {
            items(count = lazyPagingItems.itemCount) { index ->
                val item = lazyPagingItems[index]
                Spacer(Modifier.height(50.dp).fillParentMaxWidth().testTag("$item"))
            }
        }
    }
}

@OptIn(ExperimentalCoroutinesApi::class)
@Preview
@Composable
fun EmptyPreview() {
    val data = emptyList<Int>()
    val flow = MutableStateFlow(PagingData.from(data))
    CompositionLocalProvider(
        LocalInspectionMode provides true,
    ) {
        // Use StandardTestDispatcher so we don't start collecting on PagingData
        val lazyPagingItems = flow.collectAsLazyPagingItems(StandardTestDispatcher())
        LazyColumn(Modifier.height(500.dp)) {
            items(count = lazyPagingItems.itemCount) { index ->
                val item = lazyPagingItems[index]
                Spacer(Modifier.height(50.dp).fillParentMaxWidth().testTag("$item"))
            }
        }
    }
}

Answer 4

Google 添加了示例如何在@Preview 中显示数据

一个重要时刻 - 您应该准确使用

MutableStateFlow()

而不是像

flowOf()

这样的构建器（在这种情况下，没有必要使用

sourceLoadStates

）

@Sampled
@Preview
@Composable
fun PagingPreview() {
    /**
     * The composable that displays data from LazyPagingItems.
     *
     * This composable is inlined only for the purposes of this sample. In production code, this
     * function should be its own top-level function.
     */
    @Composable
    fun DisplayPaging(flow: Flow<PagingData<String>>) {
        // Flow of real data i.e. flow from a ViewModel, or flow of fake data i.e. from a Preview.
        val lazyPagingItems = flow.collectAsLazyPagingItems()
        LazyColumn(modifier = Modifier.fillMaxSize().background(Color.Red)) {
            items(count = lazyPagingItems.itemCount) { index ->
                val item = lazyPagingItems[index]
                Text(text = "$item", fontSize = 35.sp, color = Color.Black)
            }
        }
    }

    /**
     * The preview function should be responsible for creating the fake data and passing it to the
     * function that displays it.
     */
    // create list of fake data for preview
    val fakeData = List(10) { "preview item $it" }
    // create pagingData from a list of fake data
    val pagingData = PagingData.from(fakeData)
    // pass pagingData containing fake data to a MutableStateFlow
    val fakeDataFlow = MutableStateFlow(pagingData)
    // pass flow to composable
    DisplayPaging(flow = fakeDataFlow)
}