Text Widget的使用

Text Widgets是Flutter中一个十分常用的一个Widget。下面的代码示例将简单介绍其属性的使用。

示例代码

    child: Column(
              crossAxisAlignment : CrossAxisAlignment.center,
              children: [
              Text(
                'inherit: 如果为false，则没有显式值的属性将恢复，它主要是默认设置font为10和color为白色，如果为true，默认设置font为10和color为黑色，如果设置了font和color，这个属性就没用了',
                style: TextStyle(
                  fontSize: 18.0,
                  color: Colors.redAccent,
                  inherit: true,
                ),
              ),
              Text(
                'decoration 下划线的属性设置 overline为上划线 underline为下划线',
                style: TextStyle(
                  fontSize: 28.0,
                  decoration: TextDecoration.underline,
                  decorationStyle: TextDecorationStyle.solid,
                  decorationColor: Color.fromARGB(255, 23, 123, 150),
                ),
                ),
                Text(
                'fontWeight: 字重,字体厚度，也就是字体粗细 bold:w700 normal:w400',
                style: TextStyle(
                    fontSize: 20.0,
                    color: Colors.red[900],
                    fontWeight: FontWeight.bold),
              ),
              Text(
                'TextAlign: 文字对齐方式，maxLines：最多显示多少行，overflow：省略文字显示方式',
                textAlign: TextAlign.left,
                // maxLines: 1,
                overflow: TextOverflow.ellipsis,
                style: TextStyle(
                  fontSize: 40.0,
                ),
              ),
              Text('decoration: TextDecoration.lineThrough 删除线',
                style: TextStyle(
                  decoration: TextDecoration.lineThrough,
                  decorationStyle: TextDecorationStyle.dashed)
                 ),
              Text(
                'letterSpacing: 字符间距,wordSpacing: 字或单词间距',
                style: new TextStyle(
                  letterSpacing: 10.0,
                  wordSpacing: 15.0
                ),
              ),
复制代码

Dart中的TextStyle的属性：

const TextStyle({
    this.inherit = true, //默认是true
    this.color,//字体颜色
    this.backgroundColor,//背景色
    this.fontSize,//字号
    this.fontWeight,//字体粗细
    this.fontStyle,//FontStyle.normal  FontStyle.italic斜体
    this.letterSpacing,//字符间距  就是单个字母或者汉字之间的间隔，可以是负数
    this.wordSpacing,//字间距 句字之间的间距
    this.textBaseline,//基线，两个值，字面意思是一个用来排字母的，一人用来排表意字的（类似中文）
    this.height,//当用来Text控件上时，行高（会乘以fontSize,所以不以设置过大）
    this.locale,
    this.foreground,
    this.background,
    this.shadows,
    this.fontFeatures,
    this.decoration,//添加上划线，下划线，删除线 
    this.decorationColor,//划线的颜色
    this.decorationStyle,//这个style可能控制画实线，虚线，两条线，点, 波浪线等
    this.decorationThickness,
    this.debugLabel,
    String fontFamily,//字体
    List<String> fontFamilyFallback,
    String package,
  }
复制代码