Flutter：Text

发表于 | 更新于 | 分类于 | 阅读次数：
Flutter Text 详解

Text属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const Text(
  this.data, //显示的文本
  {
    Key key,
    this.style,//字体样式
    this.textAlign,//文本对齐方式,left right不受textDirection影响，start end手textDirection影响
    this.textDirection,//文本方向，不是文字排列的方向，指的是换行后文字靠左还是靠右显示。
    this.locale,//?
    this.softWrap,//文字超出屏幕后是否换行，默认为true，为false时不换行，超出屏幕外的文字不显示
    this.overflow,//当softWrap为false时，或文字超出了maxLines后，超出屏幕后的文字怎么处理
    this.textScaleFactor,//字体大小倍率，字体大小=textScaleFactor * fontSize
    this.maxLines,//文字显示的最大行数
    this.semanticsLabel,//?
  }
)
textAlign 文本对齐方式
  • TextAlign.left 左对齐 不受textDirection 影响
  • TextAlign.right 右对齐 不受textDirection 影响
  • TextAlign.center 居中 不受textDirection 影响
  • TextAlign.justify 自适应 两端对齐
  • TextAlign.start 如果textDirection 是ltr ，start表示左对齐
    ，如果textDirection是rtl，start表示右对齐。
  • TextAlign.end 如果textDirection
    是ltr，end表示右对齐，如果textDirection是rtl ，end表示左对齐

没有textDirection时，textDirection默认为ltr：

1
2
3
4
5
6
7
8
9
10
11
Text("123456789   textAlign: TextAlign.left",style: TextStyle(fontSize: 30,color: Colors.red),textAlign: TextAlign.left,),
Divider(height: 1,color: Colors.grey,),
Text("123456789   textAlign: TextAlign.right",style: TextStyle(fontSize: 30,color: Colors.blue),textAlign: TextAlign.right,),
Divider(height: 1,color: Colors.grey,),
Text("123456789   textAlign: TextAlign.center",style: TextStyle(fontSize: 30,color: Colors.green),textAlign: TextAlign.center,),
Divider(height: 1,color: Colors.grey,),
Text("123456789   textAlign: TextAlign.justify",style: TextStyle(fontSize: 30,color: Colors.red),textAlign: TextAlign.justify,),
Divider(height: 1,color: Colors.grey,),
Text("123456789   textAlign: TextAlign.start",style: TextStyle(fontSize: 30,color: Colors.blue),textAlign: TextAlign.start,),
Divider(height: 1,color: Colors.grey,),
Text("123456789   textAlign: TextAlign.end",style: TextStyle(fontSize: 30,color: Colors.green),textAlign: TextAlign.end,),

textDirection为rtl时：

1
2
3
4
5
6
7
8
9
10
11
12
Text("textDirection: TextDirection.rtl,   textAlign: TextAlign.left",style: TextStyle(fontSize: 20,color: Colors.red),textAlign: TextAlign.left,textDirection: TextDirection.rtl,),
Divider(height: 1,color: Colors.grey,),
ext("textDirection: TextDirection.rtl,   textAlign: TextAlign.right",style: TextStyle(fontSize: 20,color: Colors.blue),textAlign: TextAlign.right,textDirection: TextDirection.rtl,),
Divider(height: 1,color: Colors.grey,),
Text("textDirection: TextDirection.rtl,   textAlign: TextAlign.center",style: TextStyle(fontSize: 20,color: Colors.green),textAlign: TextAlign.center,textDirection: TextDirection.rtl,),
Divider(height: 1,color: Colors.grey,),
Text("textDirection: TextDirection.rtl,   textAlign: TextAlign.justify",style: TextStyle(fontSize: 20,color: Colors.red),textAlign: TextAlign.justify,textDirection: TextDirection.rtl,),
Divider(height: 1,color: Colors.grey,),
Text("textDirection: TextDirection.rtl,   textAlign: TextAlign.start",style: TextStyle(fontSize: 20,color: Colors.blue),textAlign: TextAlign.start,textDirection: TextDirection.rtl,),
Divider(height: 1,color: Colors.grey,),
Text("textDirection: TextDirection.rtl,   textAlign: TextAlign.end",style: TextStyle(fontSize: 20,color: Colors.green),textAlign: TextAlign.end,textDirection: TextDirection.rtl,),
Divider(height: 1,color: Colors.grey,),
softWrap 文字是否自动换行

  • 默认为true 自动换行

  • 为false时，只显示一行，剩余不显示

