0
335
VisualizaçõesJetpack 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, ) } } 
2 Respostas
Responde à pergunta0
Puede 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("Question 1 : How many cars are in the garage?", 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.
0
Puede usar textAlign para alinear su texto horizontalmente y wrapContentHeight para alinear su texto verticalmente dentro de Text componible
Ejemplo de texto centrado (tanto horizontal como vertical) dentro de 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 del 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 ) }