Flutter中行空间不足时如何保持组件固有宽度比例？

当Row的可用空间不足以容纳所有子组件的固有宽度时，要维持它们的宽度比例，可以通过以下几种方式实现：

一、静态比例场景（已知固定比例） #

如果已经明确知道三个组件的宽度比例（比如1:2:3），直接用Expanded配合flex属性即可，这是最简单的方案：

Row(
  children: [
    Expanded(
      flex: 1, // 对应比例1
      child: widgetA,
    ),
    Expanded(
      flex: 2, // 对应比例2
      child: widgetB,
    ),
    Expanded(
      flex: 3, // 对应比例3
      child: widgetC,
    ),
  ],
);

flex的值就是宽度比例的简化整数，Row会按照这个比例把可用空间分配给每个子组件，自动缩放它们的宽度。

二、动态比例场景（基于组件固有宽度） #

如果子组件的宽度是动态的（比如根据文本内容自动适配），需要先获取每个组件的固有宽度，再按比例分配空间，推荐用CustomMultiChildLayout实现：

步骤1：定义布局代理 #

创建一个自定义的MultiChildLayoutDelegate，负责计算比例并布局子组件：

class ProportionalRowDelegate extends MultiChildLayoutDelegate {
  @override
  void performLayout(Size size) {
    // 先测量每个子组件的固有宽度
    final widthA = layoutChild(0, BoxConstraints.loose(size)).width;
    final widthB = layoutChild(1, BoxConstraints.loose(size)).width;
    final widthC = layoutChild(2, BoxConstraints.loose(size)).width;

    final totalOriginalWidth = widthA + widthB + widthC;
    final availableWidth = size.width;

    // 计算缩放比例（可用空间 / 总固有宽度）
    final scale = availableWidth / totalOriginalWidth;

    double currentX = 0.0;
    final rowHeight = size.height;

    // 按比例布局每个子组件
    layoutChild(0, BoxConstraints.tight(Size(widthA * scale, rowHeight)));
    positionChild(0, Offset(currentX, 0));
    currentX += widthA * scale;

    layoutChild(1, BoxConstraints.tight(Size(widthB * scale, rowHeight)));
    positionChild(1, Offset(currentX, 0));
    currentX += widthB * scale;

    layoutChild(2, BoxConstraints.tight(Size(widthC * scale, rowHeight)));
    positionChild(2, Offset(currentX, 0));
  }

  @override
  bool shouldRelayout(covariant MultiChildLayoutDelegate oldDelegate) => false;
}

步骤2：使用自定义布局 #

把三个组件用LayoutId包裹，传入CustomMultiChildLayout：

CustomMultiChildLayout(
  delegate: ProportionalRowDelegate(),
  children: [
    LayoutId(id: 0, child: widgetA),
    LayoutId(id: 1, child: widgetB),
    LayoutId(id: 2, child: widgetC),
  ],
);

这种方法不需要等待组件渲染后再计算，布局过程中直接获取固有宽度，更高效可靠。

三、注意事项 #

• 子组件需要能适配缩放后的宽度：比如文本组件可以设置overflow: TextOverflow.ellipsis或者softWrap: true，避免内容溢出；
• 如果子组件有最小宽度限制，缩放后不能小于这个值，需要在布局时额外处理（比如判断缩放后的宽度是否小于最小宽度，调整分配逻辑）。

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