Perché la riga non è centrata orizzontalmente all'interno di una colonna

Aug 17 2020

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

1 Uni Aug 17 2020 at 16:14

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 mainAxisAlignmentdella riga su MainAxisAlignment.centerfunzionerà solo se è presente un widget all'interno della riga. Dice solo ai suoi figli di andare al centro.

2 faroukosama Aug 17 2020 at 16:17

Per impostazione predefinita, la mainAxisSizeproprietà è MainAxisSize.maxnel 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,
    ...
)
1 Yash Aug 17 2020 at 16:08

Prova a passare l' mainAxisAlignmentargomento al tuo Row. Per esempio

Row(
    mainAxisAlignment: MainAxisAlignment.center,
    ...
)

Ciò renderà i figli della riga centrati.