如何在 Android Jetpack Compose 的文本行末尾显示省略号（三个点）？答案

【问题标题】：How to show ellipsis (three dots) at the end of a Text line in Android Jetpack Compose?如何在 Android Jetpack Compose 的文本行末尾显示省略号（三个点）？
【发布时间】：2021-01-15 12:45:50
【问题描述】：

无论我使用androidx.compose.foundation.text.BasicText 还是androidx.compose.material.Text，如果没有足够的空间放置文本，它将换行到下一行，例如：

@Composable
fun EllipsisExample() {
    Box(modifier = Modifier.width(160.dp)) {
        Text("Lorem ipsum dolor sit amet.")
    }
}

渲染：

我怎么能强制它成为一条线并在它的末尾画省略号？在这种情况下我想要的结果是这样的：

Lorem ipsum dolor s…

【问题讨论】：

标签： android android-jetpack android-jetpack-compose

【解决方案1】：

BasicText 和 Text 都有 overflow 和 maxLines 参数可以帮助您。

Text(myText, maxLines = 1, overflow = TextOverflow.Ellipsis)

这是一个完整的单行示例：

import androidx.compose.material.Text
import androidx.compose.ui.text.style.TextOverflow

@Composable
fun EllipsisExample() {
    Box(modifier = Modifier.width(160.dp)) {
        Text(
            text = "Lorem ipsum dolor sit amet.",
            maxLines = 1,
            overflow = TextOverflow.Ellipsis
        )
    }
}

当然，您可以调整maxLines 以满足您的需求：

Text(
    text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
    maxLines = 2,
    overflow = TextOverflow.Ellipsis
)

【讨论】：

【解决方案2】：

您可以将Text中的overflow属性设置为TextOverflow.Ellipsis 例如：

Text(
    text = "Compose Previews are great to check quickly how a composable layout looks like",
    maxLines = 2,
    overflow = TextOverflow.Ellipsis
)

如果您想使省略号动态化，您应该使用 Compose 的状态 API，例如 remember 和 mutableStateOf，因此对状态的任何更改都会自动更新 UI

@Composable
fun MessageCard(msg: String) {
var isExpanded by remember { mutableStateOf(false) }
Text(
     text = msg,
     modifier = Modifier.padding(all = 4.dp),
     style = MaterialTheme.typography.body2,
     maxLines = if (isExpanded) Int.MAX_VALUE else 1,
     overflow = if (isExpanded) TextOverflow.Visible else TextOverflow.Ellipsis
    )
}

【讨论】：