Flutter中Text组件的TextOverflow失效问题求助

问题场景 #

在Row组件内嵌套包含两个Text的Column时，已为Text设置TextOverflow.ellipsis、maxLines:1和softWrap:false，但省略效果未生效，仍触发RenderFlex Overflow错误。

问题原因 #

• Expanded放置位置错误：Expanded必须作为Row的直接子组件，才能让其子组件（Column）获取Row的剩余可用宽度。原代码中将Expanded嵌套在Padding内部，导致Column无法获得有效的宽度约束，Text无法触发省略逻辑。
• 冗余无效的属性设置：第二个Text的TextStyle中重复设置了overflow属性，该属性属于Text组件本身，Style中的overflow不会生效，属于无效代码。

修正代码 #

Row(children: [
  Expanded(
    child: Padding(
      padding: const EdgeInsets.symmetric(horizontal: 10),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Text(
            data.picodedesc,
            overflow: TextOverflow.ellipsis,
            softWrap: false,
            maxLines: 1,
            style: const TextStyle(fontSize: 12),
          ),
          Text(
            data.description,
            overflow: TextOverflow.ellipsis,
            maxLines: 1,
            softWrap: false,
            style: const TextStyle(fontSize: 12),
          ),
        ],
      ),
    ),
  ),
])

关键改动 #

• 将Expanded调整为Row的直接子组件，让Column获得Row分配的有限宽度，确保Text能在超出宽度时触发省略。
• 删除TextStyle中无效的overflow设置，保持代码简洁规范。

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