Flutter RichText支持自定义文本溢出效果

extended text 相关文章

• Flutter RichText支持图片显示和自定义图片效果
• Flutter RichText支持自定义文本溢出效果
• Flutter RichText支持自定义文字背景
• Flutter RichText支持特殊文字效果
• Flutter RichText支持文本选择

以前介绍过了Extended text的图片功能 ，今天要讲的仍是跟产品设计有关系，老规矩上图

产品说，那个文本溢出的点点点后面给我加个鸡腿，想什么啊，是加个 “全文”字样，点击以后跳转到全文去。

就像下面这种同样

首先，我看了下Text的源码，发现这个...是被写死了的，传递给了TextPainter

const String _kEllipsis = '\u2026';
复制代码

而后再向里面看，就是引擎绘画的代码了。。看不到了。。是我太弱了。 在google上搜索了下，发现也有问这个问题26748，上面也是说了。。须要把源码复制出来，把_kEllipsis改为你想要的，可是。。这个是个字符串啊。。那个好比说蓝色怎么弄？好比说点击怎么弄？

想来想去，一个字就是画，在Canvas上面尽情画。

首先，我定义了一个TextSpan 用于用户自定义文本溢出效果

overFlowTextSpan: OverFlowTextSpan(children: <TextSpan>[
                      TextSpan(text: ' \u2026 '),
                      TextSpan(
                          text: "more detail",
                          style: TextStyle(
                            color: Colors.blue,
                          ),
                          recognizer: TapGestureRecognizer()
                            ..onTap = () {
                              launch(
                                  "https://github.com/fluttercandies/extended_text");
                            })
                    ], background: Theme.of(context).canvasColor),
复制代码

而后咱们直接来到ExtendedRenderParagraph的paint方法

@override
  void paint(PaintingContext context, Offset offset) {
    _paintSpecialText(context, offset);
    _paint(context, offset);
    _paintTextOverflow(context, offset);
  }
复制代码

这个效果确定须要在画好字以后，再来魔改

void _paintTextOverflow(PaintingContext context, Offset offset) {
    if (_hasVisualOverflow && overFlowTextSpan != null) {
      final Canvas canvas = context.canvas;

      ///we will move the canvas, so rect top left should be (0,0)
      final Rect rect = Offset(0.0, 0.0) & size;
      var textPainter = overFlowTextSpan.layout(_textPainter);
      assert(textPainter.width <= rect.width,);
     
  }
复制代码

首先咱们须要layout一下咱们的overFlowTextSpan，若是你定义的太长，已经超出一行了的话，那么抱歉

老动做，把画布移动到整个文字的左上角，根据overFlowTextSpanOffset的左上角，计算出最近的TextPosition。

canvas.save();

      ///move to extended text
      canvas.translate(offset.dx, offset.dy);

      final Offset overFlowTextSpanOffset = Offset(
          rect.width - textPainter.width, rect.height - textPainter.height);

      ///find TextPosition near overflow
      TextPosition overflowOffset =
          getPositionForOffset(overFlowTextSpanOffset);
复制代码

再经过这个找出最近文字的top-left，这样才能保证不会剪切到半个或者不彻底的文字。

///find overflow TextPosition that not clip the original text
      Offset finalOverflowOffset = _findFinalOverflowOffset(
          rect, rect.width - textPainter.width, overflowOffset.offset);

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

    if (endOffset.dx > x) {
      return _findFinalOverflowOffset(rect, x, endTextOffset - 1);
    }
    return endOffset;
  } 
复制代码

这样子咱们就找到咱们须要在哪一个文字的位置把OverFlowTextSpan绘画出来，而且想办法把OverFlowTextSpan下一层的文字给清除或者遮挡住。

首先尝试是用BlendMode.clear来清除指定区域的文字，失败，不知道为何， 我看别人也是这样子写的，能清除掉Canvas上面的内容，若是有哪一个兄弟知道，请必定要告诉我，感谢万分。

///why BlendMode.clear not clear the text
// canvas.saveLayer(overFlowTextSpanRect, Paint());
// canvas.drawRect(
// overFlowTextSpanRect,
// Paint()
// ..blendMode = BlendMode.clear);
// canvas.restore();
复制代码

那么只能画一层跟Canvas同样的颜色来遮住文字了。这里默认使用的是

Theme.of(context).canvasColor
复制代码

而后咱们再画上OverFlowTextSpan

textPainter.paint(
          canvas, Offset(finalOverflowOffset.dx, overFlowTextSpanOffset.dy));
复制代码

最后咱们要处理一下点击事件，保存textPainter绘画的点（相对整个系统坐标的）

overFlowTextSpan.textPainterHelper.saveOffset(Offset(
          offset.dx + finalOverflowOffset.dx,
          offset.dy + overFlowTextSpanOffset.dy));
复制代码

在handleEvent方法中，咱们加入如下代码,若是找到了对应注册了recognizer的TextSpan，咱们就给它触发，而且return（由于overFlowTextSpan在原来的字的上一层）

if (overFlowTextSpan != null) {
      final TextPosition position =
          overFlowTextSpan.textPainterHelper.getPositionForOffset(offset);
      final TextSpan span =
          overFlowTextSpan.textPainterHelper.getSpanForPosition(position);

      if (span?.recognizer != null) {
        span.recognizer.addPointer(event);
        return;
      }
    }
复制代码

_offset是咱们刚才保持的相对整个系统坐标的点，咱们须要把传入的Offset减掉 _offset，这样这个overFlowTextSpan的相对本身的坐标系才是以（0，0）开始的，最后用这个TextPosition找到对应的TextSpan，大功告成。

///method for [OverFlowTextSpan]
  ///offset int coordinate system
  Offset _offset;
  void saveOffset(Offset offset) {
    _offset = offset;
  }

  ///method for [OverFlowTextSpan]
  TextPosition getPositionForOffset(Offset offset) {
    return painter.getPositionForOffset(offset - _offset);
  }

  ///method for [OverFlowTextSpan]
  TextSpan getSpanForPosition(TextPosition position) {
    return painter.text.getSpanForPosition(position);
  }
复制代码

除了清除（覆盖）文字的那个部分，其余应该都是比较完美的解决方案，期待你们能带来更多点子，改进 Extended Text

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