Flutter学习笔记二——Text Widget 文本组件

TextAlign属性

文本的对齐方式，它的属性值有如下几个：

• center: 文本以居中形式对齐,这个也算比较常用的了。
• left:左对齐，经常使用，让文本居左进行对齐，效果和start一样。
• right :右对齐，使用频率也不算高。
• start:以开始位置进行对齐，类似于左对齐。
• end: 以为本结尾处进行对齐，不常用。有点类似右对齐.

总结起来，也就算三个对齐方式，left(左对齐)、center（居中对齐）、right（右对齐）。

 child: Text("我是文本组件Text。我是文本组件Text。我是文本组件Text。我是文本组件Text。",
            textAlign: TextAlign.left,
            ),

textalign.png

maxLines属性

设置最多显示的行数

 child: Text(
              "我是文本组件Text。我是文本组件Text。我是文本组件Text。我是文本组件Text。",
              textAlign: TextAlign.left,
              maxLines: 1,
            ),

maxlines.png

overflow属性

overflow属性是用来设置文本溢出时的显示方式

• clip：直接切断，剩下的文字就没有了，感觉不太友好，体验性不好。
• ellipsis:在后边显示省略号，体验性较好，这个在工作中经常使用。
• fade: 溢出的部分会进行一个渐变消失的效果，当然是上线的渐变，不是左右的哦。

 child: Text(
              "我是文本组件Text。我是文本组件Text。我是文本组件Text。我是文本组件Text。",
              textAlign: TextAlign.left,
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
            ),

overflow.png

style属性

fontSize: 字体大小

color: 字体颜色

可以使用Color.fromARGB(255, 255, 0, 0)ARGB颜色值,
也可以使用Color(0xffff0000)十六进制颜色码
或者使用Colors类中封装的颜色：Colors.purple

decoration: 装饰

lineThrough删除线，underline下划线，overline上划线,none默认

decorationStyle: 装饰样式

solid实线，dashed虚线，dotted虚线（由点组成）,double两行，wavy波浪线

decorationColor: 装饰颜色

同样它可以使用ARGB颜色值或者十六进制颜色码

child: Text(
              "我是文本组件Text。我是文本组件Text。我是文本组件Text。我是文本组件Text。",
              textAlign: TextAlign.left,
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(
                  fontSize: 20,
                  color: Color.fromARGB(255, 255, 0, 0),
//                  color: Color(0xffff0000)
                  //lineThrough删除线，underline下划线，overline上划线,none默认
                  decoration: TextDecoration.underline,
                  //solid实线，dashed虚线，dotted虚线（由点组成）,double两行，wavy波浪线
                  decorationStyle: TextDecorationStyle.solid,
//                  decorationColor: Color(0xff0000ff)
                  decorationColor: Color.fromARGB(255, 0, 255, 0)),
            ),

style.png