1
2
3
4
Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",style: TextStyle(fontSize: 20),softWrap: true,),
Divider(height: 1,color: Colors.grey,),
Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",style: TextStyle(fontSize: 20),softWrap: false,),
Divider(height: 1,color: Colors.grey,),
overflow 文字超过行数后，对可显示范围内，末尾文字的处理效果
maxLines 文字显示的最大行数

overflow的值：

  • TextOverflow.clip 直接截断
  • TextOverflow.ellipsis 末尾显示…
  • TextOverflow.fade 末尾渐隐效果

下面几种情况：

  • 当softWrap为false时

1
2
3
4
5
Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",style: TextStyle(fontSize: 20),softWrap: false,overflow: TextOverflow.clip,),
Divider(height: 1,color: Colors.grey,),
Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",style: TextStyle(fontSize: 20),softWrap: false,overflow: TextOverflow.ellipsis,),
Divider(height: 1,color: Colors.grey,),
Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",style: TextStyle(fontSize: 20),softWrap: false,overflow: TextOverflow.fade,),

  • 当超过了maxlines后

1
2
3
4
5
6
Divider(height: 1,color: Colors.grey,),
Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",style: TextStyle(fontSize: 35),maxLines: 2,overflow: TextOverflow.clip,),
Divider(height: 1,color: Colors.grey,),
Text("bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb",style: TextStyle(fontSize: 35),maxLines: 2,overflow: TextOverflow.ellipsis,),
Divider(height: 1,color: Colors.grey,),
Text("ccccccccccccccccccccccccccccccccccccccccccccccccccccccccc",style: TextStyle(fontSize: 35),maxLines: 2,overflow: TextOverflow.fade,),
textScaleFactor 文字大小倍率系数

  • 文字实际大小=textScaleFactor * fontSize

1
2
3
4
5
6
7
8
Divider(height: 1,color: Colors.grey,),
Text("aaaaaaaaaa",style: TextStyle(fontSize: 10),textScaleFactor: 1,),
Divider(height: 1,color: Colors.grey,),
Text("bbbbbbbbbb",style: TextStyle(fontSize: 10),textScaleFactor: 2,),
Divider(height: 1,color: Colors.grey,),
Text("cccccccccc",style: TextStyle(fontSize: 10),textScaleFactor: 3,),
Divider(height: 1,color: Colors.grey,),
Text("dddddddddd",style: TextStyle(fontSize: 30),textScaleFactor: 1,),

TextStyle

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const TextStyle({
    this.inherit = true,//true显示文本   false隐藏文本
    this.color,//字体颜色
    this.backgroundColor,//背景颜色
    this.fontSize,//字体大小
    this.fontWeight,//字体比重 字体加粗
    this.fontStyle,//字体样式  斜体或非斜体
    this.letterSpacing,//字母之间距离
    this.wordSpacing,//单词之间距离
    this.textBaseline,//？
    this.height,//行高系数，行高=height * fontSize
    this.locale,//?
    this.foreground,//画字体使用的画笔，Paint类型，字体颜色color 就是Paint()..color=color的简写，因此color与foreground不能同时存在
    this.background,//画背景使用的画笔，Paint类型，背景颜色backgroundColor就是Paint()..color=backgroundColor的简写，因此backgroundColor与background不能同时存在
    this.shadows,//文字阴影效果
    this.decoration,//给文字增加删除线、上划线、下划线等，可同时增加多个
    this.decorationColor,//给文字增加的删除线、上划线、下划线的颜色
    this.decorationStyle,//给文字增加的删除线、上划线、下划线的样式，虚线、实线、点、正弦线等
    this.debugLabel,//?
  })
inherit

  • true 显示文本

  • false不显示文本 设置color后失效

