Flutter中列之间的空间

Question

我有一个Column小部件，两个TextField小部件作为孩子，我想在他们两个之间有一些空间。

我已经尝试了mainAxisAlignment: MainAxisAlignment.spaceAround，但结果不是我想要的。

Answer 1

您可以在这两个小部件之间使用Padding小部件，或者使用Padding小部件包装这些小部件。

Answer 2

您可以在小部件之间放置一个带有特定SizedBox的height，如下所示：

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

为什么更喜欢在Padding中包装小部件呢？可读性！视觉样板较少，缩进较少，代码遵循典型的阅读顺序。

Answer 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（填充...）或SizeBox（高度：x.x）。最后一个是最常见的，但它将取决于你想如何管理小部件的空间，我喜欢使用填充，如果空间确实是小部件的一部分，并使用sizebox作为列表。

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

使用above以代码可读性为目的的方式相同，您可以以相同的方式使用Padding小部件，而不必将其作为任何Column的子节点的父小部件

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

Answer 6

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