Flutter中图标旁文本Text ellipsis不生效溢出问题解决方法

问题本质 #

水平Row布局中，未拿到明确横向宽度约束的Text组件不会触发ellipsis省略逻辑，会按文本固有宽度渲染，超出父容器边界时就会抛出Overflow报错。直接用Expanded包裹Text会强制组件占满所有剩余横向空间，文本较短时图标会被顶到行的最右端，无法实现紧贴文本的效果。

最优实现方案 #

使用Flexible组件以松约束模式包裹Text，同时将Row的主轴尺寸设为最小，即可同时满足两个需求：

1. 文本超长时，自动在剩余可用宽度内截断显示省略号，不会溢出
2. 文本较短时，Text组件宽度等于内容实际宽度，图标直接紧贴文本末尾，不会出现多余空白

示例代码：

Row(
  mainAxisSize: MainAxisSize.min, // 核心配置：Row本身不强制撑满父容器宽度
  children: [
    // 用Flexible替代Expanded，使用loose模式不强制撑满剩余空间
    Flexible(
      child: Text(
        '你的列表项文本内容',
        maxLines: 1, // ellipsis生效必须配置行数限制
        overflow: TextOverflow.ellipsis,
      ),
    ),
    // 文本和图标之间的间距按需调整
    const SizedBox(width: 4),
    const Icon(Icons.chevron_right, size: 16),
  ],
)

其他适配场景 #

如果列表项内存在多段可省略文本、多个图标混排的复杂布局，可以换用Wrap组件实现水平排列，配置crossAxisAlignment: WrapCrossAlignment.center保证所有子组件垂直居中，对需要省略的文本单独用Flexible包裹即可，逻辑和上述方案一致。

常见避坑点 #

• 不要给Text写死固定宽度，否则在不同屏幕尺寸、不同字体缩放比下容易出现显示异常
• 不要遗漏Text的maxLines配置，没有行数限制时ellipsis属性不会生效
• 不要给整个Row套Expanded，会导致Row强制撑满父容器宽度，破坏紧贴布局的约束

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