Flutter之Text组件

const Text(
this.data,//this.data 要显示的文本内容
    {Key key,
    this.style,
    this.textAlign,//文本对齐方式
    this.textDirection,//文本方向
    this.locale,
    this.softWrap,//是否自动换行 false文字不考虑容器大小，单行显示，超出屏幕部分将默认截断处理
    this.overflow,//文字超出屏幕之后的处理方式，TextOverflow.clip剪裁   TextOverflow.fade 渐隐  TextOverflow.ellipsis省略号
    this.textScaleFactor,//文本字体的缩放倍数，如：1.5则在默认字体上变成1.5倍大小字体，0.5则是0.5倍
    this.maxLines,//文本最多显示多少行
    this.semanticsLabel,
    }) : assert(data != null),
    textSpan = null,
    super(key: key);

const TextStyle({
    this.inherit = true, //默认为true，设置为false时候表示不显示
    this.color,//文字颜色
    this.fontSize,//文字大小 ，默认是14.0的
    this.fontWeight,//字体粗细  粗体和正常
    this.fontStyle,//文字样式，normal正常 italic 斜体
    this.letterSpacing,//字母间隙(负值可以让字母更紧凑)
    this.wordSpacing,//单词间隙(负值可以让单词更紧凑)
    this.textBaseline, //alphabetic：用于对齐字母字符底部的水平线,  ideographic：用于对齐表意字符的水平线
    this.height,  //用在Text控件上的时候，会乘以fontSize做为行高
    this.locale,//国际化
    this.foreground,//用paint来渲染text，也可以用他来改变字体颜色等
    this.background,
    this.decoration, //四种下划线、lineThrough删除线、overline上划线，默认是无
    this.decorationColor,//线的颜色
    this.decorationStyle,//文字装饰的风格  dashed虚线大间隔,dotted虚线小间隔，double在underline和lineThrough时两条线，在overline时三条线，solid在underline和solidlineThrough时一条线,在overline两条线
    this.debugLabel,
    String fontFamily,
    String package,
    }) : fontFamily = package == null ? fontFamily : 'packages/$package/$fontFamily',
    assert(inherit != null),
    assert(identical(color, null) || identical(foreground, null), _kColorForegroundWarning);

const Text.rich(
    this.textSpan,//可以给文本中的每个textSpan设置其样式
    {
    Key key,
    this.style,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
    }): assert(textSpan != null),
    data = null,
    super(key: key);

body: ListView(
          children: <Widget>[
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text("文本方向 TextDirection.ltr",
                  textDirection: TextDirection.ltr
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text("文本方向 TextDirection.rtl",
                  textDirection: TextDirection.rtl
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text("文本对齐方式 TextAlign.center",
                textAlign: TextAlign.center,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text("文本对齐方式 TextAlign.left",
                textAlign: TextAlign.left,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text("文本对齐方式 TextAlign.right",
                textAlign: TextAlign.right,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text("文本对齐方式 TextAlign.justify 两端对齐",
                textAlign: TextAlign.justify,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text("文本对齐方式 TextAlign.start",
                textAlign: TextAlign.start,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text("文本对齐方式 TextAlign.end",
                textAlign: TextAlign.end,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "softWrap: true    是否自动换行是否自动换行是否自动换行是否自动换行是否自动换行是否自动换行是否自动换行是否自动换行是否自动换行",
                softWrap: true,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "softWrap: false    是否自动换行是否自动换行是否自动换行是否自动换行是否自动换行是否自动换行是否自动换行是否自动换行是否自动换行",
                softWrap: false,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "TextOverflow.clip    文字超出屏幕之后的处理方式文字超出屏幕之后的处理方式文字超出屏幕之后的处理方式",
                overflow: TextOverflow.clip,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "TextOverflow.ellipsis    文字超出屏幕之后的处理方式文字超出屏幕之后的处理方式文字超出屏幕之后的处理方式",
                overflow: TextOverflow.ellipsis,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "TextOverflow.fade    文字超出屏幕之后的处理方式文字超出屏幕之后的处理方式文字超出屏幕之后的处理方式",
                overflow: TextOverflow.fade,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text("textScaleFactor  字体缩放倍数",
                textScaleFactor: 2.0,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "maxLines  文本最多显示多少行,可以和overflow: TextOverflow.ellipsis一起使用，在最后一行末尾显示省略号  文本最多显示多少行文本最多显示多少行文本最多显示多少行",
                maxLines: 2,
                overflow: TextOverflow.ellipsis,
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text("color颜色，fontSize大小",
                style: TextStyle(
                    color: Color(0xffff0000),
                    fontSize: 18.0
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text("fontWeight 字体粗细  w100 ~ w900 和粗体与正常，正常是w400,粗体是w700",
                style: TextStyle(
                    fontWeight: FontWeight.bold
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text("fontStyle 文字样式，normal正常, italic 斜体",
                style: TextStyle(
                    fontStyle: FontStyle.italic
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "对比wordSpacing单词间隙, letterSpacing字母间隙, Hello World Hello World",
                style: TextStyle(
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "对比wordSpacing单词间隙, letterSpacing字母间隙, Hello World Hello World",
                style: TextStyle(
                  wordSpacing: 10.0,
                  letterSpacing: 1.0,
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "对比wordSpacing单词间隙, letterSpacing字母间隙, Hello World Hello World",
                style: TextStyle(
                  wordSpacing: 1.0,
                  letterSpacing: 5.0,
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "textBaseline Hello World Hello World Hello World Hello World \n哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦",
                style: TextStyle(
                    textBaseline: TextBaseline.alphabetic
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "textBaseline Hello World Hello World Hello World Hello World \n哦哦哦哦哦哦哦哦哦哦哦哦哦哦哦",
                style: TextStyle(
                    textBaseline: TextBaseline.ideographic
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "height会乘以fontSize做为行高",
                style: TextStyle(
                  height: 2.0,
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "height会乘以fontSize做为行高",
                style: TextStyle(
                  height: 1.0,
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text(
                "decoration四种下划线underline、lineThrough删除线、overline上划线，默认是无；decorationColor线的颜色；文字装饰的风格  dashed虚线大间隔,dotted虚线小间隔，double在underline和lineThrough时两条线，在overline时三条线，solid在underline和solidlineThrough时一条线,在overline两条线",
                style: TextStyle(
                  fontSize: 20.0,
                  decoration: TextDecoration.lineThrough,
                  decorationColor: Color(0xffff0000),
                  decorationStyle: TextDecorationStyle.solid,
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(bottom: 10.0),
              color: Color.fromARGB(255, 241, 241, 241),
              child: Text.rich(
                TextSpan(
                    text: "Text.rich方式",
                    children: <TextSpan>[
                      TextSpan(
                          text: "改变颜色",
                          style: TextStyle(
                            color: Color(0xffff0000),
                          )
                      ),
                      TextSpan(
                          text: "改变大小",
                          style: TextStyle(
                              fontSize: 12.0
                          )
                      ),
                    ]
                ),
              ),
            ),
          ],
        ),

练习demo，链接https://gitee.com/xgljh/Flutter