大家在学习 Flutter 时一定会用过 Text,而对于一些复杂文本的处理可能会选择 RichText,再进一步,使用 RichText 就一定要用 TextSpan ,小菜本以为可以做为一个小知识点进行简单学习,但是随着深入尝试发现 TextSpan 涉及东西很多,很值得研究,因此单独整理一篇小博文。

      RichText 富文本核心即 TextSpan,而 TextSpan 结构很像 Android 中的 ViewGroup 树型结构。
3101.png3102.jpeg

RichText 日常用法

      小菜理解为 RichText 是进阶版的 Text,如下直接看实例:

  1. TextDirection 用来控制文字位置,居左或居右边;当与 TextAlign 属性共存时,优先看整体,以 TextAlign 为准;
    
    Widget richTextWid01() {
    return RichText(
      text: TextSpan(
          text: 'TextDirection.ltr 文字默认居左',
          style: TextStyle(fontSize: 16.0, color: Colors.black)),
      textDirection: TextDirection.ltr);
    }

Widget richTextWid02() {
return RichText(
text: TextSpan(
text: 'TextDirection.rtl 文字默认居右',
style: TextStyle(fontSize: 16.0, color: Colors.black)),
textDirection: TextDirection.rtl);
}

Widget richTextWid03() {
return RichText(
text: TextSpan(
text: 'textDirection 与 textAlign 同时设置,优先看整体,文字居中',
style: TextStyle(fontSize: 16.0, color: Colors.black)),
textDirection: TextDirection.rtl,
textAlign: TextAlign.center);
}

2. **RichText** 可以借助 **TextSpan** 实现文字的多种效果,小菜认为有点像文字效果拼接,每个 **TextSpan** 可以设置单独效果;

Widget richTextWid04() {
return RichText(
text: TextSpan(
text: '多种样式,如:',
style: TextStyle(fontSize: 16.0, color: Colors.black),
children: <TextSpan>[
TextSpan(
text: '红色',
style: TextStyle(fontSize: 18.0, color: Colors.red)),
TextSpan(
text: '绿色',
style: TextStyle(fontSize: 18.0, color: Colors.green)),
TextSpan(
text: '蓝色',
style: TextStyle(fontSize: 18.0, color: Colors.blue)),
TextSpan(
text: '白色',
style: TextStyle(fontSize: 18.0, color: Colors.white)),
TextSpan(
text: '紫色',
style: TextStyle(fontSize: 18.0, color: Colors.purple)),
TextSpan(
text: '黑色',
style: TextStyle(fontSize: 18.0, color: Colors.black))
]),
textAlign: TextAlign.center);
}

3. **TextSpan** 可以借助 **recognizer** 设置点击事件,包括点击/长按等;

final TapGestureRecognizer recognizer = TapGestureRecognizer();
void initState() {
super.initState();
recognizer.onTap = () {
Toast.show('您好,欢迎点赞或关注!', context,
duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM);
};
}

Widget richTextWid05() {
return RichText(
text: TextSpan(
text: 'recognizer 为手势识别者,可设置点击事件,',
style: TextStyle(fontSize: 17.0, color: Colors.black),
children: <TextSpan>[
TextSpan(
text: '点我试试',
style: TextStyle(fontSize: 17.0, color: Colors.blue),
recognizer: recognizer)
]));
}

