Flutter（二）Text

Text属性

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：

image.png

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时：

image.png

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时，只显示一行，剩余不显示

  
  image.png

            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时

  
  image.png

            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后

  
  image.png

            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

  
  image.png

            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

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后失效

  
  image.png

            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 字体字号

image.png

            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 字重

image.png

            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) 线性从两个值之间取值

image.png

            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 字体样式 斜体 非斜体

image.png

            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 字母或汉字之间的距离

image.png

            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 单词之间的距离，用空格拆分单词，英文中一个个单词用空格分开，中文没有空格，应该不常用

image.png

            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

image.png

            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

  
  image.png

            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 模糊程度

  
  image.png

            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 波浪线

  
  image.png

            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，文字分部分编辑

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

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

功能：

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

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

  
  image.png
  

  代码如下：

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添加监听，因此点击二者没有输出。