Flattern: Spalte vertikal zentrieren

96

Wie zentriere ich eine Spalte in Flutter vertikal? Ich habe das Widget "new Center" verwendet. Ich habe das Widget "new Center" verwendet, aber meine Spalte wird nicht vertikal zentriert. Irgendwelche Ideen wären hilfreich ....

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("Thank you"),
    ),
    body: new Center(
      child: new Column(
        children: <Widget>[
          new Padding(
            padding: new EdgeInsets.all(25.0),
            child: new AnimatedBuilder(
              animation: animationController,
              child: new Container(
                height: 175.0,
                width: 175.0,
                child: new Image.asset('assets/angry_face.png'),
              ),
              builder: (BuildContext context, Widget _widget) {
                return new Transform.rotate(
                  angle: animationController.value * 6.3,
                  child: _widget,
                );
              },
            ),
          ),
          new Text('We are glad we could serve you...', style: new TextStyle(
              fontSize: 16.0,
              fontWeight: FontWeight.w600,
              color: Colors.black87),),
          new Padding(padding: new EdgeInsets.symmetric(vertical: 5.0, horizontal: 0.0)),
          new Text('We appreciate your feedback ! !', style: new TextStyle(
              fontSize: 13.0,
              fontWeight: FontWeight.w200,
              color: Colors.black87),),
        ],
      ),
    ),
  );
}
Zeusox
quelle

Antworten:

164

Die von Aziz vorgeschlagene Lösung wäre:

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children:children,
)

Es wäre wegen der Polsterung nicht genau in der Mitte:

padding: new EdgeInsets.all(25.0),

Um die mittlere Spalte genau zu erstellen - zumindest in diesem Fall - müssten Sie die Polsterung entfernen.

Zeusox
quelle
45

Versuchen:

Column(
 mainAxisAlignment: MainAxisAlignment.center,
 crossAxisAlignment: CrossAxisAlignment.center,
 children:children...)
Aziza
quelle
2
Versuchte dies vor. Es zentriert es, aber es zentriert es nicht TOT?
Zeusox
3
Es war ein Polsterproblem. Jetzt funktioniert es gut, danke!
Zeusox
17

Verwenden Sie mit Column:

mainAxisAlignment: MainAxisAlignment.center

Die untergeordneten Elemente werden vertikal zur Mitte des übergeordneten Bereichs ausgerichtet

Deepak Swain
quelle
11

Mit den Eigenschaften mainAxisAlignment und crossAxisAlignment steuern Sie, wie eine Zeile oder Spalte ihre untergeordneten Elemente ausrichtet. Bei einer Reihe verläuft die Hauptachse horizontal und die Querachse vertikal. Bei einer Spalte verläuft die Hauptachse vertikal und die Querachse horizontal.

 mainAxisAlignment: MainAxisAlignment.center,
 crossAxisAlignment: CrossAxisAlignment.center,
DuhAlonso
quelle
11

Probier diese. Es zentriert vertikal und horizontal.

Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: children,
  ),
)
Lucas Chwe
quelle
5

Eine andere Lösung!

Wenn Sie Widgets in vertikaler Mittelform festlegen möchten, können Sie ListView dafür verwenden. Zum Beispiel: Ich habe drei Schaltflächen verwendet und sie in ListView hinzugefügt, gefolgt von

shrinkWrap: true -> Mit dieser ListView wird nur der benötigte Platz belegt.

import 'package:flutter/material.dart';

class List extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final button1 =
        new RaisedButton(child: new Text("Button1"), onPressed: () {});
    final button2 =
        new RaisedButton(child: new Text("Button2"), onPressed: () {});
    final button3 =
        new RaisedButton(child: new Text("Button3"), onPressed: () {});
    final body = new Center(
      child: ListView(
        shrinkWrap: true,
        children: <Widget>[button1, button2, button3],
     ),
    );

    return new Scaffold(
        appBar: new AppBar(
          title: Text("Sample"),
        ),
        body: body);
  }
}    
void main() {
  runApp(new MaterialApp(
    home: List(),
  ));
}

Ausgabe: Geben Sie hier die Bildbeschreibung ein

jitsm555
quelle
4

Für mich war das Problem, dass es innerhalb der Spalte erweitert wurde, die ich entfernen musste, und es funktionierte.

Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Expanded( // remove this
              flex: 2,
              child: Text("content here"),
            ),
          ],
        )
Eric
quelle
1

Du könntest benutzen. mainAxisAlignment:MainAxisAlignment.center Dadurch wird das Material durch die Mitte in der Spalte weise. `crossAxisAlignment: CrossAxisAlignment.center 'Hiermit werden die Elemente in der Mitte zeilenweise ausgerichtet.

Container( alignment:Alignment.center, Child: Column () )

Einfach benutzen. Center ( Child: Column () ) oder Rap mit Padding Widget. Stellen Sie die Polsterung so ein, dass sich die untergeordneten Spalten in der Mitte befinden.

SR Keshav
quelle