Flutter RichText支持自定义文本溢出效果
extended text 相关文章
- 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方法
@overridevoid 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 textcanvas.translate(offset.dx, offset.dy);final Offset overFlowTextSpanOffset = Offset(rect.width - textPainter.width, rect.height - textPainter.height);///find TextPosition near overflowTextPosition overflowOffset =getPositionForOffset(overFlowTextSpanOffset);
复制代码
再通过这个找出最近文字的top-left,这样才能保证不会剪切到半个或者不完全的文字。
///find overflow TextPosition that not clip the original textOffset 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,);//overflowif (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 systemOffset _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)
转载于:https://juejin.im/post/5c8ca608f265da2dd6394001
Flutter RichText支持自定义文本溢出效果相关推荐
- Flutter RichText支持自定义文字背景
extended text 相关文章 Flutter RichText支持图片显示和自定义图片效果 Flutter RichText支持自定义文本溢出效果 Flutter RichText支持自定义文 ...
- vue组件-echarts地图显示柱状图并给柱状图添加点击事件(支持自定义地图)
vue组件-echarts地图显示柱状图并给柱状图添加点击事件(支持自定义地图) 效果如下所示: 参考文档: 这是参考的文档 起因: 最近有朋友有需求需要用echarts,在地图上显示柱状图,并添加点 ...
- AndroidRichText 让Textview轻松的支持富文本(图像ImageSpan、点击效果等等类似QQ微信聊天)...
代码地址:https://github.com/Luction/AndroidRichText AndroidRichText帮助实现像QQ,微信一样的,一个TextView里既有文字又有表情又有图片 ...
- 2、多效果、太极图、党徽和五角星、时钟、animation、文本溢出显示省略号、Flex布局、Flex容器、链接状态、选择器、清除浮动、table表格合并、点击事件、半包围效
2.多效果.太极图.党徽和五角星.时钟.animation.文本溢出显示省略号.Flex布局.Flex容器.链接状态.选择器.清除浮动.table表格合并.点击事件.半包围效.getBoundingC ...
- wxpython bind自定义_wxpython 支持python语法高亮的自定义文本框控件的代码
在研发闲暇时间,把开发过程中比较重要的一些代码做个珍藏,下面的代码内容是关于wxpython 支持python语法高亮的自定义文本框控件的代码,应该是对大家也有用. import keyword im ...
- 文本溢出显示省略号效果
在HTML页面中经常会遇到文本溢出,需要将超出的部分隐藏并显示省略号的情况,那么这个文本溢出显示省略号效果是怎么实现的呢?下面本篇文章就来给大家介绍一下使用CSS实现文本溢出显示省略号效果的方法,希望 ...
- 相芯科技美妆SDK测评:妆容丰富 效果自然 支持自定义
美妆SDK想必大家都不陌生,得益于人们对美无止境的追求,各大企业纷纷接入这一功能,让客户可以随时体验在线换妆,而不必"劳脸伤财".但因人脸检测与跟踪技术的门槛不低,目前市面上的美妆 ...
- css overflow 省略号,图文详解CSS文本溢出显示省略号效果(text-overflow)
在工作中经常会遇到文本溢出,需要显示省略号的情况,那这个省略号是怎么实现的呢?这篇文章就给大家讲讲CSS中如何用text-overflow实现超出部分显示省略号.对CSS文字溢出加省略号这个知识不熟悉 ...
- html设置文字出现效果,文本溢出显示省略号效果怎么实现?
在HTML页面中经常会遇到文本溢出,需要将超出的部分隐藏并显示省略号的情况,那么这个文本溢出显示省略号效果是怎么实现的呢?下面本篇文章就来给大家介绍一下使用CSS实现文本溢出显示省略号效果的方法,希望 ...
最新文章
- 中文TTS文字转语音合成模块合成成品带喇叭 替代SYN6288和XFS5152
- SpringBoot-14-MyBatis预热篇,MySQL小结
- Jupyter 环境配置
- JAVA课程设计——“小羊吃蓝莓”小游戏
- arcgis api for flex 开发入门(五)查询
- java.lang.IllegalStateException Unable to find a @SpringBootConfiguration错误解决方案(亲测)
- 线性代数可以速成吗_英语真的可以速成吗?
- 李航《统计学习方法》之EM算法及其推广
- 微信自定义菜单中文乱码问题
- 背靠福特的Argo无人车发生严重事故,两名乘客已送往医院
- 陈国良院士将出席“首届对象存储技术与应用大会”
- ASP.NET Core DI 手动获取注入对象
- Opencv车牌号字符分割
- 处理效应模型stata实例_手把手教你Stata软件操作与案例分析
- hdoj3085 / acwing177 Nightmare
- 微信文章搜索工具, 推荐使用它,简单好用
- 列车停站方案_基于节点分级的高速铁路列车停站方案设计策略
- java 弧度 转经纬度_GPS 经纬度转换为 经过旋转后的平面坐标详解
- 地铁三号线 - 95后的财务自由
- 06 基于MAC和国外服务器及WordPress搭建个人网站
热门文章
- 010_AOPXml方式开发
- 006_CSS类选择器
- android沉浸代码,3秒钟搞定Android沉浸式状态栏
- 查看cpu使用率_腾讯游戏开发工程师:Linux 机器 CPU 毛刺问题排查
- ftp服务用户访问权限设置
- Mysql数据库中修改库名的的方法
- shiro放行_Shiro框架详解 tagline
- make 命令_Vim 命令大全
- Day3-springmvc注解的方式进行跳转的配置
- 360导入html没有,IE无法加载到外部CSS样式, 用360浏览器就可以,上CSS引用代码[急]_html/css_WEB-ITnose...