1
2
3
4
5
6
7
8
9
10
11
12
Divider(height: 1,color: Colors.grey,),
Text("aaaaaaaa",style: TextStyle(fontSize: 30,inherit: true),),
Divider(height: 1,color: Colors.grey,),
Text("aaaaaaaa",style: TextStyle(fontSize: 30,inherit: false),),
Divider(height: 1,color: Colors.grey,),
Text("bbbbbbbb",style: TextStyle(fontSize: 35,color: Colors.red,inherit: true),),
Divider(height: 1,color: Colors.grey,),
Text("cccccccc",style: TextStyle(fontSize: 40,inherit: false),),
Divider(height: 1,color: Colors.grey,),
Text("dddddddd",style: TextStyle(fontSize: 45,color: Colors.red,inherit: false),),
Divider(height: 1,color: Colors.grey,),
Text("eeeeeeee",style: TextStyle(fontSize: 45,color: Colors.red,inherit: true),),
color 字体颜色
fontSize 字体字号

1
2
3
4
5
6
7
8
9
10
Divider(height: 1,color: Colors.grey,),
Text("aaaaaaaa",style: TextStyle(fontSize: 30),),
Divider(height: 1,color: Colors.grey,),
Text("bbbbbbbb",style: TextStyle(fontSize: 35,color: Colors.red),),//选取已有枚举颜色
Divider(height: 1,color: Colors.grey,),
Text("cccccccc",style: TextStyle(fontSize: 40,color: Colors.red[200]),),//选取已有枚举颜色 [200]代表轻重  取值50 100 200...900  50最轻 900最重
Divider(height: 1,color: Colors.grey,),
Text("dddddddd",style: TextStyle(fontSize: 45,color: Color.fromARGB(100, 200, 0, 0)),),//生成颜色
Divider(height: 1,color: Colors.grey,),
Text("eeeeeeee",style: TextStyle(fontSize: 50,color: Color.fromRGBO(200, 0, 0, 0.5)),),//生成颜色
fontWeight 字重

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Divider(height: 1,color: Colors.grey,),
Text("FontWeight.normal",style: TextStyle(fontSize: 45,fontWeight: FontWeight.normal),),//默认正常显示
Divider(height: 1,color: Colors.grey,),
Text("FontWeight.bold",style: TextStyle(fontSize: 45,fontWeight: FontWeight.bold),),//粗体显示
Divider(height: 1,color: Colors.grey,),
Text("FontWeight.w100",style: TextStyle(fontSize: 45,fontWeight: FontWeight.w100),),//粗体显示  轻度
Divider(height: 1,color: Colors.grey,),
Text("FontWeight.w200",style: TextStyle(fontSize: 45,fontWeight: FontWeight.w200),),//粗体显示
Divider(height: 1,color: Colors.grey,),
Text("FontWeight.w300",style: TextStyle(fontSize: 45,fontWeight: FontWeight.w300),),//粗体显示
Divider(height: 1,color: Colors.grey,),
Text("FontWeight.w400",style: TextStyle(fontSize: 45,fontWeight: FontWeight.w400),),//粗体显示
Divider(height: 1,color: Colors.grey,),
Text("FontWeight.w500",style: TextStyle(fontSize: 45,fontWeight: FontWeight.w500),),//粗体显示
Divider(height: 1,color: Colors.grey,),
Text("FontWeight.w600",style: TextStyle(fontSize: 45,fontWeight: FontWeight.w600),),//粗体显示
Divider(height: 1,color: Colors.grey,),
Text("FontWeight.w700",style: TextStyle(fontSize: 45,fontWeight: FontWeight.w700),),//粗体显示
Divider(height: 1,color: Colors.grey,),
Text("FontWeight.w800",style: TextStyle(fontSize: 45,fontWeight: FontWeight.w800),),//粗体显示
Divider(height: 1,color: Colors.grey,),
Text("FontWeight.w900",style: TextStyle(fontSize: 45,fontWeight: FontWeight.w900),),//粗体显示  最重   等同于bold

