You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter中WidgetSpan后TextSpan溢出时文本不显示如何解决

问题描述

当同时使用WidgetSpan和TextSpan,且TextSpan内文本过长时,会出现显示异常。

异常表现

问题表现
目前已有同类问题反馈:TextSpan放置在WidgetSpan后,内容溢出时文本会不显示,但现有公开方案无法适配当前业务场景。
当前实现逻辑:Row组件内放置两个flex:1的Expanded组件,每个Expanded内承载一个Text.rich()组件,每个Text.rich()包含1个WidgetSpan和1个TextSpan,要求两个组件等宽占满剩余可用空间,因此不能采用直接将两个内容行组件并排的方案,该方案的异常效果如下:

直接Row并排的异常效果

Row并排异常效果

预期效果

文本过长时通过TextOverflow.ellipsis显示省略号截断,目标UI效果如下:
目标UI

现有问题代码

Row(
  children: [
    Expanded(
      flex: 1,
      child: Text.rich(
        TextSpan(children: [
          WidgetSpan(
            child: Container(
              margin: const EdgeInsets.only(right: 4.0),
              child: SvgPicture.asset("assets/icons/building.svg", color: 
                     htLightGrey),
            ),
          ),
          TextSpan(
            text: incident.building.name,
            style: const TextStyle(
              fontWeight: FontWeight.normal,
              fontSize: 16.0,
              color: htLightGrey, /*overflow: TextOverflow.ellipsis*/
            ),
          ),
        ]),
        maxLines: 1,
        overflow: TextOverflow.ellipsis,
      ),
    ),
    Expanded(
      flex: 1,
      child: incident.department != null
          ? Text.rich(
              TextSpan(children: [
                WidgetSpan(
                  child: Container(
                    margin: const EdgeInsets.only(right: 4.0),
                    child: SvgPicture.asset("assets/icons/department.svg", 
                           color: htLightGrey),
                  ),
                ),
                TextSpan(
                  text: incident.department!.name,
                  style: const TextStyle(fontWeight: FontWeight.normal, 
                         fontSize: 16.0, color: htLightGrey, overflow: 
                         TextOverflow.ellipsis),
                ),
              ]),
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
            )
          : const SizedBox.shrink(),
    )
  ],
)

内容的提问来源于stack exchange,提问作者Nosakhare Omoruyi

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.03 04:57:26