Flutter RichText支持自定义文字背景-CSDN博客

extended text 相关文章

之前介绍过了Extended text，老规矩上图

UI设计说，那个字可以加个卟呤卟呤闪闪的背景吗？当然可以啊，没问题，我就去加，不就是TextStlye里面加个Background的吗？

那个啥。。我的中文字呢？

又试了试，把背景色改成半透明的，中文字终于出来了，但是

尼玛，这个顶部高亮是什么鬼

也不吐槽了，想看bug的去24335和24337 看看，这个问题是我发现，@吉原拉面姐姐帮忙验证，然后我们2个都开了issue，然后我的被关了，只剩下小姐姐的（有内情吗）。那个我可以@吉原拉面吗，就是那个网红程序猿吉原拉面

对产品设计说

被怂为啥别人别的平台能做啊，不管，必须支持。于是我又去看了下issue，去年的issue，都快4个月了。。搞什么鬼，修不修？算了，不修，老夫自己来画。。

文本里面加入图片我们做过了那么一切好像都是顺水成章的事情了。如果下面有哪里觉得讲的有点跳跃，请先看之前的那篇文章，谢谢。

先放出图

直接来到paint方法,还是循环找到BackgroundTextSpan

if (ts is BackgroundTextSpan) {
        var painter = ts.layout(_textPainter);
        Rect textRect = topLeftOffset & painter.size;
        Offset endOffset;
        if (textRect.right > rect.right) {
          int endTextOffset = textOffset + ts.toPlainText().length;
          endOffset = _findEndOffset(rect, endTextOffset);
        }

        ts.paint(canvas, topLeftOffset, rect, endOffset: endOffset);
      } else if (ts.children != null) {
        _paintSpecialTextChildren(ts.children, canvas, rect,
            textOffset: textOffset);
      }
      textOffset += ts.toPlainText().length;
复制代码

这里我们要注意，因为你拿到的BackgroundTextSpan并且使用TextPainter出来的只能知道它整个文字的高度长度，不能直接知道它是否换行了，是否里面的文字是否文本溢出了，所以当文本最右边大于整个文本的右边的时候，就说明这个换行或者溢出了。使用_findEndOffset方法，我们从BackgroundTextSpan的最后一个字的位置向前找，直到找出BackgroundTextSpan最后一个不是文字溢出的位置

Offset _findEndOffset(Rect rect, int endTextOffset) {
    Offset endOffset = getOffsetForCaret(
      TextPosition(offset: endTextOffset, affinity: TextAffinity.upstream),
      rect,
    );
    //overflow
    if (endOffset == null || (endTextOffset != 0 && endOffset == Offset.zero)) {
      return _findEndOffset(rect, endTextOffset - 1);
    }
    return endOffset;
  }
复制代码

找到之后就好办了,如果endOffset为null，说明可以直接画背景

  canvas.drawRect(textRect, background);
复制代码

否则就说明这个BackgroundTextSpan有换行。

paint(Canvas canvas, Offset offset, Rect rect, {Offset endOffset})
复制代码

那么就分为三部分: 1.offset 到整个文本的最右边 2.整行 3.整个文本的最左边到endOffset

其实应该很好理解，通过下面的算法，计算出中间是否有整行

      ///endOffset.y has deviation,so we calculate with text height
      ///print(((endOffset.dy - offset.dy) / _painter.height));
      var fullLinesAndLastLine =
          ((endOffset.dy - offset.dy) / _textPainterHelper.painter.height)
              .round();
复制代码

剩下的就是绘画了,详见

到了这里，我们就已经解决掉了，中文字体和数字在一个TextSpan的时候Background的问题了。

但是这时候产品设计又来了，这是卟呤卟呤闪闪的背景？加个圆角可以不？加个阴影可以不？？

当然可以，什么东西我不能画的，除了钱。。

于是我给BackgroundTextSpan加了clipBorderRadius圆角设置和paintBackground回调

  ///clip BorderRadius
  final BorderRadius clipBorderRadius;

  ///paint background by yourself
  final PaintBackground paintBackground;
复制代码

圆角设置简单。。之前我们不就做过了，详见

PaintBackground 回调，给大家自己定义背景的机会。

             if (backgroundTextSpan.clipBorderRadius != null) {
                  canvas.save();
                canvas.clipPath(Path()
                  ..addRRect(backgroundTextSpan.clipBorderRadius
                         .resolve(painter.textDirection)
                         .toRRect(fullLineRect)));
                 }

               ///draw full line                              canvas.drawRect(
                      fullLineRect, backgroundTextSpan.background);

                  if (backgroundTextSpan.clipBorderRadius != null) {
                    canvas.restore();
                 }
复制代码

至于阴影，官方的BoxDecoration里面写的很详细，其实很多效果我都是看这个类才会的。。大家有空的话多看看源码能得到不少启示。

最后放上 Github Extended_Text，如果你有什么不明白的地方，请告诉我，欢迎加入Flutter Candies，一起生产可爱的Flutter 小糖果(QQ群:181398081)