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

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


当前回答

我在这里没有看到这个解决方案,所以为了完整起见,我将把它贴出来。

你也可以使用map用Padding包裹子元素:

Column(
      children: [Text('child 1'), Text('child 2')]
          .map(
            (e) => Padding(
              padding: const EdgeInsets.all(8),
              child: e,
            ),
          )
          .toList(),
    );

其他回答

在这种情况下,大小框将不起作用,手机处于横向模式。

body: Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        Expanded(
           child: Container(
            margin: EdgeInsets.all(15.0),
            decoration: BoxDecoration(
              color: Color(0xFF1D1E33),
              borderRadius: BorderRadius.circular(10.0),
            ),
          ),
        ),
        Expanded(
           child: Container(
            margin: EdgeInsets.all(15.0),
            decoration: BoxDecoration(
              color: Color(0xFF1D1E33),
              borderRadius: BorderRadius.circular(10.0),
            ),
          ),
        ),
        Expanded(
           child: Container(
            margin: EdgeInsets.all(15.0),
            decoration: BoxDecoration(
              color: Color(0xFF1D1E33),
              borderRadius: BorderRadius.circular(10.0),
            ),
          ),
        ),
      ],
     )

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

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。

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

更新

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

Ex:

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

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

您可以使用Padding来包装每个子部件,然后设置Padding的顶部或底部。

如果你不想写很多相同的数字,你可以这样写:

Column(
  children: [
    child1, 
    child2, 
    ..., 
    childN
  ].map((e) => Padding(padding: EdgeInsets.only(top: 10), child: e)).toList()
);