如何在 jetpack compose Preview 中显示 Kotlin 协程流数据？答案

【问题标题】：How to show Kotlin coroutine flow data in jetpack compose Preview?如何在 jetpack compose Preview 中显示 Kotlin 协程流数据？
【发布时间】：2021-10-07 00:24:49
【问题描述】：

我将数据列表传递给可组合函数 (data object of type Flow<List<Device>>)。我在可组合内使用流方法collectAsState 将此数据用作状态，构建应用程序后我可以在模拟器中看到列表。请注意，撰写预览面板不会显示我传递给可组合项的虚假数据。

@Preview
@Composable
PreviewHomeScreen() {
  val devices = flow { emit(
    listOf(Device(1, "Device Name 1"), Device(2, "Device Name 2"))
  )}
  HomeScreen(devices)
}

预览窗口有什么工作可以显示Flow类型的数据吗？

【问题讨论】：

标签： android kotlin-coroutines android-jetpack-compose preview kotlin-flow

【解决方案1】：

我无法解释为什么它不起作用。这可能不是预览的目的。

您应该考虑关注点分离。管理流程可能不是您的 Composable 责任。

所以只预览不管理流程的部分：

@Composable
HomeScreen() {
  val devicesFlow = flow { emit(
    listOf(Device(1, "Device Name 1"), Device(2, "Device Name 2"))
  )}

  val devicesState = devicesFlow.collectAsState(initial = emptyList())

  // HomeScreen recomposed each time flow emit a new list of devices
  HomeScreen(devicesState.value)
}

@Composable
HomeScreen(devices: List<Device>) {
  // Your code here
}

@Preview
@Composable
PreviewHomeScreen() {
  val devices = listOf(Device(1, "Device Name 1"), Device(2, "Device Name 2"))
  HomeScreen(devices)
}

【讨论】：