Flutter：实现带最大宽约束的可收缩文本裁剪Row

需要构建一个最大宽度为200的Row组件：

• 内容较短时，Row自动收缩到内容实际宽度（比如内容仅需100像素时就保持100宽）
• 内容过长时，内部的Text组件自动裁剪超出部分

当前问题：为了让TextOverflow生效，必须将Text放入Flexible/Expanded，但这会导致Text始终占满Row的最大约束宽度，即便文本内容很短。

示例代码 #

return ConstrainedBox(
  constraints: BoxConstraints(maxWidth: 250),
  child: Row(
    children: [
      Icon(
        Icons.square,
      ),
      SizedBox(width: 10.w),
      Flexible(
        child: Text(
          "Some potentially long text",
          overflow: TextOverflow.fade,
          softWrap: false,
          maxLines: 1,
        ),
      ),
    ],
  ),
);

核心思路是让文本组件优先以自身内容宽度布局，仅在超出Row最大约束时触发裁剪。可以通过以下两种方式实现：

方式一：给Flexible设置fit: FlexFit.loose #

Flexible默认的fit属性是FlexFit.tight，会强制占满父组件分配的空间。改为FlexFit.loose后，Text会先按自身内容宽度布局，仅当超出Row的最大约束时才被限制宽度并触发裁剪。同时给Row设置mainAxisSize: MainAxisSize.min，确保Row仅包裹内容所需宽度。

修改后的代码：

return ConstrainedBox(
  constraints: BoxConstraints(maxWidth: 200),
  child: Row(
    mainAxisSize: MainAxisSize.min,
    children: [
      Icon(Icons.square),
      SizedBox(width: 10),
      Flexible(
        fit: FlexFit.loose, // 关键设置
        child: Text(
          "Some potentially long text",
          overflow: TextOverflow.clip,
          softWrap: false,
          maxLines: 1,
        ),
      ),
    ],
  ),
);

方式二：用ConstrainedBox单独约束Text宽度 #

如果不想使用Flexible，可以给Text单独设置最大宽度约束（需预留图标和间距的宽度），同时配合Row的mainAxisSize: MainAxisSize.min实现自适应。

示例代码：

return ConstrainedBox(
  constraints: BoxConstraints(maxWidth: 200),
  child: Row(
    mainAxisSize: MainAxisSize.min,
    children: [
      Icon(Icons.square),
      SizedBox(width: 10),
      ConstrainedBox(
        constraints: BoxConstraints(maxWidth: 160), // 预留图标+间距的40px宽度
        child: Text(
          "Some potentially long text",
          overflow: TextOverflow.clip,
          softWrap: false,
          maxLines: 1,
        ),
      ),
    ],
  ),
);

关键说明 #

• mainAxisSize: MainAxisSize.min：让Row仅占据内部内容的实际宽度，而非扩展到父组件的最大宽度。
• FlexFit.loose：让Flexible的子组件优先以自身尺寸布局，仅在空间不足时才触发裁剪逻辑。

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