如何解决富文本留白问题

在开发过程中，文字换行经常出现各种各样的问题。如果是纯中文文本，可能不会出现。

1.中英文混排，当文本内容过长，会出现自动换行留白问题： 出现原因：中文与英文的“宽度”不同导致文本过长留白问题

Text(
                "嘟嘟嘟嘟嘟嘟嘟dkjdjakdfjjakjaklfjakdakfjkajflajflddfkfjalkfjkafjkldfjadfjkajfldfjkldfkdffjkjf",
                style: TextStyle(fontSize: 14),
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
              ),

String separateText(String text) {
    if (text.isEmpty) {
      return text;
    }
    String separateWord = ' ';
    text.runes.forEach((element) {
      breakWord += String.fromCharCode(element);
      breakWord += '\u200B'; /// 插入不可见的空间来影响文本的换行和对齐
    });
    return breakWord;
  }

当我们不需要精准点知道排列后的文本长度这样的操作是完全可以的，但是一旦我们需要精准计算，即使插入的内容不影响排版，但会对计算过程中造成一定的影响，所以中英文混排留白可以适当选取方式。

2.富文本中英文混排，同样出现此问题 在做需求的过程中，由遇到富文本中英文且指定文本高亮并且要求换行不出现留白问题的场景，下面针对自身遇到的情况提供几个解决问题的思路

1.简单粗暴的方法：将全部字符打散排列，虽然简单容易理解，但是无疑工作量较大

2.借鉴文本中英文混排思路，也插入“\u200B"字符，在通过正则匹配，我要高亮的文本。虽可以解决问题，但是当我高亮的文本规则越来越复杂的时候，需要书写的正则会变得非常复杂，因为高亮的文本并不受限制：可能存在数字、特殊符号、英文等等，所以虽然可以解决，但成本价较高。 3.flutter提供计算布局的占用大小的方法：比如计算文本

class UIHelper {
  UIHelper._();

  static double calcTextMaxWidthStandard(List<String> text, TextStyle style) {
    if (text.isEmpty) return 0;
    final longest = (text..sort((a, b) => a.length.compareTo(b.length))).last;
    final TextPainter textPainter = TextPainter(
      text: TextSpan(text: longest, style: style),
      textDirection: TextDirection.ltr,
    )..layout();
    return textPainter.width;
  }

  static double calcTextMaxWidth(List<String> text, double fontSize) {
    return calcTextMaxWidthStandard(text, TextStyle(fontSize: fontSize));
  }
}

比如我们明确的知道文本父布局所限制的宽度，通过以上方法可以计算出富文本所占用的宽度，通过计算出富文本所占用的布局与父布局相比，可以算出位于最后一个位置的字符，相对的index进行记录，再将不足展示的字符手动插入\n 展示的时候分段处理富文本，就可以解决富文本换行留白问题啦，同时跟据你要求的规则具体高亮。