### TextPainter 日常用法
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;**RichText** 的使用很方便,但如果在深入了解 **TextSpan** 就有很多趣味了;**Flutter** 提供了和 **Android** 类似的 **Canvas** 绘制方法,但是 **Canvas** 却不支持 **drawText**,如果想要实现绘制文字,就需要 [**TextPainter**](https://docs.flutter.io/flutter/painting/TextPainter-class.html) 而其内部主要是由 **TextSpan** 实现。

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;使用 **TextPainter** 时需要继承 **CustomPainter**,并实现 **paint** 和 **shouldRepaint** 方法,主要是在 **paint** 中进行绘制 **TextPainter**。与 **RichText** 功能相同,可以完全实现 **RichText** 效果;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;**TextPainter** 绘制需要实现 **layout** 与 **paint** 方法,即绘制位置与绘制范围。

1. **TextDirection** 和 **TextAlign** 效果与 **RichText** 一致,但是 **TextPainter** 绘制时需要设置 **layout** 的最大最小范围,而此时,文字位置与 **layout** 有关;当文字长度小于设置的 **minWidth** 最小宽度时,以 **minWidth** 宽度为限制居左/居右/居中等;而当文字长度大于设置的 **minWidth** 最小宽度时,以 **maxWidth** 最大宽度为限制,包括换行等;

TextPainter(
text: TextSpan(
text: 'TextDirection.ltr 文字默认居左',
style: TextStyle(fontSize: 16.0, color: Colors.black)),
textDirection: TextDirection.ltr)
..layout(maxWidth: Screen.width, minWidth: Screen.width)
..paint(canvas, Offset(0.0, 0.0));
TextPainter(
text: TextSpan(
text: 'TextDirection.rtl 文字默认居右',
style: TextStyle(fontSize: 16.0, color: Colors.black)),
textDirection: TextDirection.rtl)
..layout(maxWidth: Screen.width, minWidth: Screen.width)
..paint(canvas, Offset(0.0, 24.0));
TextPainter(
text: TextSpan(
text: 'textDirection 与 textAlign 同时设置,优先看整体,文字居中',
style: TextStyle(fontSize: 16.0, color: Colors.black)),
textDirection: TextDirection.rtl,
textAlign: TextAlign.center)
..layout(maxWidth: Screen.width, minWidth: Screen.width)
..paint(canvas, Offset(0.0, 48.0));
TextPainter(
text: TextSpan(
text: '文字位置与 layout 的最大最小宽度有关',
style: TextStyle(fontSize: 16.0, color: Colors.black)),
textDirection: TextDirection.rtl)
..layout(maxWidth: Screen.width - 100.0, minWidth: Screen.width - 200.0)
..paint(canvas, Offset(0.0, 90.0));
TextPainter(
text: TextSpan(
text: '文字长度较小',
style: TextStyle(fontSize: 16.0, color: Colors.black)),
textDirection: TextDirection.rtl)
..layout(maxWidth: Screen.width - 100.0, minWidth: Screen.width - 140.0)
..paint(canvas, Offset(0.0, 124.0));

2. 而对于绘制多效果的样式也是很方便,与 **RichText** 基本一致;

TextPainter(
text: TextSpan(
text: '多种样式,如:',
style: TextStyle(fontSize: 16.0, color: Colors.black),
children: <TextSpan>[
TextSpan(
text: '红色',
style: TextStyle(fontSize: 18.0, color: Colors.red)),
TextSpan(
text: '绿色',
style: TextStyle(fontSize: 18.0, color: Colors.green)),
TextSpan(
text: '蓝色',
style: TextStyle(fontSize: 18.0, color: Colors.blue)),
TextSpan(
text: '白色',
style: TextStyle(fontSize: 18.0, color: Colors.white)),
TextSpan(
text: '\n紫色',
style: TextStyle(fontSize: 18.0, color: Colors.purple)),
TextSpan(
text: '黑色',
style: TextStyle(fontSize: 18.0, color: Colors.black))
]),
textDirection: TextDirection.ltr,
textAlign: TextAlign.center)
..layout(maxWidth: Screen.width, minWidth: Screen.width)
..paint(canvas, Offset(0.0, 148.0));

3. 小菜一直有问题的就是设置点击事件,小菜以为与 **RichText** 一样直接传递 **recognizer** 即可,但始终无法调起,希望有解决过这个问题的朋友多多指导,如下是小菜的测试代码;

TextPainter(
text: TextSpan(
text: 'recognizer 为手势识别者,可设置点击事件,',
style: TextStyle(fontSize: 17.0, color: Colors.black),
children: <TextSpan>[
TextSpan(
text: '测试暂时有误,待研究',
style: TextStyle(fontSize: 17.0, color: Colors.blue))
],
recognizer: TapGestureRecognizer()
..onTap = () {
print('===测试暂时有误,待研究==');
}),
textDirection: TextDirection.ltr,
textAlign: TextAlign.center)
..layout(maxWidth: Screen.width - 40.0, minWidth: Screen.width - 40.0)
..paint(canvas, Offset(20.0, 200.0));

4. 小菜认为最有意思的就是 **TextSpan** 中 **style** 的 **height** 属性,在 **TextSpan** 中此值设置行高,是以文字基准线为最小距离;

TextPainter(
text: TextSpan(
text: 'TextPainter 小尝试',
style: TextStyle(fontSize: 20.0, color: Colors.black54),
children: <TextSpan>[
TextSpan(
text: '\n作者:和尚(height:1.6)',
style: TextStyle(
fontSize: 14.0, color: Colors.black54, height: 1.6))
]),
textDirection: TextDirection.ltr,
textAlign: TextAlign.center)
..layout(maxWidth: Screen.width, minWidth: Screen.width)
..paint(canvas, Offset(0.0, 20.0));
TextPainter(
text: TextSpan(
text: 'TextPainter 小尝试',
style: TextStyle(fontSize: 20.0, color: Colors.black54),
children: <TextSpan>[
TextSpan(
text: '\n作者:和尚(height:3.0)',
style: TextStyle(
fontSize: 14.0, color: Colors.black54, height: 3.0))
]),
textDirection: TextDirection.ltr,
textAlign: TextAlign.center)
..layout(maxWidth: Screen.width, minWidth: Screen.width)
..paint(canvas, Offset(0.0, 90.0));
TextPainter(
text: TextSpan(
text: 'TextPainter 小尝试(height:0.1)',
style:
TextStyle(fontSize: 20.0, color: Colors.black54, height: 0.1),
children: <TextSpan>[
TextSpan(
text: '\nTextPainter 小尝试(height:0.1)',
style: TextStyle(
fontSize: 20.0, color: Colors.black54, height: 0.1)),
TextSpan(
text: '\nTextPainter 小尝试(height:0.1)',
style: TextStyle(
fontSize: 20.0, color: Colors.black54, height: 0.1))
]),
textDirection: TextDirection.ltr,
textAlign: TextAlign.center)
..layout(maxWidth: Screen.width, minWidth: Screen.width)
..paint(canvas, Offset(0.0, 220.0));


![3103.jpeg](https://s2.51cto.com/images/20211211/1639188343425016.jpeg?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=)
***
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;如果有不对的地方还希望多多指出。

> 来源:阿策小和尚