5. 将查询连接到UI

在本章中，您将要显示一系列启动站点在一个 LazyColumn.

配置LaunchListAdapter

在LaunchList中，声明一个空的LaunchListQuery.Launch列表：

app/src/main/java/com/example/rocketreserver/LaunchList.kt

1
@Composable
2
fun LaunchList(onLaunchClick: (launchId: String) -> Unit) {
3
  var launchList by remember { mutableStateOf(emptyList<LaunchListQuery.Launch>()) }

LaunchListQuery.Launch是从您的LaunchList生成的类型安全生成模型。

为项目创建UI

更新LaunchItem composable，将其传递一个LaunchListQuery.Launch并显示ID：

app/src/main/java/com/example/rocketreserver/LaunchList.kt

1
@Composable
2
private fun LaunchItem(launch: LaunchListQuery.Launch, onClick: (launchId: String) -> Unit) { 
3
    ListItem(
4
        modifier = Modifier.clickable { onClick(launch.id) }, 
5
        headlineText = {
6
            // Mission name
7
            Text(text = "Launch ${launch.id}") 
8
        },

使用列表中的数据

填充launchList，使用响应中的数据，并在LazyColumn中使用它：

app/src/main/java/com/example/rocketreserver/LaunchList.kt

1
@Composable
2
fun LaunchList(onLaunchClick: (launchId: String) -> Unit) {
3
  var launchList by remember { mutableStateOf(emptyList<LaunchListQuery.Launch>()) } 
4
  LaunchedEffect(Unit) {
5
    val response = apolloClient.query(LaunchListQuery()).execute()
6
    launchList = response.data?.launches?.launches?.filterNotNull() ?: emptyList() 
7
  }
8

9
  LazyColumn {
10
    items(launchList) { launch -> 
11
      LaunchItem(launch = launch, onClick = onLaunchClick)
12
    }
13
  }
14
}

注意：因为在架构定义中launches是可为空的Launch对象列表。

`测试您的查询`

点击运行按钮。现在您的UI已与GraphQL查询相连 🚀

外观有点单调。接下来，您将为列表添加更多信息，使其看起来更美观！

上一页
4. 执行您的第一个查询下一页
6. 为列表添加更多信息