¿Por qué Row no se centra horizontalmente dentro de una columna?
Como sabemos por defecto, Column centra horizontalmente a sus hijos si tiene el ancho completo. Pero cuando coloco dos cartas y una fila dentro de una columna, ¿dos cartas se colocan horizontalmente en el centro por aleteo pero la fila permanece igual en su posición inicial? ¿Por qué?
Creo que la fila debería estar horizontalmente en el centro porque es un elemento secundario de Column en mi caso, pero no lo es.
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter App'),
),
body: Container(
color: Colors.purple,
height: double.infinity,
child: Column(
// mainAxisAlignment: MainAxisAlignment.center,
// crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Card(
child: Text(
'Chart',
style: TextStyle(fontSize: 20.0),
),
elevation: 5,
color: Colors.blue,
),
Card(
child: Text(
'list of tx',
style: TextStyle(
fontSize: 20.0,
),
),
color: Colors.purple,
),
Row(
children: [
Text('this is row'),
],
),
],
),
),
);
}
}
salida de este código
Respuestas
Esto sucede porque, de forma predeterminada, Row ocupará todo el espacio horizontal. Puede solucionarlo diciéndole que ocupe el menor espacio posible:
Row(
mainAxisSize: MainAxisSize.min,
...
)
La configuración de la mainAxisAlignment
fila en MainAxisAlignment.center
funcionará solo si hay un widget dentro de la fila. Solo les dice a sus hijos que vayan al centro.
Por defecto, la mainAxisSize
propiedad está MainAxisSize.max
en el widget de fila , lo que tiene que hacer es simplemente cambiarlo a MainAxisSize.min
, afectar por el widget principal, que en este ejemplo es la columna
Row(
mainAxisSize: MainAxisSize.min,
...
)
Intente pasar el mainAxisAlignment
argumento a su fila. Por ejemplo
Row(
mainAxisAlignment: MainAxisAlignment.center,
...
)
Esto hará que los hijos de la fila estén centrados.