Przestrzeń między dziećmi Column w Flutter

117

Mam Columnwidżet z dwoma TextFieldwidż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.

Sachin Soma
źródło
3
Po prostu umieść SizedBox (wysokość: 15.0,), między dwoma TextField
anmol.majhail
margin: EdgeInsets.only(left: 200.0, top: 300.0))
user7856586

Odpowiedzi:

145

Możesz użyć Paddingwidżetu pomiędzy tymi dwoma widżetami lub opakować te widżety Paddingwidż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(),
  ],
),
Viren V Varasadiya
źródło
10
Z pewnością chciałbym, żeby columnklasa -klasa zawierała tę właściwość. Szkoda czasu na kodowanie, aby uzyskać wyściółkę między wszystkimi dziećmi.
Haroun Hajem
Jak można umieścić dwa widżety w widgecie Wypełnienie, gdy widżety dopełniające przyjmują tylko jeden parametr podrzędny?
ScottF,
@ScottF odpowiedź mówi, że Paddingwidżet znajduje się pomiędzy dwoma widżetami. Nie chodzi o to, że 2 widżety stają się dziećmi Padding.
marcusljx
2
Prosto do góry mówi „lub zawiń te widżety widżetem Wypełnienie” ....
ScottF
@ScottF Ustaw dziecko jako kolumnę lub wiersz z dwoma widżetami jako dziećmi.
Riley Fitzpatrick
143

Możesz umieścić SizedBoxkonkretny heightmię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.

Marcel
źródło
Dodanie rozmiaru pudełka jest jak dodanie pustego widoku, prawda? czy nie spowoduje to żadnych problemów?
user5381191
SizedBoxjest 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.
Marcel
52

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ćmi

Wrap(
  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')
  ]
)
Mahdi Tohidloo
źródło
1
Użyj runSpacingzamiast spacingdla przerw między elementami rozmieszczonymi w pionie
Arpit,
To zadziałało na mnie. Myślę, że jest to w ogóle najlepsze rozwiązanie, ale jakie byłyby wady używania Wrap () zamiast Column ()?
Lima Chaves
1
Kolumna jest rozszerzonym widżetem, podczas gdy Wrap nie. więc jeśli chcesz rozszerzyć całą przestrzeń rodzica, powinieneś użyć rozszerzonych widżetów, takich jak Kolumna lub Rząd, itp. To zależy od twojego przypadku
Mahdi Tohidloo
Tak, to znacznie lepsze niż pakowanie każdego dziecka z osobna. Dobry pomysł.
kevinH
31

Po 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.

dmarquina
źródło
czy istnieje sposób na zrobienie czegoś takiego jak przerwa w siatce CSS?
Aseem
17

Można to zrobić na wiele sposobów, wymieniam kilka tutaj.

  1. Użyj Containeri podaj trochę wysokości:

    Column(
      children: <Widget>[
        Widget1(),
        Container(height: 10), // set height
        Widget2(),
      ],
    )
    
  2. Posługiwać się Spacer

    Column(
      children: <Widget>[
        Widget1(),
        Spacer(), // use Spacer
        Widget2(),
      ],
    )
    
  3. Posługiwać się Expanded

    Column(
      children: <Widget>[
        Widget1(),
        Expanded(child: SizedBox()), // use Expanded
        Widget2(),
      ],
    )
    
  4. Posługiwać się mainAxisAlignment

    Column(
      mainAxisAlignment: MainAxisAlignment.spaceAround, // mainAxisAlignment
      children: <Widget>[
        Widget1(),
        Widget2(),
      ],
    )
    
  5. Posługiwać się Wrap

    Wrap(
      direction: Axis.vertical, // make sure to set this
      spacing: 20, // set your spacing
      children: <Widget>[
        Widget1(),
        Widget2(),
      ],
    )
    
CopsOnRoad
źródło
8
Column(
  children: <Widget>[
    FirstWidget(),
    Spacer(),
    SecondWidget(),
  ]
)

Spacer tworzy elastyczną przestrzeń do wstawienia do widżetu [Elastyczny]. (Jak kolumna)

user9139407
źródło
5
Dodaj wyjaśnienie do swojej odpowiedzi, aby pomóc innym lepiej ją zrozumieć. Odpowiedzi zawierające tylko kod są uważane za niegrzeczne i mogą nie pomóc OP w zrozumieniu problemu, z którym próbujesz pomóc.
Michael
6

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(),
  ]
)
Al-Ameen
źródło
2

Możesz rozwiązać ten problem w inny sposób.

Jeśli używasz Row / Column , musisz użyć mainAxisAlignment: MainAxisAlignment.spaceEvenly

Jeśli używasz Wrap Widget, musisz użyć runSpacing: 5, spacing: 10,

Gdziekolwiek możesz użyć SizeBox ()

Md.Tarikul Islam
źródło
1

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')
      ],
   ),
),
Ali Esfandiari
źródło
1

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
            ]
        )
jitsm555
źródło
0
Column(children: <Widget>[
   Container(margin: EdgeInsets.only(top:12, child: yourWidget)),
   Container(margin: EdgeInsets.only(top:12, child: yourWidget))
]);
Bhargav Sejpal
źródło
0

Może być konieczne użycie widżetu SizedBox () między elementami podrzędnymi kolumny. Mam nadzieję, że to się przyda

Issa
źródło
Jeśli masz nowe pytanie, zadaj je, klikając przycisk Zadaj pytanie . Dołącz link do tego pytania, jeśli pomaga to w dostarczeniu kontekstu. - Z recenzji
Bruno
To nie daje odpowiedzi na pytanie. Gdy zdobędziesz wystarczającą reputację , będziesz mógł komentować każdy post ; zamiast tego udziel odpowiedzi, które nie wymagają wyjaśnień od pytającego . - Z recenzji
Ram Sharma
0

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?

refik
źródło
-1

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),
            ),
          ),
        ),
      ],
     )
ABHISHEK KUMAR
źródło