Ich habe ein Column
Widget mit zwei TextField
Widgets als Kinder und ich möchte etwas Platz zwischen beiden haben.
Ich habe es bereits versucht mainAxisAlignment: MainAxisAlignment.spaceAround
, aber das Ergebnis war nicht das, was ich wollte.
dart
flutter
flutter-layout
Sachin Soma
quelle
quelle
margin: EdgeInsets.only(left: 200.0, top: 300.0))
Antworten:
Sie können ein
Padding
Widget zwischen diesen beiden Widgets verwenden oder diese Widgets mit einemPadding
Widget umschließen.Aktualisieren
Das SizedBox- Widget kann zwischen zwei Widgets verwendet werden, um Platz zwischen zwei Widgets zu schaffen, und macht Code lesbarer als das Auffüllen von Widgets.
Ex:
Column( children: <Widget>[ Widget1(), SizedBox(height: 10), Widget2(), ], ),
quelle
column
wirklich , diese Klasse hätte diese Eigenschaft enthalten. Es wird eine Verschwendung von Codierungszeit sein, um eine Polsterung zwischen allen Kindern zu erhalten.Padding
Widget zwischen den beiden Widgets liegt. Es ist nicht so, dass die 2 Widgets Kinder von werdenPadding
.Sie können ein
SizedBox
mit einem bestimmtenheight
zwischen die Widgets setzen, wie folgt:Column( children: <Widget>[ FirstWidget(), SizedBox(height: 100), SecondWidget(), ], ),
Warum sollten Sie dies dem Einwickeln der Widgets vorziehen
Padding
? Lesbarkeit! Es gibt weniger visuelle Boilerplate, weniger Einrückungen und der Code folgt der typischen Lesereihenfolge.quelle
SizedBox
ist nur ein normales Widget, das die gewünschte Größe hat, die es während des Layouts zu erreichen versucht, aber nichts rendert. Alle Blatt-Widgets wie Text oder Container sind ebenfalls leer, das ist also in Ordnung.Sie können
Wrap()
stattdessen das Widget verwendenColumn()
, um Platz zwischen untergeordneten Widgets hinzuzufügen. Verwenden Sie die Eigenschaft spacing, um den gleichen Abstand zwischen untergeordneten Widgets zu erhaltenWrap( spacing: 20, // to apply margin in the main axis of the wrap runSpacing: 20, // to apply margin in the cross axis of the wrap children: <Widget>[ Text('child 1'), Text('child 2') ] )
quelle
runSpacing
anstelle vonspacing
für Lücken zwischen vertikal beabstandeten ElementenVerwenden Sie einfach Polsterung, um es wie folgt zu wickeln:
Column( children: <Widget>[ Padding( padding: EdgeInsets.all(8.0), child: Text('Hello World!'), ), Padding( padding: EdgeInsets.all(8.0), child: Text('Hello World2!'), ) ]);
Sie können auch Container (Polsterung ...) oder SizeBox (Höhe: xx) verwenden. Der letzte ist der häufigste, hängt jedoch davon ab, wie Sie den Speicherplatz Ihrer Widgets verwalten möchten. Ich verwende gerne das Auffüllen, wenn der Speicherplatz tatsächlich Teil des Widgets ist, und verwende beispielsweise sizebox für Listen.
quelle
Es gibt viele Möglichkeiten, ich liste hier einige auf.
Verwenden Sie
Container
und geben Sie etwas Höhe:Column( children: <Widget>[ Widget1(), Container(height: 10), // set height Widget2(), ], )
Verwenden
Spacer
Column( children: <Widget>[ Widget1(), Spacer(), // use Spacer Widget2(), ], )
Verwenden
Expanded
Column( children: <Widget>[ Widget1(), Expanded(child: SizedBox()), // use Expanded Widget2(), ], )
Verwenden
mainAxisAlignment
Column( mainAxisAlignment: MainAxisAlignment.spaceAround, // mainAxisAlignment children: <Widget>[ Widget1(), Widget2(), ], )
Verwenden
Wrap
Wrap( direction: Axis.vertical, // make sure to set this spacing: 20, // set your spacing children: <Widget>[ Widget1(), Widget2(), ], )
quelle
Spacer erstellt einen flexiblen Bereich zum Einfügen in ein [flexibles] Widget. (Wie eine Spalte)
quelle
Auf die gleiche Weise, wie SizedBox oben zum Zwecke der Codelesbarkeit verwendet wird , können Sie das Padding-Widget auf die gleiche Weise verwenden und müssen es nicht zu einem übergeordneten Widget für eines der untergeordneten Elemente der Spalte machen
Column( children: <Widget>[ FirstWidget(), Padding(padding: EdgeInsets.only(top: 40.0)), SecondWidget(), ] )
quelle
Sie können dieses Problem auf verschiedene Arten lösen.
quelle
Spalten hat standardmäßig keine Höhe. Sie können Ihre Spalte in den Container einschließen und Ihrem Container die spezifische Höhe hinzufügen. Dann können Sie etwas wie das Folgende verwenden:
Container( width: double.infinity,//Your desire Width height: height,//Your desire Height child: Column( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ Text('One'), Text('Two') ], ), ),
quelle
Hier gibt es viele Antworten, aber ich werde hier die wichtigste nennen, die jeder verwenden sollte.
1. Spalte
Column( children: <Widget>[ Text('Widget A'), //Can be any widget SizedBox(height: 20,), //height is space betweeen your top and bottom widget Text('Widget B'), //Can be any widget ], ),
2. Wickeln
Wrap( direction: Axis.vertical, // We have to declare Axis.vertical, otherwise by default widget are drawn in horizontal order spacing: 20, // Add spacing one time which is same for all other widgets in the children list children: <Widget>[ Text('Widget A'), // Can be any widget Text('Widget B'), // Can be any widget ] )
quelle
Column(children: <Widget>[ Container(margin: EdgeInsets.only(top:12, child: yourWidget)), Container(margin: EdgeInsets.only(top:12, child: yourWidget)) ]);
quelle
Möglicherweise müssen Sie das Widget SizedBox () zwischen den untergeordneten Elementen Ihrer Spalte verwenden. Hoffe das wird nützlich sein
quelle
Die Größe der Box hilft nicht, wenn sich das Telefon im Querformat befindet.
body: Column( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.stretch, children: <Widget>[ Expanded( child: Container( margin: EdgeInsets.all(15.0), decoration: BoxDecoration( color: Color(0xFF1D1E33), borderRadius: BorderRadius.circular(10.0), ), ), ), Expanded( child: Container( margin: EdgeInsets.all(15.0), decoration: BoxDecoration( color: Color(0xFF1D1E33), borderRadius: BorderRadius.circular(10.0), ), ), ), Expanded( child: Container( margin: EdgeInsets.all(15.0), decoration: BoxDecoration( color: Color(0xFF1D1E33), borderRadius: BorderRadius.circular(10.0), ), ), ), ], )
quelle