面试题：Flutter中Container与Row布局结合时如何处理子Widget的对齐问题

Question

在Flutter项目中，要求在一个Row布局内放置多个Container。其中，左侧的Container宽度固定为100像素，高度自适应内容；右侧的Container宽度自适应剩余空间，高度与左侧Container保持一致，且内部文本垂直和水平方向都居中显示。请描述实现该布局的思路，并给出关键代码片段。

Answer 1

实现思路

1. 使用 Row 布局来水平排列两个 Container。
2. 左侧 Container 设置固定宽度 100 像素，高度通过 height 属性设置为 double.minPositive 以自适应内容。
3. 右侧 Container 使用 Flexible 或 Expanded 包裹，使其宽度自适应剩余空间，高度设置为与左侧 Container 一致。通过设置 alignment 属性为 Alignment.center 使内部文本在垂直和水平方向都居中显示。

关键代码片段

Row(
  children: [
    Container(
      width: 100,
      height: double.minPositive,
      color: Colors.grey[300],
      // 这里放置左侧内容
    ),
    Flexible(
      child: Container(
        alignment: Alignment.center,
        color: Colors.grey[200],
        child: Text('右侧文本'),
      ),
    )
  ],
)

上述代码展示了如何在 Row 布局中实现题目要求的左右两个 Container 的布局。Flexible 组件确保右侧 Container 自适应剩余空间，同时通过 alignment 实现文本居中。如果想让右侧 Container 强制填满剩余空间，可以使用 Expanded 代替 Flexible。