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

Question

无论我使用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…

Answer 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
)

Answer 2

您可以将

overflow

可组合项中的

Text

属性设置为

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
    )
}

Answer 3

要显示三个点，您需要为根指定明确的宽度参数。就我而言，情况就是这样。

Column(modifier = Modifier.width(150.dp)) {
        MovieImage(
            url = movie.posterPath, modifier = Modifier
                .height(190.dp)
                .padding(8.dp)
                .clip(
                    RoundedCornerShape(CornerSize(8.dp))
                )
        )
        Text(
            text = movie.title,
            color = Color.White,
            modifier = Modifier.padding(8.dp),
            maxLines = 1,
            overflow = TextOverflow.Ellipsis
        )
}

Answer 4

在你的xml中使用代码

<TextView
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:id="@+id/last_message_preview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            tools:text="preview"
            android:ellipsize="end" //THIS WHAT YOU NEED
            android:maxLines="1"/> //THIS WHAT YOU NEED
    </LinearLayout>