如何在Flutter中为不同Widget设置等宽或等高约束？

不需要显式设置固定宽度的SizedBox，Flutter提供了多种适配不同场景的等宽实现方式：

• 场景1：两个Widget在同一Row内
  直接用Expanded（或Flexible）包裹两个子Widget，设置相同的flex值即可，默认flex=1，两个子组件会自动平分Row的可用宽度，父容器宽度变化时二者始终保持等宽。
  示例代码：

  Row(
    children: [
      Expanded(
        child: Container(color: Colors.red, height: 50),
      ),
      Expanded(
        child: Container(color: Colors.blue, height: 50),
      ),
    ],
  )
  

• 场景2：两个Widget在同一父容器下、非同行布局
  用IntrinsicWidth包裹共同父容器，同时将父容器的交叉轴对齐方式设为CrossAxisAlignment.stretch，两个子组件的宽度会自动和其中宽度最大的子组件保持一致，无需手动指定尺寸。
  示例代码：

  IntrinsicWidth(
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Container(color: Colors.red, height: 50, child: const Text('短文本')),
        Container(color: Colors.blue, height: 50, child: const Text('更长的基准文本')),
      ],
    ),
  )
  

• 场景3：跨父容器的等宽约束
  可以通过LayoutBuilder获取上层容器的可用宽度，按比例计算后赋值给两个子组件；也可以用GlobalKey获取基准组件的实际尺寸后，同步给另一个组件。这类方案相对灵活，但实现复杂度更高，非特殊场景不优先使用。

注意：IntrinsicWidth需要额外计算子组件的最大尺寸，存在一定性能开销，不建议在长列表、深层嵌套布局中大量使用。

内容的提问来源于stack exchange，提问作者ximmyxiao