FlutterFlutter

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 文本对齐方式

没有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 文字是否自动换行
            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的值:

下面几种情况:

            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,),
            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 文字大小倍率系数
            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
            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 设置画字体时用的画笔
background 设置画背景时用的画笔
            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 文字阴影效果
            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 给文字增加删除线、上划线、下划线等,可同时增加多个
decorationColor 给文字增加的删除线、上划线、下划线的颜色
decorationStyle 给文字增加的删除线、上划线、下划线的样式,虚线、实线、点、正弦线等
            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,//屏幕点击识别 
  });

功能:

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

上一篇下一篇

猜你喜欢

热点阅读