Flutter如何修复居中文本溢出时三点省略号显示异常问题？

我编写了如下Flutter代码：

Row(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          S.current.lbl_consignee_type + ": ",
          style: AppTextStyle.caption2,
        ),
        Expanded(
          child: Text(
            getStringAddress(consignee),
            overflow: TextOverflow.ellipsis,
            style: AppTextStyle.caption2,
            textAlign: TextAlign.center,
            softWrap: true,
            maxLines: 1,
          ),
        )
      ],
    )

按照Flutter文档，文本溢出时应显示text...样式，但实际UI显示异常，请问如何修复？

修复方案 #

你的代码中存在属性冲突，导致省略号无法正常渲染：

• softWrap: true 与 maxLines: 1 冲突：开启自动换行后，文本会尝试换行适配空间，但maxLines:1又限制只能显示一行，这会干扰Flutter的溢出计算逻辑
• textAlign: TextAlign.center 在单行溢出场景下，可能会影响省略号的正确渲染位置

修改后的代码如下：

Row(
  mainAxisAlignment: MainAxisAlignment.start,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text(
      S.current.lbl_consignee_type + ": ",
      style: AppTextStyle.caption2,
    ),
    Expanded(
      child: Text(
        getStringAddress(consignee),
        overflow: TextOverflow.ellipsis,
        style: AppTextStyle.caption2,
        maxLines: 1,
        softWrap: false, // 关闭自动换行，确保单行溢出逻辑生效
        // 若不需要居中对齐，可移除textAlign属性；若保留，需确保父布局空间足够
        // textAlign: TextAlign.center,
      ),
    )
  ],
)

关键要点 #

• 必须同时设置 maxLines: 1 和 overflow: TextOverflow.ellipsis
• 显式设置 softWrap: false，避免换行逻辑干扰单行溢出的省略号渲染
• 非必要情况下移除 textAlign: TextAlign.center，如果需要保留，需确认Expanded已分配到足够的可用空间

内容的提问来源于stack exchange，提问作者Phạm Ngọc Thắng