Flutter中BoxConstraints未正确传递导致文本溢出问题

问题根源 #

你的代码里外层Row设置了mainAxisSize: MainAxisSize.min，这个属性会让Row尽可能收缩以适配子组件宽度，完全忽略父Container的maxWidth约束。这导致内层Text所在的Flexible没有明确的宽度上限，无法触发换行逻辑。

修复方案 #

有两种简单的修复方式：

方式一：修改外层Row的mainAxisSize #

将外层Row的mainAxisSize: MainAxisSize.min改为MainAxisSize.max，让Row继承父Container的maxWidth约束：

return Container(
  constraints: const BoxConstraints(maxWidth: 300), 
  child: Row(mainAxisSize: MainAxisSize.max, children: [ // 修改为max
    Checkbox(materialTapTargetSize: MaterialTapTargetSize.shrinkWrap),
    GestureDetector(
        onTap: () {},
        child: Container(
          color: Colors.white,
          child: Row(mainAxisSize: MainAxisSize.min, children: [
            Icon(getCustomIcon(name: f.icon), size: 20, color: Colors.black),
            const SizedBox(width: 6),
            Flexible(
                child: Text(f.name,
                    softWrap: true, style: TextStyle(fontSize: 14))),
            const SizedBox(width: 6),
          ]),
        ))
  ]),
);

方式二：给GestureDetector外层添加Flexible #

如果需要保留外层Row的MainAxisSize.min，可以把GestureDetector包裹在Flexible里，让它能在Row的可用空间内收缩：

return Container(
  constraints: const BoxConstraints(maxWidth: 300), 
  child: Row(mainAxisSize: MainAxisSize.min, children: [
    Checkbox(materialTapTargetSize: MaterialTapTargetSize.shrinkWrap),
    Flexible( // 新增Flexible
      child: GestureDetector(
          onTap: () {},
          child: Container(
            color: Colors.white,
            child: Row(mainAxisSize: MainAxisSize.min, children: [
              Icon(getCustomIcon(name: f.icon), size: 20, color: Colors.black),
              const SizedBox(width: 6),
              Flexible(
                  child: Text(f.name,
                      softWrap: true, style: TextStyle(fontSize: 14))),
              const SizedBox(width: 6),
            ]),
          )),
    )
  ]),
);

原理说明 #

• MainAxisSize.min会让Row的宽度等于所有子组件宽度之和，完全无视父容器的约束；
• MainAxisSize.max会让Row占满父容器的可用宽度，此时内层Flexible能根据这个上限计算Text的换行；
• 给子组件添加Flexible，相当于告诉Row该子组件可以在剩余空间内调整宽度，从而让Text获得可触发换行的宽度限制。

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