面试题：Flutter中Row和Column布局的常见属性及应用场景

Row布局

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.spaceAround**：子Widget在主轴上均匀分布，两端子Widget与容器边缘距离是子Widget之间距离的一半。

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

- **MainAxisAlignment.spaceBetween**：子Widget在主轴上均匀分布，两端子Widget与容器边缘贴紧。

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

- **MainAxisAlignment.spaceEvenly**：子Widget在主轴上均匀分布，包括两端子Widget与容器边缘的距离。

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

crossAxisAlignment：用于控制交叉轴（垂直方向）上子Widget的对齐方式。
- CrossAxisAlignment.start：子Widget在交叉轴开始位置对齐。

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

- **CrossAxisAlignment.end**：子Widget在交叉轴结束位置对齐。

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

- **CrossAxisAlignment.center**：子Widget在交叉轴中心位置对齐。

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

- **CrossAxisAlignment.stretch**：子Widget在交叉轴方向上拉伸以填满容器（需子Widget无固定高度）。

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

Column布局

mainAxisAlignment：控制主轴（垂直方向）上子Widget的排列方式，用法与Row类似，只是方向变为垂直。
- MainAxisAlignment.start：子Widget从主轴开始位置（顶部）排列。

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

- **MainAxisAlignment.end**：子Widget从主轴结束位置（底部）排列。

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

- **MainAxisAlignment.center**：子Widget在主轴中心位置（垂直居中）排列。

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

- **MainAxisAlignment.spaceAround**：子Widget在主轴上均匀分布，顶部和底部子Widget与容器边缘距离是子Widget之间距离的一半。

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

- **MainAxisAlignment.spaceBetween**：子Widget在主轴上均匀分布，顶部和底部子Widget与容器边缘贴紧。

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

- **MainAxisAlignment.spaceEvenly**：子Widget在主轴上均匀分布，包括顶部和底部子Widget与容器边缘的距离。

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

crossAxisAlignment：控制交叉轴（水平方向）上子Widget的对齐方式，用法与Row类似。
- CrossAxisAlignment.start：子Widget在交叉轴开始位置（左侧）对齐。

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Container(width: 30, height: 50, color: Colors.red),
    Container(width: 60, height: 50, color: Colors.blue),
  ],
);

- **CrossAxisAlignment.end**：子Widget在交叉轴结束位置（右侧）对齐。

Column(
  crossAxisAlignment: CrossAxisAlignment.end,
  children: [
    Container(width: 30, height: 50, color: Colors.red),
    Container(width: 60, height: 50, color: Colors.blue),
  ],
);

- **CrossAxisAlignment.center**：子Widget在交叉轴中心位置（水平居中）对齐。

Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Container(width: 30, height: 50, color: Colors.red),
    Container(width: 60, height: 50, color: Colors.blue),
  ],
);

- **CrossAxisAlignment.stretch**：子Widget在交叉轴方向上拉伸以填满容器（需子Widget无固定宽度）。

Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    Container(height: 50, color: Colors.red),
    Container(height: 50, color: Colors.blue),
  ],
);

星途面试题库

面试题：Flutter中Row和Column布局的常见属性及应用场景

知识考点

面试题答案

Row布局

Column布局