Flutter（二）Text

2019-03-19 本文已影响83人天色将变

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

Flutter（二）Text

Text属性

textAlign 文本对齐方式

softWrap 文字是否自动换行

overflow 文字超过行数后，对可显示范围内，末尾文字的处理效果

maxLines 文字显示的最大行数

textScaleFactor 文字大小倍率系数

TextStyle

inherit

color 字体颜色

fontSize 字体字号

fontWeight 字重

fontStyle 字体样式斜体非斜体

letterSpacing 字母或汉字之间的距离

wordSpacing 单词之间的距离，用空格拆分单词，英文中一个个单词用空格分开，中文没有空格，应该不常用

height 行高系数实际行高=height * fontSize

foreground 设置画字体时用的画笔

background 设置画背景时用的画笔

shadows 文字阴影效果

decoration 给文字增加删除线、上划线、下划线等，可同时增加多个

decorationColor 给文字增加的删除线、上划线、下划线的颜色

decorationStyle 给文字增加的删除线、上划线、下划线的样式，虚线、实线、点、正弦线等

Text.rich，文字分部分编辑

TextSpan

猜你喜欢

热点阅读

Flutter（二）Text

Text属性

textAlign 文本对齐方式

softWrap 文字是否自动换行

overflow 文字超过行数后，对可显示范围内，末尾文字的处理效果

maxLines 文字显示的最大行数

textScaleFactor 文字大小倍率系数

TextStyle

inherit

color 字体颜色

fontSize 字体字号

fontWeight 字重

fontStyle 字体样式 斜体 非斜体

letterSpacing 字母或汉字之间的距离

wordSpacing 单词之间的距离，用空格拆分单词，英文中一个个单词用空格分开，中文没有空格，应该不常用

height 行高系数 实际行高=height * fontSize

foreground 设置画字体时用的画笔

background 设置画背景时用的画笔

shadows 文字阴影效果

decoration 给文字增加删除线、上划线、下划线等，可同时增加多个

decorationColor 给文字增加的删除线、上划线、下划线的颜色

decorationStyle 给文字增加的删除线、上划线、下划线的样式，虚线、实线、点、正弦线等

Text.rich，文字分部分编辑

TextSpan

猜你喜欢

热点阅读

fontStyle 字体样式斜体非斜体

height 行高系数实际行高=height * fontSize