Flutter基础组件<文本Text>

Flutter入门笔记系列文章部分内容来源于《Flutter 实战》，如有侵权请联系删除！

Text

Text 用于显示简单样式文本，它包含一些控制文本显示样式的一些属性。
为了更加直观地介绍Text的属性，直接通过一个例子来说明部分属性的作用，更多属性请查阅源码或官方文档。

Text("Hello"), //普通文本
Text(
  "Large Hello.", //大号文本
  style: TextStyle(
    fontSize: 20
  ),
),
Text(
  "WonderfulHello;" * 10, //内容重复十遍
  textScaleFactor: 1, //代表文本相对于当前字体大小的缩放因子
  textAlign: TextAlign.start, //对齐方式
  maxLines: 2, //最大行数
  overflow: TextOverflow.ellipsis, //将多余文本截断后以省略符“...”表示
  style: TextStyle( //字体样式
      color: Colors.blue,  //字体颜色
      fontSize: 24,  //字体大小
      decoration: TextDecoration.underline,  //文字划线，上划线、下划线或删除线
      decorationStyle: TextDecorationStyle.wavy, //划线样式
      backgroundColor: Colors.black), //组件背景色
)

运行效果如图

Text

代码里都有属性解释，不再赘述。

TextSpan

如果我们需要对一个Text内容的不同部分按照不同的样式显示，这时就可以使用TextSpan，Android中使用SpannableString可以达到类似的效果。

Text.rich(
  TextSpan(text: "左边部分", children: [
    TextSpan(
      text: "中间部分",
      style: TextStyle(
          color: Colors.blue,
          backgroundColor: Colors.black,
          fontSize: 20),
    ),
    TextSpan(
      text: "右边部分",
      style: TextStyle(
        color: Colors.green,
        fontSize: 18,
        decoration: TextDecoration.underline,
        decorationColor: Colors.black,
      ),
      //recognizer: rec //点击事件处理器
    )
  ]),
)

我们看到，可以通过Text.rich 方法将TextSpan 添加到Text中来完成字符串的拼接，并且可以自定义不同部分文字的样式，当然也可以通过recognizer定义点击事件产生的行为。运行效果如下：

TextSpan

DefaultTextStyle

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

DefaultTextStyle(
    style: TextStyle(color: Colors.deepOrange, fontSize: 20),
    child: Column(
      verticalDirection: VerticalDirection.down,
      children: [
        Text("默认继承"),
        RaisedButton(child: Text("按钮"), onPressed: null),
        Text(
          "继承+自定义",
          style: TextStyle(backgroundColor: Colors.grey),
        ),
        //DefaultTextStyle不生效
        Text("不继承+自定义",
            style: TextStyle(
                //不继承DefaultTextStyle
                inherit: false,
                backgroundColor: Colors.grey))
      ],
    ))

运行效果如下：

DefaultTextStyle

可以看到，DefaultTextStyle 设置给了子树Column节点处，这样一来Column的所有子孙Text默认都会继承该样式，除非Text通过inherit: false 显示声明不继承默认样式。