Пространство между детьми Колонны во Флаттере

Question

У меня есть Column виджет с двумя TextField виджетами в качестве детей, и я хочу иметь некоторое пространство между ними.

Я уже пробовал mainAxisAlignment: MainAxisAlignment.spaceAround, но результат был не тот, который яхотел.

Answer 1

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

Answer 2

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

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

Если вы используете Wrap Виджет, который вы должны использовать runSpacing: 5, интервал: 10,

В любом месте, где вы можетеиспользуйте SizeBox ()

Answer 3

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

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

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

Answer 5

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

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

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

Answer 6

Просто используйте заполнение, чтобы обернуть его следующим образом:

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 для списков, например.

Answer 7

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