面试题：Flutter中Row Widget的布局原理及常见属性应用

Question

请详细阐述Flutter中Row Widget的布局原理，比如主轴和交叉轴是如何确定的。并且说明如何使用mainAxisAlignment和crossAxisAlignment这两个属性来控制子Widget在Row中的对齐方式，同时举例说明它们常见的取值及效果。

Answer 1

1. Row Widget布局原理

• 主轴和交叉轴：在Flutter中，Row 是水平方向排列子Widget的布局组件。主轴方向是水平方向（从左到右，在从右到左的语言环境中方向相反），交叉轴方向是垂直方向。

2. mainAxisAlignment属性

• 作用：mainAxisAlignment 用于控制子Widget在主轴（水平方向）上的对齐方式。
• 常见取值及效果：
  • MainAxisAlignment.start：子Widget在主轴开始位置对齐，即左对齐（从左到右语言环境下）。例如：

Row(
  mainAxisAlignment: MainAxisAlignment.start,
  children: [
    Container(width: 50, height: 50, color: Colors.red),
    Container(width: 50, height: 50, color: Colors.blue),
  ],
)

• MainAxisAlignment.end：子Widget在主轴结束位置对齐，即右对齐（从左到右语言环境下）。例如：

Row(
  mainAxisAlignment: MainAxisAlignment.end,
  children: [
    Container(width: 50, height: 50, color: Colors.red),
    Container(width: 50, height: 50, color: Colors.blue),
  ],
)

• MainAxisAlignment.center：子Widget在主轴中间位置对齐。例如：

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Container(width: 50, height: 50, color: Colors.red),
    Container(width: 50, height: 50, color: Colors.blue),
  ],
)

• MainAxisAlignment.spaceBetween：子Widget在主轴上均匀分布，两端对齐。例如：

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Container(width: 50, height: 50, color: Colors.red),
    Container(width: 50, height: 50, color: Colors.blue),
    Container(width: 50, height: 50, color: Colors.green),
  ],
)

• MainAxisAlignment.spaceAround：子Widget在主轴上均匀分布，并且在子Widget的两侧留有相同的空白。例如：

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    Container(width: 50, height: 50, color: Colors.red),
    Container(width: 50, height: 50, color: Colors.blue),
    Container(width: 50, height: 50, color: Colors.green),
  ],
)

• MainAxisAlignment.spaceEvenly：子Widget在主轴上均匀分布，并且子Widget之间以及子Widget与父容器边缘之间的空白都相等。例如：

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Container(width: 50, height: 50, color: Colors.red),
    Container(width: 50, height: 50, color: Colors.blue),
    Container(width: 50, height: 50, color: Colors.green),
  ],
)

3. crossAxisAlignment属性

• 作用：crossAxisAlignment 用于控制子Widget在交叉轴（垂直方向）上的对齐方式。
• 常见取值及效果：
  • CrossAxisAlignment.start：子Widget在交叉轴开始位置对齐，即顶部对齐。例如：

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Container(width: 50, height: 80, color: Colors.red),
    Container(width: 50, height: 50, color: Colors.blue),
  ],
)

• CrossAxisAlignment.end：子Widget在交叉轴结束位置对齐，即底部对齐。例如：

Row(
  crossAxisAlignment: CrossAxisAlignment.end,
  children: [
    Container(width: 50, height: 80, color: Colors.red),
    Container(width: 50, height: 50, color: Colors.blue),
  ],
)

• CrossAxisAlignment.center：子Widget在交叉轴中间位置对齐。例如：

Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Container(width: 50, height: 80, color: Colors.red),
    Container(width: 50, height: 50, color: Colors.blue),
  ],
)

• CrossAxisAlignment.stretch：子Widget在交叉轴方向上拉伸以填充可用空间。例如：

Row(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    Container(width: 50, color: Colors.red),
    Container(width: 50, color: Colors.blue),
  ],
)

• CrossAxisAlignment.baseline：子Widget根据它们的文本基线对齐。这种对齐方式需要指定 textBaseline 属性。例如：

Row(
  crossAxisAlignment: CrossAxisAlignment.baseline,
  textBaseline: TextBaseline.alphabetic,
  children: [
    Text('Hello', style: TextStyle(fontSize: 30)),
    Text('World', style: TextStyle(fontSize: 20)),
  ],
)