Flutter之 文本及样式

一、Text

children: <Widget>[
          Text('Hello Flutter!',
          textAlign: TextAlign.left,
          ),
          Text('Hello Flutter!'*10,
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
          ),
          Text('Hello Flutter!',
          textScaleFactor: 1.5,
          ),
        ],

运行结果如图：

1. textAlign：

文本的对齐方式；可以选择左对齐、右对齐还是居中。注意，对齐的参考系是Text widget本身。本例中虽然是指定了居中对齐，但因为Text文本内容宽度不足一行，Text的宽度和文本内容长度相等，那么这时指定对齐方式是没有意义的，只有Text宽度大于文本内容长度时指定此属性才有意义。下面我们指定一个较长的字符串：

 Text('Hello Flutter!'*8,
          textAlign: TextAlign.center,
          ),

运行结果如图：

字符串内容超过一行，Text宽度等于屏幕宽度，第二行文本便会居中显示。

2. maxLines、overflow：

指定文本显示的最大行数，默认情况下，文本是自动折行的，如果指定此参数，则文本最多不会超过指定的行。如果有多余的文本，可以通过overflow来指定截断方式，默认是直接截断，本例中指定的截断方式TextOverflow.ellipsis，它会将多余文本截断后以省略符“…”表示

3. textScaleFactor：

代表文本相对于当前字体大小的缩放因子，相对于去设置文本的样式style属性的fontSize，它是调整字体大小的一个快捷方式。该属性的默认值可以通过MediaQueryData.textScaleFactor获得，如果没有MediaQuery，那么会默认值将为1.0。

二、TextStyle

TextStyle用于指定文本显示的样式如颜色、字体、粗细、背景等：

Text(
            'Hello Flutter',
            style: TextStyle(
                color: Colors.red,
                fontSize: 20,
                height: 1.2,
                fontFamily: 'Courier',
                background: Paint()..color = Colors.yellow,
                decoration: TextDecoration.underline,
                decorationStyle: TextDecorationStyle.dashed),
          ),

运行结果如图：

三、TextSpan

当一行Text显示不同样式时使用：

Text.rich(
            TextSpan(children: [
              TextSpan(
                text: 'Hello: ',
              ),
              TextSpan(
                text: 'Flutter',
                style: TextStyle(color: Colors.red),
              ),
            ]),
          ),

运行结果如图所示：

四、DefaultTextStyle

在Widget树中，文本的样式默认是可以被继承的（子类文本类组件未指定具体样式时可以使用Widget树中父级设置的默认样式），因此，如果在Widget树的某一个节点处设置一个默认的文本样式，那么该节点的子树中所有文本都会默认使用这个样式，而DefaultTextStyle正是用于设置默认文本样式的。

 DefaultTextStyle(
            style: TextStyle(
              color: Colors.red,
              fontSize: 20.0,
            ),
            textAlign: TextAlign.start,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text("Hello Flutter"),
                Text(
                  "Hello Flutter",
                  style: TextStyle(
                      inherit: false, //2.不继承默认样式
                      color: Colors.grey),
                ),
              ],
            ),
          ),

运行结果如图：