FontWdight.lerp(weight1,weight2,double t) 线性从两个值之间取值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Divider(height: 1,color: Colors.grey,),
Text("FontWeight.lerp(FontWeight.w100, FontWeight.w900, 0.1)",style: TextStyle(fontSize: 25,fontWeight: FontWeight.lerp(FontWeight.w100, FontWeight.w900, 0.1)),),//线性显示
Divider(height: 1,color: Colors.grey,),
Text("FontWeight.lerp(FontWeight.w100, FontWeight.w900, 0.2)",style: TextStyle(fontSize: 25,fontWeight: FontWeight.lerp(FontWeight.w100, FontWeight.w900, 0.2)),),//线性显示
Divider(height: 1,color: Colors.grey,),
Text("FontWeight.lerp(FontWeight.w100, FontWeight.w900, 0.3)",style: TextStyle(fontSize: 25,fontWeight: FontWeight.lerp(FontWeight.w100, FontWeight.w900, 0.3)),),//线性显示
Divider(height: 1,color: Colors.grey,),
Text("FontWeight.lerp(FontWeight.w100, FontWeight.w900, 0.4)",style: TextStyle(fontSize: 25,fontWeight: FontWeight.lerp(FontWeight.w100, FontWeight.w900, 0.4)),),//线性显示
Divider(height: 1,color: Colors.grey,),
Text("FontWeight.lerp(FontWeight.w100, FontWeight.w900, 0.5)",style: TextStyle(fontSize: 25,fontWeight: FontWeight.lerp(FontWeight.w100, FontWeight.w900, 0.5)),),//线性显示
Divider(height: 1,color: Colors.grey,),
Text("FontWeight.lerp(FontWeight.w100, FontWeight.w900, 0.6)",style: TextStyle(fontSize: 25,fontWeight: FontWeight.lerp(FontWeight.w100, FontWeight.w900, 0.6)),),//线性显示
Divider(height: 1,color: Colors.grey,),
Text("FontWeight.lerp(FontWeight.w100, FontWeight.w900, 0.7)",style: TextStyle(fontSize: 25,fontWeight: FontWeight.lerp(FontWeight.w100, FontWeight.w900, 0.7)),),//线性显示
Divider(height: 1,color: Colors.grey,),
Text("FontWeight.lerp(FontWeight.w100, FontWeight.w900, 0.8)",style: TextStyle(fontSize: 25,fontWeight: FontWeight.lerp(FontWeight.w100, FontWeight.w900, 0.8)),),//线性显示
Divider(height: 1,color: Colors.grey,),
Text("FontWeight.lerp(FontWeight.w100, FontWeight.w900, 0.9)",style: TextStyle(fontSize: 25,fontWeight: FontWeight.lerp(FontWeight.w100, FontWeight.w900, 0.9)),),//线性显示
fontStyle 字体样式 斜体 非斜体

1
2
3
4
Divider(height: 1,color: Colors.grey,),
Text("aaaaaaaa",style: TextStyle(fontSize: 45,fontStyle: FontStyle.italic),),//斜体
Divider(height: 1,color: Colors.grey,),
Text("bbbbbbbb",style: TextStyle(fontSize: 45,fontStyle: FontStyle.normal),),//正常
letterSpacing 字母或汉字之间的距离

1
2
3
4
5
6
7
8
9
10
Divider(height: 1,color: Colors.grey,),
Text("bbbbbbbb",style: TextStyle(fontSize: 25,letterSpacing: 5),),
Divider(height: 1,color: Colors.grey,),
Text("bbbbbbbb",style: TextStyle(fontSize: 25,letterSpacing: 10),),
Divider(height: 1,color: Colors.grey,),
Text("bbbbbbbb",style: TextStyle(fontSize: 25,letterSpacing: 15),),
Divider(height: 1,color: Colors.grey,),
Text("安卓Flutter",style: TextStyle(fontSize: 25,letterSpacing: 20),),
Divider(height: 1,color: Colors.grey,),
Text("安卓Flutter",style: TextStyle(fontSize: 25,letterSpacing: 25),),
wordSpacing 单词之间的距离，用空格拆分单词，英文中一个个单词用空格分开，中文没有空格，应该不常用

1
2
3
4
5
6
7
8
9
10
Divider(height: 1,color: Colors.grey,),
Text("aabb cc dd",style: TextStyle(fontSize: 25,wordSpacing: 5),),
Divider(height: 1,color: Colors.grey,),
Text("aa bb cc dd",style: TextStyle(fontSize: 25,wordSpacing: 10),),
Divider(height: 1,color: Colors.grey,),
Text("我 你 他们 我们",style: TextStyle(fontSize: 25,wordSpacing: 15),),
Divider(height: 1,color: Colors.grey,),
Text("aa bb 他们 我们",style: TextStyle(fontSize: 25,wordSpacing: 20),),
Divider(height: 1,color: Colors.grey,),
Text("我 你 cc dd",style: TextStyle(fontSize: 25,wordSpacing: 25),),
height 行高系数 实际行高=height * fontSize

