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

Question

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

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

有没有什么作品可以在预览窗口显示Flow类型的数据？

Answer 1

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

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

因此，只需预览不管理流程的部分：

@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)
}