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

我已经尝试过mainAxisAlignment: mainAxisAlignment。但结果不是我想要的。


当前回答

列小部件没有自己的高度,它只是随着我们在子小部件中添加的内容而展开。 如果你需要在多个小部件之间保持相同的空间,

Container(
   width: double.infinity,
   height: height,
   child: Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
         Text('One'),
         Text('Two'),
         Text('Three'),
         Text('Four')
      ],
   ),
),

或者使用SizeBox、Spacer或widget在它们之间添加自定义空间, 像这样

Column(
   children: <Widget>[
         Text('One'),
         SizedBox(height: 20), 
         Text('Two'),
         SizedBox(height: 40), 
         Text('Three'),
         SizedBox(height: 30), 
         Text('Four')
   ],
 ),

其他回答

您可以使用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')
  ]
)

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

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

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

受https://stackoverflow.com/a/70993832/14298786的启发,在List<Widget>上使用扩展来添加sizebox:

extension on List<Widget> {
  List<Widget> insertBetweenAll(Widget widget) {
    var result = List<Widget>.empty(growable: true);
    for (int i = 0; i < length; i++) {
      result.add(this[i]);
      if (i != length - 1) {
        result.add(widget);
      }
    }
    return result;
  }
}

像这样使用:

Column(children: [
  Widget1(),
  Widget2(),
  Widget3(),
].insertBetweenAll(SizedBox(height: 20)))

如果在列、行、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(),
  ])),
  ]));

将输入字段小部件提取到一个自定义小部件中,该小部件包装在填充或带有填充的容器中(假设间隔对称)。

在每个子列之间设置大小不同的盒子(如其他回答中建议的那样)是不实际或不可维护的。如果你想改变间距,你必须改变每个大小的盒子小部件。

// An input field widget as an example column child
class MyCustomInputWidget extends StatelessWidget {
  const MyCustomInputWidget({Key? key})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    // wrapping text field in container
    return Container(
      // here is the padding :)
      padding: EdgeInsets.symmetric(vertical: 10),
      child: TextField(...)
    );
  }
}

...然后父类中的列

column(
  children: <Widget>[
    MyCustomInputWidget(),
    SizedBox(height: 10),
    MyCustomInputWidget(),
  ],
),

显然,您希望自定义小部件具有某种构造函数来处理不同的字段参数。