Flutter中使用Row后如何控制组件宽度，避免自适应拉伸？

问题根源在于Row组件的默认行为：Row默认会占满父容器的全部可用宽度，把它放进按钮里自然会把按钮强行撑宽。不用设置固定宽度的话，按下面的方法修改即可解决：

核心修改思路 #

给Row添加mainAxisSize: MainAxisSize.min，让Row仅包裹内部文本和图标的实际宽度，按钮就能回到自适应内容的状态。同时针对设备文字大小调整的场景，处理内容溢出问题：

方案1：文字溢出时显示省略号 #

ElevatedButton(
  onPressed: () {},
  child: Row(
    mainAxisSize: MainAxisSize.min, // 关键：限制Row仅占内容宽度
    children: [
      Text(
        "Proceed",
        overflow: TextOverflow.ellipsis, // 文字过长时显示省略号
        maxLines: 1, // 限制单行显示
      ),
      SizedBox(width: 8), // 文本和图标之间添加间距优化排版
      Icon(Icons.arrow_forward),
    ],
  ),
)

方案2：文字自动缩小适配宽度 #

如果希望文字在系统缩放时自动缩小以避免溢出，可以用FittedBox包裹Text：

ElevatedButton(
  onPressed: () {},
  child: Row(
    mainAxisSize: MainAxisSize.min,
    children: [
      FittedBox(
        fit: BoxFit.scaleDown, // 仅在文字超出宽度时自动缩小
        child: Text("Proceed"),
      ),
      SizedBox(width: 8),
      Icon(Icons.arrow_forward),
    ],
  ),
)

这样既不需要设置固定宽度容器，又能保证按钮自适应内容，同时兼容设备文字大小调整的场景，不会出现内容溢出问题。

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