Flutter中WidgetSpan后TextSpan溢出时文本不显示如何解决
问题描述
当同时使用WidgetSpan和TextSpan,且TextSpan内文本过长时,会出现显示异常。
异常表现

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

预期效果
文本过长时通过TextOverflow.ellipsis显示省略号截断,目标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
相关产品推荐
相关产品推荐

