Пространство между детьми столбца во флаттере

Ответ 1

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

Ответ 2

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

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

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

Ответ 3

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

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: xx). Последний является наиболее распространенным, но он будет зависеть от того, как вы хотите управлять пространством ваших виджетов, мне нравится использовать отступы, если пространство действительно является частью виджета, и использовать sizebox для списков, например.

Ответ 4

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

Wrap(
  spacing: 20, // to apply margin horizontally
  runSpacing: 20, // to apply margin vertically
  children: <Widget>[
     Text('child 1'),
     Text('child 2')
  ]
)

Ответ 5

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

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

Ответ 6

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

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

Ответ 7

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

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

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

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