Jetpack Compose LazyColumn 文本消失

时间:2021-06-07 02:09:18

标签: android android-jetpack android-jetpack-compose android-jetpack-compose-list

我正在尝试使用 Jetpack Compose,但遇到了一个问题,即向上和向下滚动时列表中的所有文本都消失了

List before scrolling down

现在当我向下滚动时,它会变成这样:

List after scrolling down

然后我再次向上滚动

List after scrolling up to the top

这是可组合的代码

val cityList = listOf<String>(
    "Los Angels",
    "New York",
    "São Paulo",
    "Rio de Janeiro",
    "San Diego",
    "Santa Monica",
    "Miami",
    "Orlando",
    "Tampa",
    "Denver"
)

Scaffold(topBar = {
    TopAppBar(
        title = { Text(stringResource(id = R.string.app_name)) },
    )
}) {

    LazyColumn(
        modifier = Modifier
            .fillMaxWidth()
    ) {
        items(cityList) { city ->
            Card(
                elevation = 8.dp,
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(start = 16.dp, end = 16.dp, bottom = 8.dp, top = 8.dp)
            ) {
                Row(verticalAlignment = Alignment.CenterVertically) {
                    Column(modifier = Modifier.padding(16.dp)) {
                        Row(
                            modifier = Modifier
                                .fillMaxWidth(),
                            horizontalArrangement = Arrangement.Center
                        ) {
                            Icon(
                                imageVector = Icons.Filled.LocationOn,
                                contentDescription = null,
                                modifier = Modifier.padding(end = 8.dp)
                            )
                            Text(text = "City $city")
                        }
                        Row(
                            modifier = Modifier.fillMaxWidth(),
                            horizontalArrangement = Arrangement.Center
                        ) {
                            Text(
                                text = "Weather"
                            )
                        }
                        Row(verticalAlignment = Alignment.CenterVertically) {
                            Column() {
                                Text(
                                    text = "Max Temperature 10c"
                                )
                                Text(
                                    text = "Max Temperature 10c"
                                )
                                Text(
                                    text = "Max Temperature 10c"
                                )
                            }
                            Icon(
                                imageVector =
                                Icons.Filled.Favorite,
                                contentDescription = null,
                                modifier = Modifier
                                    .padding(end = 8.dp)
                                    .fillMaxWidth()
                            )
                        }

                    }
                }
            }
        }
    }


}

谁能指出我做错了什么?

1 个答案:

答案 0 :(得分:0)

您使用的是哪个撰写版本?

这似乎是 beta07 上的一个问题,您可以在此处看到: https://issuetracker.google.com/issues/188566058

我在 beta08 上检查了您的代码,似乎可以正常工作。