Wie zeigt man Auslassungspunkte (drei Punkte) am Ende einer Textzeile in Android Jetpack Compose an?

Ob ich benutze androidx.compose.foundation.text.BasicText oder androidx.compose.material.Textwenn nicht genügend Platz für einen Text vorhanden ist, wird er in die nächste Zeile umgebrochen, zum Beispiel:

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

macht:

Wie könnte ich erzwingen, dass es eine einzelne Linie ist, und am Ende Auslassungspunkte zeichnen? Das Ergebnis, das ich in diesem Fall möchte, ist ungefähr so:

Lorem ipsum dolor s…

Beide BasicText und Text haben overflow und maxLines Argumente, die Ihnen helfen können.

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

Hier ist ein vollständiges einzeiliges Beispiel:

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

Natürlich kann man tunen maxLines passend zu Ihren Anforderungen:

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

Sie können die einstellen overflow Attribut ein Text komponierbar zu TextOverflow.Ellipsis
Ex:

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

Wenn Sie die Auslassungspunkte dynamisch gestalten möchten, sollten Sie die Zustands-APIs von Compose wie verwenden remember und mutableStateOfsodass alle Statusänderungen automatisch die Benutzeroberfläche aktualisieren

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

Um drei Punkte anzuzeigen, müssen Sie Ihrer Wurzel einen bestimmten Breitenparameter geben. In meinem Fall ist es so.

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