5. 将查询连接到您的 UI

在本章中，您将展示一组发射在一个LazyColumn.

设置 LaunchList 组合tens

在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 是从您的 Launch 列表生成的类型安全的模型。GraphQL 查询。

为项目制作UI

更新 LaunchItem 可组合，向其传递一个 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 对象的列表。

测试您的查询

点击运行按钮。您现在已将连接到您的GraphQL查询的UI连接上了 🚀

不过，看起来有点单调。接下来，您将向列表添加更多信息以使它看起来更漂亮！

4. 执行您的第一个查询

6. 向列表添加更多信息