Mam Column
widżet z dwoma TextField
widżetami jako dzieci i chcę mieć trochę odstępu między nimi.
Już próbowałem mainAxisAlignment: MainAxisAlignment.spaceAround
, ale wynik nie był tym, czego chciałem.
dart
flutter
flutter-layout
Sachin Soma
źródło
źródło
margin: EdgeInsets.only(left: 200.0, top: 300.0))
Odpowiedzi:
Możesz użyć
Padding
widżetu pomiędzy tymi dwoma widżetami lub opakować te widżetyPadding
widżetem.Aktualizacja
Widget SizedBox może być używany między dwoma widżetami, aby dodać odstęp między dwoma widżetami i sprawia, że kod jest bardziej czytelny niż widżet wypełniający.
Dawny:
Column( children: <Widget>[ Widget1(), SizedBox(height: 10), Widget2(), ], ),
źródło
column
klasa -klasa zawierała tę właściwość. Szkoda czasu na kodowanie, aby uzyskać wyściółkę między wszystkimi dziećmi.Padding
widżet znajduje się pomiędzy dwoma widżetami. Nie chodzi o to, że 2 widżety stają się dziećmiPadding
.Możesz umieścić
SizedBox
konkretnyheight
między widżetami, na przykład:Column( children: <Widget>[ FirstWidget(), SizedBox(height: 100), SecondWidget(), ], ),
Dlaczego wolisz to zamiast owijania widżetów
Padding
? Czytelność! Jest mniej wizualnych schematów, mniej wcięć, a kod jest zgodny z typową kolejnością czytania.źródło
SizedBox
jest po prostu zwykłym widżetem, który ma żądany rozmiar, jaki stara się mieć podczas tworzenia układu, ale niczego nie renderuje. Wszystkie widżety typu liść, takie jak Tekst lub Kontener, również są puste, więc to w porządku.Wrap()
zamiast tego możesz użyć widżetu,Column()
aby dodać spację między widżetami podrzędnymi i użyć właściwości spacing, aby uzyskać równe odstępy między dziećmiWrap( 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') ] )
źródło
runSpacing
zamiastspacing
dla przerw między elementami rozmieszczonymi w pioniePo prostu użyj wypełnienia, aby owinąć to w ten sposób:
Column( children: <Widget>[ Padding( padding: EdgeInsets.all(8.0), child: Text('Hello World!'), ), Padding( padding: EdgeInsets.all(8.0), child: Text('Hello World2!'), ) ]);
Możesz również użyć opcji Container (padding ...) lub SizeBox (height: xx). Ostatni z nich jest najbardziej powszechny, ale zależy od tego, jak chcesz zarządzać przestrzenią swoich widżetów. Lubię używać dopełnienia, jeśli przestrzeń jest rzeczywiście częścią widżetu i na przykład używać sizebox dla list.
źródło
Można to zrobić na wiele sposobów, wymieniam kilka tutaj.
Użyj
Container
i podaj trochę wysokości:Column( children: <Widget>[ Widget1(), Container(height: 10), // set height Widget2(), ], )
Posługiwać się
Spacer
Column( children: <Widget>[ Widget1(), Spacer(), // use Spacer Widget2(), ], )
Posługiwać się
Expanded
Column( children: <Widget>[ Widget1(), Expanded(child: SizedBox()), // use Expanded Widget2(), ], )
Posługiwać się
mainAxisAlignment
Column( mainAxisAlignment: MainAxisAlignment.spaceAround, // mainAxisAlignment children: <Widget>[ Widget1(), Widget2(), ], )
Posługiwać się
Wrap
Wrap( direction: Axis.vertical, // make sure to set this spacing: 20, // set your spacing children: <Widget>[ Widget1(), Widget2(), ], )
źródło
Spacer tworzy elastyczną przestrzeń do wstawienia do widżetu [Elastyczny]. (Jak kolumna)
źródło
W ten sam sposób, w jaki SizedBox jest używany powyżej w celu zapewnienia czytelności kodu, możesz użyć widżetu Wypełnienie w ten sam sposób i nie musisz ustawiać go jako widżetu nadrzędnego dla żadnego z elementów podrzędnych kolumny
Column( children: <Widget>[ FirstWidget(), Padding(padding: EdgeInsets.only(top: 40.0)), SecondWidget(), ] )
źródło
Możesz rozwiązać ten problem w inny sposób.
źródło
Kolumny domyślnie nie mają wysokości, możesz zawinąć kolumnę do kontenera i dodać określoną wysokość do kontenera. Następnie możesz użyć czegoś takiego jak poniżej:
Container( width: double.infinity,//Your desire Width height: height,//Your desire Height child: Column( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ Text('One'), Text('Two') ], ), ),
źródło
Odpowiedzi jest wiele, ale tutaj umieszczę najważniejszą, z której każdy powinien skorzystać.
1. Kolumna
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. Zawijaj
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 ] )
źródło
Column(children: <Widget>[ Container(margin: EdgeInsets.only(top:12, child: yourWidget)), Container(margin: EdgeInsets.only(top:12, child: yourWidget)) ]);
źródło
Może być konieczne użycie widżetu SizedBox () między elementami podrzędnymi kolumny. Mam nadzieję, że to się przyda
źródło
Możesz także użyć funkcji pomocniczej, aby dodać odstępy po każdym dziecku.
List<Widget> childrenWithSpacing({ @required List<Widget> children, double spacing = 8, }) { final space = Container(width: spacing, height: spacing); return children.expand((widget) => [widget, space]).toList(); }
Zatem zwrócona lista może zostać użyta jako elementy potomne kolumny
Column( children: childrenWithSpacing( spacing: 14, children: [ Text('This becomes a text with an adjacent spacing'), if (true == true) Text('Also, makes it easy to add conditional widgets'), ], ), );
Nie jestem jednak pewien, czy jest to złe lub czy wiąże się to z obniżeniem wydajności, aby uruchomić dzieci przez funkcję pomocniczą w tym samym celu?
źródło
Rozmiar pudełka nie pomoże w przypadku, telefon jest w trybie poziomym.
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), ), ), ), ], )
źródło