Flutter中Column的孩子之间的空间

Question

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

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

Answer 1

您可以在窗口小部件之间放置一个SizedBox特定height的,如下所示:

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

为什么更喜欢这个包装小部件Padding呢？可读性!视觉样板较少,缩进较少,代码遵循典型的阅读顺序.

Answer 2

有很多方法可以做到，我在这里列出一些。

1. 使用Container并给出一些高度：

   Column(
     children: <Widget>[
       Widget1(),
       Container(height: 10), // set height
       Widget2(),
     ],
   )
   

2. 用 Spacer

   Column(
     children: <Widget>[
       Widget1(),
       Spacer(), // use Spacer
       Widget2(),
     ],
   )
   

3. 用 Expanded

   Column(
     children: <Widget>[
       Widget1(),
       Expanded(child: SizedBox()), // use Expanded
       Widget2(),
     ],
   )
   

4. 用 mainAxisAlignment

   Column(
     mainAxisAlignment: MainAxisAlignment.spaceAround, // mainAxisAlignment
     children: <Widget>[
       Widget1(),
       Widget2(),
     ],
   )
   

5. 用 Wrap

   Wrap(
     direction: Axis.vertical, // make sure to set this
     spacing: 20, // set your spacing
     children: <Widget>[
       Widget1(),
       Widget2(),
     ],
   )
   

Answer 3

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

Answer 4

只需使用填充包装就像这样:

Column(
  children: <Widget>[
  Padding(
    padding: EdgeInsets.all(8.0),
    child: Text('Hello World!'),
  ),
  Padding(
    padding: EdgeInsets.all(8.0),
    child: Text('Hello World2!'),
  )
]);

Answer 5

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

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 < 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 时，您必须将“height”替换为“width”。

Answer 6

您可以改用Wrap()小部件Column()在子小部件之间添加空间，并使用interval属性在子小部件之间提供相等的间距

Wrap(
  spacing: 20, // to apply margin horizontally
  runSpacing: 20, // to apply margin vertically
  children: <Widget>[
     Text('child 1'),
     Text('child 2')
  ]
)

Answer 7

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

Spacer 创建了一个灵活的空间来插入 [Flexible] 小部件。（像柱子一样）

Answer 8

我在这里没有看到这个解决方案，所以为了完整起见，我会发布它。

您还可以Padding使用map以下方法包装儿童：

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

Answer 9

如果您不想将 Padding 与每个小部件一起包装或重复 SizedBox。

尝试这个：

Column(
        children: [
          Widget(),
          Widget(),
          Widget(),
          Widget(),
        ]
            .map((e) => Padding(
                  child: e,
                  padding: const EdgeInsets.symmetric(vertical: 10),
                ))
            .toList(),
      ),

这将用填充扭曲所有小部件而不重复。

Answer 10

出于代码可读性的目的，上面使用了SizedBox的相同方法，您可以以相同的方式使用Padding小部件，而不必使其成为Column的任何子级的父级小部件。

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