¿Cómo mostrar puntos suspensivos (tres puntos) al final de una línea de texto en Android Jetpack Compose?

Si uso androidx.compose.foundation.text.BasicText o androidx.compose.material.Textosi no hay suficiente espacio para un texto, pasa a la siguiente línea, por ejemplo:

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

renders:

¿Cómo podría obligarlo a ser una sola línea y dibujar puntos suspensivos al final? El resultado que quiero en este caso es algo como:

Lorem ipsum dolor s…

Ambas cosas BasicText y Texto tener overflow y maxLines argumentos que te pueden ayudar.

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

Aquí hay un ejemplo completo de una sola línea:

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

Por supuesto que puedes sintonizar maxLines para adaptarse a sus necesidades:

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

Puede configurar el overflow atributo en Text componible a TextOverflow.Ellipsis
Ex:

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

Si desea que los puntos suspensivos sean dinámicos, debe usar las API de estado de Compose como remember y mutableStateOfpor lo que cualquier cambio en el estado actualiza automáticamente la interfaz de usuario

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

Para mostrar tres puntos, debe dar un parámetro de ancho definido a su raíz. En mi caso es así.

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