1
2
3
4
5
6
7
8
9
10
Divider(height: 1,color: Colors.grey,),
Text("aaaaaaa",style: TextStyle(fontSize: 25,height: 1),),
Divider(height: 1,color: Colors.grey,),
Text("bbbbbbb",style: TextStyle(fontSize: 25,height: 1.5),),
Divider(height: 1,color: Colors.grey,),
Text("ccccccc",style: TextStyle(fontSize: 25,height: 2),),
Divider(height: 1,color: Colors.grey,),
Text("ddddddd",style: TextStyle(fontSize: 25,height: 2.5),),
Divider(height: 1,color: Colors.grey,),
Text("eeeeeee",style: TextStyle(fontSize: 25,height: 3),),
foreground 设置画字体时用的画笔
  • color
    与foreground只能存在其一，其实color是Paint的简写形式，设置了color其实就是设置Paint()..color
    = color
background 设置画背景时用的画笔

  • backgroundColor
    与background只能存在其一，其实backgroundColor是Paint的简写形式，设置了backgroundColor其实就是设置Paint()..color= bacrgroundColor

1
2
3
4
5
6
7
8
9
10
11
var paint = Paint()
..color = Colors.red
..strokeCap = StrokeCap.square
..strokeWidth = 12;

Divider(height: 1,color: Colors.grey,),
Text("aaaaaaaaa",style: TextStyle(fontSize: 35,foreground: paint),),
Divider(height: 1,color: Colors.grey,),
Text("bbbbbbbbb",style: TextStyle(fontSize: 35,background: paint),),
Divider(height: 1,color: Colors.grey,),
Text("ccccccccc",style: TextStyle(fontSize: 35,background: paint,height: 1.5),),
shadows 文字阴影效果

  • offset xy轴的偏移量

  • blurRadius 模糊程度

1
2
3
4
5
6
7
8
9
10
11
12
Divider(height: 1,color: Colors.grey,),
Text("aaaaaaaaa",style: TextStyle(fontSize: 35,color: Colors.red,shadows: [Shadow(color: Colors.black,offset: Offset(1, 2))]),),
Divider(height: 1,color: Colors.grey,),
Text("aaaaaaaaa",style: TextStyle(fontSize: 35,color: Colors.red,shadows: [Shadow(color: Colors.black,offset: Offset(2, 3))]),),
Divider(height: 1,color: Colors.grey,),
Text("aaaaaaaaa",style: TextStyle(fontSize: 35,color: Colors.red,shadows: [Shadow(color: Colors.black,offset: Offset(4, 6))]),),
Divider(height: 1,color: Colors.grey,),
Text("aaaaaaaaa",style: TextStyle(fontSize: 35,color: Colors.red,shadows: [Shadow(color: Colors.black,offset: Offset(1, 2),blurRadius: 5 )]),),
Divider(height: 1,color: Colors.grey,),
Text("aaaaaaaaa",style: TextStyle(fontSize: 35,color: Colors.red,shadows: [Shadow(color: Colors.black,offset: Offset(2, 3),blurRadius: 10 )]),),
Divider(height: 1,color: Colors.grey,),
Text("aaaaaaaaa",style: TextStyle(fontSize: 35,color: Colors.red,shadows: [Shadow(color: Colors.black,offset: Offset(5, 6),blurRadius: 15 )]),),
decoration 给文字增加删除线、上划线、下划线等，可同时增加多个
  • TextDecoration.overline 上划线
  • TextDecoration.lineThrough 删除线
  • TextDecoration.underline 下划线
