为什么我的文本在此 Android Jetpack Compose 列表的每一行中都被截断了？

Question

我创建了一个 LazyColumn 站点，当文本太长时它会剪辑文本，即使我指定了 overflow = TextOverflow.Ellipsis。我该如何解决这个问题？

@Composable
fun StationsList(stations: List<StationAqi>) {
    LazyColumn(
        contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp),
        verticalArrangement = Arrangement.spacedBy(4.dp),
    ) {
        stations.map { station ->
            item {
                StationListItem(station = station)
            }
        }
    }
}

@Composable
fun StationListItem(station: StationAqi) {
    LazyRow(
        horizontalArrangement = Arrangement.spacedBy(8.dp),
        verticalAlignment = CenterVertically,
        modifier = Modifier.padding(horizontal = 0.dp, vertical = 8.dp)
    ) {
        item {
            Surface(
                color = colorFromAqi(station.aqi),
                shape = MaterialTheme.shapes.medium,
            ) {
                Box(
                    modifier = Modifier
                        .defaultMinSize(44.dp, Dp.Unspecified)
                        .padding(PaddingValues(horizontal = 8.dp, vertical = 4.dp)),
                    contentAlignment = Center,
                ) {
                    Text(
                        text = station.aqi,
                        textAlign = TextAlign.Center,
                        overflow = TextOverflow.Ellipsis,
                    )
                }

            }
        }
        item {
            Text(text = station.station.name)
        }
    }
}

data class StationAqi(
    val uid: Int,
    val lat: Double,
    val lon: Double,
    val aqi: String,
    val station: Station
)

data class Station(
    val name: String,
    val time: String
)

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ZephyrTheme {
        StationsList(listOf(
            StationAqi(1, 1.0, 1.0, "2", Station("Oakland-Laney College, Alameda, California", "2022-01-07T16:00:00-08:00")),
            StationAqi(2, 1.0, 1.0, "45", Station("San Pablo-Rumrill, Contra Costa, California", "2022-01-07T16:00:00-08:00")),
            StationAqi(3, 1.0, 1.0, "122", Station("San Francisco CA","2022-01-07T16:00:00-08:00")),
            StationAqi(4, 1.0, 1.0, "245", Station("Palo Alto CA", "2022-01-07T16:00:00-08:00"))


        ))
    }
}

@Preview()
@Composable
fun StationListItemPreview() {
    ZephyrTheme {
        StationListItem(station = StationAqi(1, 1.0, 1.0, "2", Station("Oakland-Laney College, Alameda, California", "2022-01-07T16:00:00-08:00")))
    }
}

Answer 1

事实证明问题不在于 LazyColumn，而在于每一行。如您所见，StationListItem() 创建了 LazyRow，但实际上它应该创建 Row，因为我没有尝试创建水平滚动列表。

我也（尴尬地）在错误的文本字段上设置了 overflow 属性。将其切换为正确的并添加 maxLines = 1 根据需要用“...”截断文本。

修复是将 StationListItem 函数更改为以下内容：

@Composable
fun StationListItem(station: StationAqi) {
    Row(
        horizontalArrangement = Arrangement.spacedBy(8.dp),
        verticalAlignment = CenterVertically,
        modifier = Modifier.padding(horizontal = 0.dp, vertical = 8.dp)
    ) {
        Surface(
            color = colorFromAqi(station.aqi),
            shape = MaterialTheme.shapes.medium,
        ) {
            Box(
                modifier = Modifier
                    .defaultMinSize(44.dp, Dp.Unspecified)
                    .padding(PaddingValues(horizontal = 8.dp, vertical = 4.dp)),
                contentAlignment = Center,
            ) {
                Text(
                    text = station.aqi,
                    textAlign = TextAlign.Center,
                )
            }

        }
        Text(
            text = station.station.name,
            overflow = TextOverflow.Ellipsis,
            maxLines = 1
        )
    }
}

为什么我的文本在此 Android Jetpack Compose 列表的每一行中都被截断了？

Why is my text clipped in each row of this Android Jetpack Compose list?

android

kotlin

android-jetpack-compose

android-jetpack-compose-text

android-jetpack-compose-list