extended text 相关文章
- 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,);//overflowif (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 BorderRadiusfinal BorderRadius clipBorderRadius;///paint background by yourselffinal 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)