Пространство между дочерними элементами Column во Flutter

Вы можете использовать Padding виджет между этими двумя виджетами или обернуть эти виджеты Padding виджетами.

Обновить

Виджет SizedBox можно использовать между двумя виджет, чтобы добавить пространство между двумя виджетами и сделать код более читабельным, чем виджет заполнения.

Ex:

Column(
  children: <Widget>[
    Widget1(),
    SizedBox(height: 10),
    Widget2(),
  ],
),

Вы можете поместить SizedBox с определенным height между виджетами, например:

Column(
  children: <Widget>[
    FirstWidget(),
    SizedBox(height: 100),
    SecondWidget(),
  ],
),

Почему это предпочтительнее, чем упаковка виджетов в Padding? Удобочитаемость! Менее визуальный шаблон, меньше отступов, а код соответствует типичному порядку чтения.

вы можете использовать виджет Wrap() вместо Column(), чтобы добавить пространство между дочерними виджетами, и использовать свойство spacing, чтобы обеспечить равное расстояние между дочерними элементами

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')
  ]
)

Просто используйте padding, чтобы обернуть его так:

Column(
  children: <Widget>[
  Padding(
    padding: EdgeInsets.all(8.0),
    child: Text('Hello World!'),
  ),
  Padding(
    padding: EdgeInsets.all(8.0),
    child: Text('Hello World2!'),
  )
]);

Вы также можете использовать Container (padding ...) или SizeBox (height: x.x). Последний из них является наиболее распространенным, но он будет зависеть от того, как вы хотите управлять пространством своих виджетов. Мне нравится использовать отступы, если пространство действительно является частью виджета, и использовать sizebox, например, для списков.

Есть много способов сделать это, я перечислю несколько здесь.

1. Используйте Container и задайте высоту:

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

2. Используйте Spacer

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

3. Используйте Expanded

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

4. Используйте mainAxisAlignment

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

5. Используйте Wrap

   Wrap(
     direction: Axis.vertical, // make sure to set this
     spacing: 20, // set your spacing
     children: <Widget>[
       Widget1(),
       Widget2(),
     ],
   )
   

Column(
  children: <Widget>[
    FirstWidget(),
    Spacer(),
    SecondWidget(),
  ]
)

Разделитель создает гибкое пространство для вставки в виджет [Гибкий]. (Как столбец)

Я не вижу здесь этого решения, поэтому для полноты картины выложу его.

Вы также можете заключить детей в Padding, используя map:

Column(
      children: [Text('child 1'), Text('child 2')]
          .map(
            (e) => Padding(
              padding: const EdgeInsets.all(8),
              child: e,
            ),
          )
          .toList(),
    );

Таким же образом SizedBox используется выше для кода. удобочитаемость, вы можете использовать виджет Padding таким же образом и не делать его родительским виджетом для любого из дочерних элементов Column.

Column(
  children: <Widget>[
    FirstWidget(),
    Padding(padding: EdgeInsets.only(top: 40.0)),
    SecondWidget(),
  ]
)

Вы можете решить эту проблему по-другому.

Если вы используете Строка / Столбец, вам необходимо использовать mainAxisAlignment: MainAxisAlignment.spaceEvenly

Если вы используете виджет Wrap, вам необходимо использовать runSpacing: 5, spacing: 10,

В любом месте вы можете использовать SizeBox ()

Столбцы по умолчанию не имеют высоты, вы можете обернуть столбец в контейнер и добавить определенную высоту в свой контейнер. Затем вы можете использовать что-то вроде ниже:

Container(
   width: double.infinity,//Your desire Width
   height: height,//Your desire Height
   child: Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
         Text('One'),
         Text('Two')
      ],
   ),
),

Здесь есть много ответов, но я поставлю здесь самый важный, который должен использовать каждый.

1. Столбец

 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. Обернуть

     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
            ]
        )

Возможно, вам придется использовать виджет SizedBox () между дочерними элементами столбца. Надеюсь, это будет полезно

Вы также можете использовать вспомогательную функцию, чтобы добавить интервал после каждого дочернего элемента.

List<Widget> childrenWithSpacing({
  @required List<Widget> children,
  double spacing = 8,
}) {
  final space = Container(width: spacing, height: spacing);
  return children.expand((widget) => [widget, space]).toList();
}

Итак, возвращенный список может использоваться как дочерний элемент столбца

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'),
    ],
  ),
);

Я не уверен, что это неправильно или есть потеря производительности для запуска детей через вспомогательную функцию для той же цели?

Размер коробки в этом случае не поможет, телефон в альбомной ориентации.

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),
            ),
          ),
        ),
      ],
     )

Вот еще один вариант, включающий цикл for. Это может дать немного больше гибкости и следует принципу DRY.

Column(
  children: <Widget>[
    for (var i = 0; i < widgets.length; i++)
      Column(
        children: [
          widgets[i], // The widget you want to create or place goes here.
          SizedBox(height: 10) // Any kind of padding or other widgets you want to put.
        ])
  ],
),