Jetpack Compose – Centrar texto

Estoy usando Jetpack Compose para crear una tarjeta flash simple. La idea es que hagas clic en la tarjeta flash y te dará la respuesta. Sin embargo, estoy atascado en un problema básico.

Lamentablemente… ni siquiera pude encontrar la documentación oficial, por lo que mi estilo de aprendizaje ha sido confiar en el sistema de autocorrección…

De todos modos, creo que el problema es con Box() o Text(). He agregado un Align.CenterEnd para la Gravedad de la caja. Sin embargo, esta parece ser la única forma de centrar en términos de la caja. Por otro lado, Text() no proporciona ningún método para hacerlo (tiene gravedad pero no parece estar cambiando nada)

Una mano en la dirección correcta sería increíble.

En una nota al margen, sé que esto sería dar respuestas gratuitas. Pero, ¿cómo cambiaría el texto de $ pregunta dentro del clic al hacer clic? Como pensaba Composables refrescan?… pues, ¿deben regenerarse en pantalla? ¿tal vez no?

¡Gracias!

 val typography = MaterialTheme.typography

        val context = ContextAmbient.current
        var question = "How many Bananas should go in my Smoothie?"


        Column(modifier = Modifier.padding(30.dp).then(Modifier.fillMaxWidth())
                .then(Modifier.wrapContentSize(Alignment.Center))
                .clickable(onClick = { Toast.makeText(context, "3 Bananas are needed!", Toast.LENGTH_LONG).show()} ) /*question = "3 Bananas required"*/
                .clip(shape = RoundedCornerShape(16.dp))) {
            Box(modifier = Modifier.preferredSize(350.dp)
                    .gravity(align = Alignment.CenterHorizontally)
                    .border(width = 4.dp, color = Gray, shape = RoundedCornerShape(16.dp)),
            shape = RoundedCornerShape(2.dp),
            backgroundColor = DarkGray,
            gravity = Alignment.CenterEnd) {
                Text("$question",
                style = typography.h4,
                )
            }
        }

Para definir cómo alinear el texto horizontalmente puedes aplicar textAlign = TextAlign.Center en el Text:

Column(modifier = Modifier
            .padding(30.dp)
            .fillMaxWidth()
            .wrapContentSize(Alignment.Center)
            .clickable(onClick = { } ) /*question = "3 Bananas required"*/
            .clip(shape = RoundedCornerShape(16.dp)),
) {
    Box(modifier = Modifier
            .preferredSize(350.dp)
            .border(width = 4.dp, color = Gray, shape = RoundedCornerShape(16.dp)),
             alignment = Alignment.Center
    ) {
        Text(
           text = "Question 1 : How many cars are in the garage?",
           modifier = Modifier.padding(16.dp),
           textAlign = TextAlign.Center,
           style = typography.h4,
        )
      //... 
   }
}
  

Sobre el texto.

Puedes usar algo como:

var text by remember { mutableStateOf(("How many cars are in the garage?")) }

En su elemento en el que se puede hacer clic:

.clickable(onClick = { text= "After clicking"} )

en su texto:

  Text(text, 
        textAlign = TextAlign.Center,
        ...)

Es solo un simple. En lugar de una cadena estática, puede usar una estructura dinámica para almacenar y actualizar el valor.

Puedes usar textAlign para alinear su texto horizontal y wrapContentHeight para alinear su texto verticalmente dentro Text componible

Ejemplo de texto centrado (tanto horizontal como vertical) dentro Text

Text(
    text = "How many cars are in the garage",
    textAlign = TextAlign.Center, // make text center horizontal
    modifier = Modifier
        .width(150.dp)
        .height(150.dp)
        .background(Color.Cyan)
        .wrapContentHeight() // make text center vertical
)

Ejemplo alinear la parte inferior con el centro horizontal dentro Text

Text(
    text = "How many cars are in the garage",
    textAlign = TextAlign.Center, // make text center horizontal
    modifier = Modifier
        .width(150.dp)
        .height(150.dp)
        .background(Color.Cyan)
        .wrapContentHeight(Alignment.Bottom) // align bottom
)

Ejemplo alinear la parte inferior con el centro horizontal dentro de un Box

Box(modifier = Modifier
    .width(150.dp)
    .height(150.dp)
    .background(Color.Cyan),
    contentAlignment = Alignment.BottomCenter
) {
    Text(
        text = "How many cars are in the garage",
        textAlign = TextAlign.Center
    )
}

Box(contentAlignment = Alignment.Center, modifier = Modifier.fillMaxHeight()) 
{
    Text(text = "Text"),
    textAlign = TextAlign.Center,
}

// You can apply textAlign = TextAlign.Center

 Text( text = "My name is $name",
        color = MaterialTheme.colors.primary,
        fontSize = 32.sp,
        fontFamily = FontFamily.Cursive,
        textAlign = TextAlign.Center,
        modifier = Modifier.clickable {
            Toast.makeText(context, "Hello Friends"Toast.LENGTH_LONG).show()
        })