El texto rotado se recorta.
Cuando intento rotar una columna con texto y aplicarle .fillMaxWidth(), todo el texto largo se ajusta a la pantalla:
@Composable
private fun Content() {
Column(
Modifier
.fillMaxWidth() // VARIANTE 1
.fillMaxHeight()
.background(Color.White)
) {
BoxWithConstraints(
modifier = Modifier
.fillMaxSize()
) {
val W = this.maxWidth
val H = this.maxHeight
Column(
Modifier
.rotate(-90f)
.height(W)
.width(H),
verticalArrangement = Arrangement.Center
) {
Text(
text = "Texto muy muy muy muy muy muy muy muy largo",
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight()
.padding(end = 10.dp),
maxLines = 1,
textAlign = TextAlign.End
)
}
}
}
}
Pero cuando limito el ancho de la columna principal con 200.dp, mi línea de texto parece cortarse al mismo ancho, 200.dp:
@Composable
private fun Content() {
Column(
Modifier
.width(200.dp) // VARIANTE 2
.fillMaxHeight()
.background(Color.White)
) {
BoxWithConstraints(
modifier = Modifier
.fillMaxSize()
) {
val W = this.maxWidth
val H = this.maxHeight
Column(
Modifier
.rotate(-90f)
.height(W)
.width(H),
verticalArrangement = Arrangement.Center
) {
Text(
text = "Texto muy muy muy muy muy muy muy muy largo",
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight()
.padding(end = 10.dp),
maxLines = 1,
textAlign = TextAlign.End
)
}
}
}
}
¿Por qué ocurre esto, y cómo puedo hacer que la línea de texto largo y rotado se ajuste en una columna estrecha?
ACTUALIZACIÓN:
El resultado final que quiero lograr es la barra de aplicación en el lado izquierdo, como se muestra en la captura de pantalla a continuación:
Pero no logro que el texto del título entre completamente, se trunca.
davy.ai
La solución es usar el modificador
maxWidth
en el componenteText
en lugar defillMaxWidth
:De esta manera, el texto será truncado si es más largo que
200.dp
y se ajustará en laColumna
con una anchura de200.dp
.