Flutter中RichText+TextSpan超长文本省略失效问题求助

问题描述 #

需要通过RichText结合TextSpan实现格式化文本，要求超长文本在容器内显示省略号（...）。尝试使用Expanded和Flexible组件后，不仅未解决问题，还出现文本消失的情况；当前实际效果为文本超出容器范围并触发UI警告，无法正常显示省略号。

效果对比 #

• 预期效果：
• 实际效果：

问题代码 #

child: Column(
  children: [
    Visibility(
      visible: notificationList[index].isHeader ? false : true,
      child: Container(
        margin: EdgeInsets.fromLTRB(
            1, notificationList[index].isHeader ? 0 : 15, 1, 0),
        padding: EdgeInsets.all(10),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(
            Radius.circular(10.0),
          ),
          color: Colors.white,
          boxShadow: [
            BoxShadow(
              color: Colors.grey,
              blurRadius: 3,
              offset: Offset(0, 0), // Shadow position
            ),
          ],
        ),
        child: Row(
          children: [
            Container(
              width: 40,
              height: 40,
              margin: EdgeInsets.fromLTRB(0, 0, 15, 0),
              decoration: BoxDecoration(
                color: Color(0xfffce8ef),
                border:
                    Border.all(color: Color(0xfffce8ef), width: 1),
                borderRadius: BorderRadius.all(Radius.circular(10)),
              ),
              child: Center(
                child: Icon(
                  Icons.directions_car_outlined,
                  color: Color(0xfff2426d),
                ),
              ),
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  margin: EdgeInsets.fromLTRB(5, 0, 0, 0),
                  child: Flexible(
                    child: RichText(
                        softWrap: true,
                        overflow: TextOverflow.ellipsis,
                        maxLines: 1,
                        text: TextSpan(
                          style: const TextStyle(
                            fontSize: 15.0,
                            color: Colors.black,
                          ),
                          children: <TextSpan>[
                            TextSpan(
                                text:
                                    '${notificationList[index].title}',
                                style: const TextStyle(
                                    fontWeight: FontWeight.bold)),
                            TextSpan(
                                text:
                                    ' (${notificationList[index].name})'),
                          ],
                        )),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    ),
  ],
)

解决方案 #

问题核心是Row中的Column没有宽度约束，导致其会无限延展以适应文本长度，RichText无法触发省略逻辑。只需将Row内的Column组件用Expanded包裹，让它占据Row的剩余空间即可。

修改后的关键代码片段 #

Row(
  children: [
    // 左侧图标容器（保持不变）
    Container(...),
    // 用Expanded包裹Column，限制宽度
    Expanded(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            margin: EdgeInsets.fromLTRB(5, 0, 0, 0),
            child: RichText(
                softWrap: true,
                overflow: TextOverflow.ellipsis,
                maxLines: 1,
                text: TextSpan(
                  style: const TextStyle(
                    fontSize: 15.0,
                    color: Colors.black,
                  ),
                  children: <TextSpan>[
                    TextSpan(
                        text: '${notificationList[index].title}',
                        style: const TextStyle(fontWeight: FontWeight.bold)),
                    TextSpan(text: ' (${notificationList[index].name})'),
                  ],
                )),
          ),
        ],
      ),
    ),
  ],
)

修改后，Column会受到Row的宽度限制，RichText在文本超长时会自动显示省略号，同时不会出现文本消失的问题。

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