如何在网站上做推广,温州网站建设前十公司,公司内部网站管理系统,织梦修改网站标题extended text 相关文章 Flutter RichText支持图片显示和自定义图片效果Flutter RichText支持自定义文本溢出效果Flutter RichText支持自定义文字背景Flutter RichText支持特殊文字效果之前介绍过了Extended text#xff0c;老规矩上图 UI设计说#xff0c;那个字可以加个卟呤…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) 转载于:https://juejin.im/post/5c8bf9516fb9a049c9669204
