Raum zwischen Columns Kindern in Flutter

109

Ich habe ein ColumnWidget mit zwei TextFieldWidgets 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.

Sachin Soma
quelle
3
Setzen Sie einfach SizedBox (Höhe: 15.0,) zwischen die beiden TextField
anmol.majhail
margin: EdgeInsets.only(left: 200.0, top: 300.0))
user7856586

Antworten:

135

Sie können ein PaddingWidget zwischen diesen beiden Widgets verwenden oder diese Widgets mit einem PaddingWidget 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(),
  ],
),
Viren V Varasadiya
quelle
7
Ich wünschte columnwirklich , diese Klasse hätte diese Eigenschaft enthalten. Es wird eine Verschwendung von Codierungszeit sein, um eine Polsterung zwischen allen Kindern zu erhalten.
Haroun Hajem
Wie können Sie zwei Widgets in ein Padding-Widget einschließen, wenn Padding-Widgets nur einen einzigen untergeordneten Parameter verwenden?
ScottF
@ScottF Die Antwort besagte, dass das PaddingWidget zwischen den beiden Widgets liegt. Es ist nicht so, dass die 2 Widgets Kinder von werden Padding.
marcusljx
2
Es steht direkt "oder umschließen diese Widgets mit Padding Widget" ....
ScottF
@ScottF Machen Sie das Kind zu einer Spalte oder Zeile mit den beiden Widgets als Kinder.
Riley Fitzpatrick
140

Sie können ein SizedBoxmit einem bestimmten heightzwischen 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.

Marcel
quelle
Das Hinzufügen einer Box in Größe ist wie das Hinzufügen einer leeren Ansicht, oder? Würde das nicht zu Problemen führen?
user5381191
SizedBoxist 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.
Marcel
50

Sie können Wrap()stattdessen das Widget verwenden Column(), um Platz zwischen untergeordneten Widgets hinzuzufügen. Verwenden Sie die Eigenschaft spacing, um den gleichen Abstand zwischen untergeordneten Widgets zu erhalten

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
quelle
1
Verwenden Sie runSpacinganstelle von spacingfür Lücken zwischen vertikal beabstandeten Elementen
Arpit
Das hat bei mir funktioniert. Ich denke, es ist die beste Lösung überhaupt, aber was wären die Nachteile der Verwendung von Wrap () anstelle von Column ()?
Lima Chaves
1
Column ist ein erweitertes Widget, Wrap nicht. Wenn Sie also den gesamten Bereich des übergeordneten
Elements
Ja, das ist viel besser, als jedes Kind einzeln einzuwickeln. Guter Vorschlag.
Kevin
31

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

Dmarquina
quelle
Gibt es eine Möglichkeit, so etwas wie eine CSS-Gitterlücke zu machen?
Aseem
15

Es gibt viele Möglichkeiten, ich liste hier einige auf.

  1. Verwenden Sie Containerund geben Sie etwas Höhe:

    Column(
      children: <Widget>[
        Widget1(),
        Container(height: 10), // set height
        Widget2(),
      ],
    )
    
  2. Verwenden Spacer

    Column(
      children: <Widget>[
        Widget1(),
        Spacer(), // use Spacer
        Widget2(),
      ],
    )
    
  3. Verwenden Expanded

    Column(
      children: <Widget>[
        Widget1(),
        Expanded(child: SizedBox()), // use Expanded
        Widget2(),
      ],
    )
    
  4. Verwenden mainAxisAlignment

    Column(
      mainAxisAlignment: MainAxisAlignment.spaceAround, // mainAxisAlignment
      children: <Widget>[
        Widget1(),
        Widget2(),
      ],
    )
    
  5. Verwenden Wrap

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

Spacer erstellt einen flexiblen Bereich zum Einfügen in ein [flexibles] Widget. (Wie eine Spalte)

user9139407
quelle
5
Bitte fügen Sie Ihrer Antwort eine Erklärung hinzu, damit andere sie besser verstehen. Nur-Code-Antworten gelten als unhöflich und helfen dem OP möglicherweise nicht, das Problem zu verstehen, bei dem Sie helfen möchten.
Michael
7

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(),
  ]
)
Al-Ameen
quelle
2

Sie können dieses Problem auf verschiedene Arten lösen.

Wenn Sie Zeile / Spalte verwenden , müssen Sie mainAxisAlignment: MainAxisAlignment.spaceEvenly verwenden

Wenn Sie das Wrap- Widget verwenden, müssen Sie runSpacing: 5, spacing: 10, verwenden.

Überall können Sie SizeBox () verwenden

Md.Tarikul Islam
quelle
1

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')
      ],
   ),
),
Ali Esfandiari
quelle
1

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

Möglicherweise müssen Sie das Widget SizedBox () zwischen den untergeordneten Elementen Ihrer Spalte verwenden. Hoffe das wird nützlich sein

Issa
quelle
Wenn Sie eine neue Frage haben, fragen Sie es bitte durch Klicken Frage stellen Taste. Fügen Sie einen Link zu dieser Frage hinzu, wenn dies zur Bereitstellung des Kontexts beiträgt. - Aus dem Rückblick
Bruno
Dies gibt keine Antwort auf die Frage. Sobald Sie einen ausreichenden Ruf haben, können Sie jeden Beitrag kommentieren . Geben Sie stattdessen Antworten, die nicht vom Fragesteller geklärt werden müssen . - Aus dem Rückblick
Ram Sharma
-1

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),
            ),
          ),
        ),
      ],
     )
ABHISHEK KUMAR
quelle