【Text】【布局】文本显示超出Text组件大小时以走马灯的形式展示的实现

16 阅读1分钟

在研发过程中,会存在文本内容在Text组件中显示时,因为文本内容的展示,超出Text组件大小的情况。

这时不作任何处理,文本内容会被截断,可以使用走马灯的方式展示,代码示例如下。

Text("这是一段文字,因为超出Text组件的大小,部分内容被截断")
  .fontSize(16)
  .width(168)
  .maxLines(1)
  .textOverflow({ overflow: TextOverflow.None })

Text("这是一段文字,因为超出Text组件的大小,将以走马灯的形式展示")
  .fontSize(16)
  .width(168)
  .maxLines(1)
  .textOverflow({ overflow: TextOverflow.MARQUEE })

代码执行效果为

cke_2780.png

cke_3320.png