decorationColor 给文字增加的删除线、上划线、下划线的颜色
decorationStyle 给文字增加的删除线、上划线、下划线的样式，虚线、实线、点、正弦线等

  • TextDecorationStyle.dashed 短横线

  • TextDecorationStyle.dotted 点线

  • TextDecorationStyle.double 双线

  • TextDecorationStyle.solid 实线

  • TextDecorationStyle.wavy 波浪线

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Divider(height: 1,color: Colors.grey,),
Text("aaaaaaaaa",style: TextStyle(fontSize: 35,),),
Divider(height: 1,color: Colors.grey,),
Text("bbbbbbbbb",style: TextStyle(fontSize: 35,decoration: TextDecoration.overline),),
Divider(height: 1,color: Colors.grey,),
Text("ccccccccc",style: TextStyle(fontSize: 35,decoration: TextDecoration.lineThrough),),
Divider(height: 1,color: Colors.grey,),
Text("ddddddddd",style: TextStyle(fontSize: 35,decoration: TextDecoration.underline),),
Divider(height: 1,color: Colors.grey,),
Text("eeeeeeeee",style: TextStyle(fontSize: 35,decoration: TextDecoration.combine([TextDecoration.overline,TextDecoration.lineThrough])),),
Divider(height: 1,color: Colors.grey,),
Text("fffffffff",style: TextStyle(fontSize: 35,decoration: TextDecoration.overline,decorationColor: Colors.red),),
Divider(height: 1,color: Colors.grey,),
Text("ggggggggg",style: TextStyle(fontSize: 35,decoration: TextDecoration.lineThrough,decorationStyle: TextDecorationStyle.dashed),),
Divider(height: 1,color: Colors.grey,),
Text("hhhhhhhhh",style: TextStyle(fontSize: 35,decoration: TextDecoration.lineThrough,decorationStyle: TextDecorationStyle.dotted,decorationColor: Colors.orange),),
Divider(height: 1,color: Colors.grey,),
Text("iiiiiiiii",style: TextStyle(fontSize: 35,decoration: TextDecoration.lineThrough,decorationStyle: TextDecorationStyle.double,decorationColor: Colors.red),),
Divider(height: 1,color: Colors.grey,),
Text("jjjjjjjjj",style: TextStyle(fontSize: 35,decoration: TextDecoration.lineThrough,decorationStyle: TextDecorationStyle.solid),),
Divider(height: 1,color: Colors.grey,),
Text("kkkkkkkkk",style: TextStyle(fontSize: 35,decoration: TextDecoration.lineThrough,decorationStyle: TextDecorationStyle.wavy),),

Text.rich，文字分部分编辑

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Text.rich(
this.textSpan, //TextSpan  文字分部分编辑，其中分部分后的一段文字
//下面属性为Text的属性
{
    Key key,
    this.style,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
  }
)

TextSpan

1
2
3
4
5
6
const TextSpan({
  this.style,//文本样式，TextStyle
  this.text,//文本内容
  this.children,//List<TextSpan>  可以添加多段文字
  this.recognizer,//屏幕点击识别 
});

功能：

  • 对每段文字进行样式修改

  • 对每段文字单独添加点击监听

    代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Text.rich(TextSpan(
                text: "xxxxxxxxx",//显示一段文字
                children: [//增加另外几段文字
                  TextSpan(
                      text: "aaaaaaaaaaaaaaaaa",
                      style: TextStyle(fontSize: 15, color: Colors.red),//改变当前文字的颜色和大小
                      recognizer: TapGestureRecognizer()//添加点击监听，只有当前段文字有效
                        ..onTap = () {
                          print("aaa");
                        }),
                  TextSpan(//没有监听事件
                      text: "bbbbbbbbbbbbbbbbb",
                      style: TextStyle(fontSize: 20, color: Colors.green)),//改变当前文字的颜色和大小
                  TextSpan(//没有监听事件
                      text: "ccccccccccccccccc",
                      style: TextStyle(fontSize: 25, color: Colors.blue)),//改变当前文字的颜色和大小
                ],
                style: TextStyle(fontSize: 30, color: Colors.orange),//对xxxxxxx有效
                recognizer: TapGestureRecognizer()//对xxxxxxx添加点击监听
                  ..onTap = () {
                    print("onTap");
                  }
                  ..onTapCancel = () {
                    print("onTapCancel");
                  }
                  ..onTapUp = (TapUpDetails detail) {
                    print("onTapUp");
                  }
                  ..onTapDown = (TapDownDetails detail) {
                    print("onTapDown");
                  }))

对aaaa…aaa添加了监听，因此点击后输出 “aaa”
对xxxx…xxxx添加了监听，因此点击后会输出onTap onTapDown onTapUp等
没有对bbb…bbb ccc..ccc添加监听，因此点击二者没有输出。

-------------本文结束感谢您的阅读-------------
如果你喜欢这篇文章，可以请我喝一杯 Coffee ~