面试题：Flutter中Column布局如何控制子Widget的垂直间距

Question

在Flutter的Column布局中，若要精准控制子Widget之间的垂直间距，你会使用哪些属性？请举例说明如何通过这些属性实现不同间距的设置。

Answer 1

1. 使用mainAxisSpacing属性
   • mainAxisSpacing属性用于设置Column主轴（垂直方向）上子Widget之间的间距。
   • 示例代码如下：

Column(
  mainAxisSpacing: 16.0,
  children: [
    Container(
      height: 50,
      width: 100,
      color: Colors.red,
    ),
    Container(
      height: 50,
      width: 100,
      color: Colors.blue,
    ),
    Container(
      height: 50,
      width: 100,
      color: Colors.green,
    )
  ],
)

- 在上述代码中，`mainAxisSpacing`设置为`16.0`，则红色、蓝色和绿色的Container之间垂直间距均为16像素。

2. 使用mainAxisAlignment结合SizedBox - mainAxisAlignment用于控制子Widget在主轴上的对齐方式。结合SizedBox可以实现不同间距设置。 - 示例代码如下：

Column(
  mainAxisAlignment: MainAxisAlignment.start,
  children: [
    Container(
      height: 50,
      width: 100,
      color: Colors.red,
    ),
    SizedBox(height: 20),
    Container(
      height: 50,
      width: 100,
      color: Colors.blue,
    ),
    SizedBox(height: 30),
    Container(
      height: 50,
      width: 100,
      color: Colors.green,
    )
  ],
)

- 在这段代码中，通过在不同子Widget之间插入不同高度的`SizedBox`，实现了红色与蓝色Container间距20像素，蓝色与绿色Container间距30像素。