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

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


当前回答

我也希望在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。

其他回答

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

更新

SizedBox小部件可以在两个小部件之间使用,以增加两个小部件之间的空间,它使代码比填充小部件更具可读性。

Ex:

Column(
  children: <Widget>[
    Widget1(),
    SizedBox(height: 10),
    Widget2(),
  ],
),

最好使用Wrap小部件,而不是列或行。

包装( 间距:10, runSpacing: 10, 孩子们:[], )

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

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

// 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(),
  ],
),

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

您可能必须在列的子列之间使用sizebox()小部件。 希望这对你们有用

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