Flutter RichText支持自定義文字背景

extended text 相關文章

• Flutter RichText支持圖片顯示和自定義圖片效果
• Flutter RichText支持自定義文本溢出效果
• Flutter RichText支持自定義文字背景
• Flutter RichText支持特殊文字效果
• Flutter RichText支持文本選擇

以前介紹過了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)