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

Question

我将数据列表传递给可组合函数( 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类型的数据有什么工作吗？

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