flutter-Text 以字符的方式截断

举报
坚果派 发表于 2021/12/15 22:54:40 2021/12/15
【摘要】 本文主要介绍Text 以字符的方式截断 Text 以字符的方式截断 https://github.com/flutter/flutter/issues/52869 在flutter中,...

本文主要介绍Text 以字符的方式截断

Text 以字符的方式截断

https://github.com/flutter/flutter/issues/52869

在flutter中,Text控件默认的溢出显示模式是TextOverflow.fade ,就是淡出

在iOS或者Android平台默认的文件截断模式一般是…省略,flutter里面对应的截断模式为TextOverflow.ellipsis ,不过这里的截断是英文按照单词来的,这样的模式会导致如果最后一个单词很长时,截断显示会整理省略而不是最后超出的字符省略,导致模块可能有一大块空白。

Dart系统定义的截断模式

/// How overflowing text should be handled.
///
/// A [TextOverflow] can be passed to [Text] and [RichText] via their
/// [Text.overflow] and [RichText.overflow] properties respectively.
enum TextOverflow {
  /// Clip the overflowing text to fix its container.
  clip,

  /// Fade the overflowing text to transparent.
  fade,

  /// Use an ellipsis to indicate that the text has overflowed.
  ellipsis,

  /// Render overflowing text outside of its container.
  visible,
}

  
 

如何解决英文单词被整体截断呢?

将单词的每个字符切割开,插入宽度0的占位字符,打破系统默认的机制,这样就可以以字符为单位省略了

需要注意。这种方式相当于修改了文本的内容,一般文本最大一行显示可以用,如果文本支持2行以及以上的显示的话,将会导致换行不再按照字符进行而按照单词进行

下面是Example实现

extension TextOverflowUtil on String {
  /// 将flutter系统默认的单词截断模式转换成字符截断模式
  /// 通过向文本中插入宽度为0的空格实现
  static String toCharacterBreakStr(String word) {
    if (word == null || word.isEmpty) {
      return word;
    }
    String breakWord = '';
    word.runes.forEach((element) {
      breakWord += String.fromCharCode(element);
      breakWord += '\u200B';
    });
    return breakWord;
  }
}

  
 

文章来源: jianguo.blog.csdn.net,作者:坚果前端の博客,版权归原作者所有,如需转载,请联系作者。

原文链接:jianguo.blog.csdn.net/article/details/120079282

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。