面试题：Flutter中如何根据布局需求选择合适的Widget类型

Question

假设要实现一个水平排列多个子元素，并且子元素宽度均匀分布的布局，你会选择哪种Widget类型？阐述选择理由及具体实现思路。如果子元素的宽度需要按照一定比例分配，又该如何调整选择的Widget及实现方式？

Answer 1

水平排列且宽度均匀分布

1. 选择的Widget类型：Row 配合 Expanded。
2. 选择理由：Row 是 Flutter 中用于水平排列子部件的常用组件。而 Expanded 可以灵活地控制子部件如何填充剩余空间，使得子部件宽度均匀分布。
3. 具体实现思路：将多个子部件包裹在 Row 中，然后将每个子部件用 Expanded 包裹。例如：

Row(
  children: [
    Expanded(
      child: Container(
        color: Colors.red,
        child: Center(child: Text('子元素1')),
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.blue,
        child: Center(child: Text('子元素2')),
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.green,
        child: Center(child: Text('子元素3')),
      ),
    ),
  ],
)

子元素宽度按比例分配

1. 调整选择的Widget：依然使用 Row 和 Expanded，但在 Expanded 中通过 flex 属性来控制比例。
2. 实现方式：flex 属性用于定义 Expanded 子部件的弹性系数。例如，希望三个子元素宽度比例为 1:2:3，代码如下：

Row(
  children: [
    Expanded(
      flex: 1,
      child: Container(
        color: Colors.red,
        child: Center(child: Text('子元素1')),
      ),
    ),
    Expanded(
      flex: 2,
      child: Container(
        color: Colors.blue,
        child: Center(child: Text('子元素2')),
      ),
    ),
    Expanded(
      flex: 3,
      child: Container(
        color: Colors.green,
        child: Center(child: Text('子元素3')),
      ),
    ),
  ],
)

这里 flex 值越大，该子部件占据的空间比例越大。