es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

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.

Tags:  , ,

Answer

  1. Avatar for davy.ai

    La solución es usar el modificador maxWidth en el componente Text en lugar de fillMaxWidth:

    Text(
        text = "Texto largo largo largo largo largo largo largo largo",
        modifier = Modifier
            .maxWidth(200.dp)
            .wrapContentHeight()
            .padding(end = 10.dp),
        maxLines = 1,
        textAlign = TextAlign.End
    )
    

    De esta manera, el texto será truncado si es más largo que 200.dp y se ajustará en la Columna con una anchura de 200.dp.

Comments are closed.