这是另一个涉及for循环的选项。

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

你可以在小部件之间放置一个具有特定高度的sizebox，如下所示:

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

为什么宁愿这样包装小部件在填充?可读性!有更少的可视化样板，更少的缩进和代码遵循典型的阅读顺序。

只需要像这样用填充物把它包起来:

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。

我也希望在Flutter中有一些内置的方法来做到这一点。就像一个参数，你可以传递给列或行。有时你不希望每个元素都有填充，但希望元素之间有空格。特别是如果你有两个以上的孩子，写这样的东西有点乏味

const double gap = 10;
return Column(
  children: [
    Text('Child 1'),
    SizedBox(height: gap),
    Text('Child 2'),
    SizedBox(height: gap),
    Text('Child 3'),
    SizedBox(height: gap),
    Text('Child 4'),
  ],
);

然而，我想出了一个快速(不完美)的解决方案:

在你的项目中添加这个(只有一次):

extension ListSpaceBetweenExtension on List<Widget> {
  List<Widget> withSpaceBetween({double? width, double? height}) => [
    for (int i = 0; i < this.length; i++)
      ...[
        if (i > 0)
          SizedBox(width: width, height: height),
        this[i],
      ],
  ];
}

从现在开始，只要你有行或列，你就可以写

Column(
  children: [
    Text('Child 1'),
    Text('Child 2'),
    Text('Child 3'),
    Text('Child 4'),
  ].withSpaceBetween(height: 10),
),

当使用Row时，你必须用width替换height。

还可以使用辅助函数在每个子元素之后添加空格。

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

我不确定，如果它是错误的或有一个性能惩罚运行的孩子通过一个帮助函数为相同的目标?

如果在列、行、listView等中有太多的子元素，并且必须在应用程序的许多地方执行相同的操作，那么添加多个大小的框将变得乏味。

你可以使用下面的utils来封装添加这些大小的盒子的逻辑:

List<Widget> addHorizontalSpaceBetweenElements(double space, List<Widget> widgets) {
  return _addSpaceBetweenElements(widgets, () => SizedBox(width: space));
}

List<Widget> addVerticalSpaceBetweenElements(double space, List<Widget> widgets) {
  return _addSpaceBetweenElements(widgets, () => SizedBox(height: space));
}

List<Widget> _addSpaceBetweenElements(List<Widget> widgets, ValueGetter<SizedBox> sizedBoxGetter) {
  if (widgets.isEmpty || widgets.length == 1) {
    return widgets;
  }
  List<Widget> spacedWidgets = [widgets.first];
  for (var i = 1; i < widgets.length - 1; i++) {
    spacedWidgets.add(sizedBoxGetter());
    spacedWidgets.add(widgets[i]);
  }
  spacedWidgets.add(sizedBoxGetter());
  spacedWidgets.add(widgets.last);
  return spacedWidgets;
}

你可以这样使用它们:

Column(
  children: addVerticalSpaceBetweenElements(5, [
    Text(),
    Text(),
  Row(children: addHorizontalSpaceBetweenElements(5, [
    Text(),
    Text(),
  ])),
  ]));