【Flutter 专题】31 图解 TextPainter 与 TextSpan 小尝试
大家在学习 Flutter 时一定会用过 Text,而对于一些复杂文本的处理可能会选择 RichText,再进一步,使用 RichText 就一定要用 TextSpan ,小菜本以为可以做为一个小知识点进行简单学习,但是随着深入尝试发现 TextSpan 涉及东西很多,很值得研究,因此单独整理一篇小博文。
RichText 富文本核心即 TextSpan,而 TextSpan 结构很像 Android 中的 ViewGroup 树型结构。
RichText 日常用法
小菜理解为 RichText 是进阶版的 Text,如下直接看实例:
TextDirection 用来控制文字位置,居左或居右边;当与 TextAlign 属性共存时,优先看整体,以 TextAlign 为准;
RichText 可以借助 TextSpan 实现文字的多种效果,小菜认为有点像文字效果拼接,每个 TextSpan 可以设置单独效果;
TextSpan 可以借助 recognizer 设置点击事件,包括点击/长按等;
TextPainter 日常用法
RichText 的使用很方便,但如果在深入了解 TextSpan 就有很多趣味了;Flutter 提供了和 Android 类似的 Canvas 绘制方法,但是 Canvas 却不支持 drawText,如果想要实现绘制文字,就需要 TextPainter 而其内部主要是由 TextSpan 实现。
使用 TextPainter 时需要继承 CustomPainter,并实现 paint 和 shouldRepaint 方法,主要是在 paint 中进行绘制 TextPainter。与 RichText 功能相同,可以完全实现 RichText 效果;
TextPainter 绘制需要实现 layout 与 paint 方法,即绘制位置与绘制范围。
TextDirection 和 TextAlign 效果与 RichText 一致,但是 TextPainter 绘制时需要设置 layout 的最大最小范围,而此时,文字位置与 layout 有关;当文字长度小于设置的 minWidth 最小宽度时,以 minWidth 宽度为限制居左/居右/居中等;而当文字长度大于设置的 minWidth 最小宽度时,以 maxWidth 最大宽度为限制,包括换行等;
而对于绘制多效果的样式也是很方便,与 RichText 基本一致;
小菜一直有问题的就是设置点击事件,小菜以为与 RichText 一样直接传递 recognizer 即可,但始终无法调起,希望有解决过这个问题的朋友多多指导,如下是小菜的测试代码;
小菜认为最有意思的就是 TextSpan 中 style 的 height 属性,在 TextSpan 中此值设置行高,是以文字基准线为最小距离;
如果有不对的地方还希望多多指出。
来源:阿策小和尚
版权声明: 本文为 InfoQ 作者【阿策小和尚】的原创文章。
原文链接:【http://xie.infoq.cn/article/a7aa81ad0a97e0cef2ee46aeb】。文章转载请联系作者。
评论