Perché la riga non è centrata orizzontalmente all'interno di una colonna
Come sappiamo per impostazione predefinita, la colonna centra orizzontalmente i suoi figli se ha tutta la larghezza.Ma quando ho posizionato due carte e una riga all'interno di una colonna, due carte vengono posizionate orizzontalmente al centro per svolazzare ma la riga rimane la stessa nella sua posizione iniziale? Perché?
Penso che la riga dovrebbe essere al centro orizzontalmente perché nel mio caso è figlia di Column, ma non lo è.
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'),
],
),
],
),
),
);
}
}
output di questo codice
Risposte
Ciò sta accadendo perché per impostazione predefinita, Row occuperà l'intero spazio orizzontale. Puoi aggiustarlo dicendogli di occupare il minor spazio possibile:
Row(
mainAxisSize: MainAxisSize.min,
...
)
L'impostazione mainAxisAlignment
della riga su MainAxisAlignment.center
funzionerà solo se è presente un widget all'interno della riga. Dice solo ai suoi figli di andare al centro.
Per impostazione predefinita, la mainAxisSize
proprietà è MainAxisSize.max
nel widget Riga , quello che devi fare è semplicemente cambiarlo in MainAxisSize.min
, Per influenzare dal widget genitore, che in questo esempio è la Colonna
Row(
mainAxisSize: MainAxisSize.min,
...
)
Prova a passare l' mainAxisAlignment
argomento al tuo Row. Per esempio
Row(
mainAxisAlignment: MainAxisAlignment.center,
...
)
Ciò renderà i figli della riga centrati.