Flutter学习笔记（二）：Text文本及样式

Text用于显示简单样式文本，它包含一些控制文本显示样式的一些属性，文本现实样式可以使用style进行设置，但是操作text样式使用TextStyle设置。

查看源码可以发现text可以设置的属性：

 const Text(this.data, {
    Key key,
    this.style,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
  }) : assert(data != null),
       textSpan = null,
       super(key: key);

从上可以看出有显示的内容，内容的显示位置，最大行数，超出范围显示格式等；但是针对字体的大小，颜色，等设置需要在TextStyle源码可查看：

const TextStyle({
    this.inherit = true,
    this.color,
    this.fontSize,
    this.fontWeight,
    this.fontStyle,
    this.letterSpacing,
    this.wordSpacing,
    this.textBaseline,
    this.height,
    this.locale,
    this.foreground,
    this.background,
    this.decoration,
    this.decorationColor,
    this.decorationStyle,
    this.debugLabel,
    String fontFamily,
    String package,
  }) : fontFamily = package == null ? fontFamily : 'packages/$package/$fontFamily',
       assert(inherit != null),
       // TODO(dnfield): once https://github.com/dart-lang/sdk/issues/33408 is finished, this can be replaced with
       // assert(color == null || foreground == null, _kColorForegroundWarning);
       assert(identical(color, null) || identical(foreground, null), _kColorForegroundWarning);

在平时开发中也遇到显示的文本信息每一部分需要呈现出不同的样式，这样我们可以使用TextSpan来实现这种需求

  const TextSpan({
    this.style,
    this.text,
    this.children,
    this.recognizer,
  });

children是一个集合，里边可以放置多个TextSpan，介绍完文本及样式，则撸一段代码检验一下：

class TextPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _TextPageState();
  }
}

class _TextPageState extends State<TextPage> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("文本，文字样式"),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Text(
              "Hello Flutter",
              textAlign: TextAlign.center,
              style: new TextStyle(
                fontSize: 16.0,
                color: Colors.blue,
              ),
            ),
            Text(
              "Hello Flutter" * 10,
              textAlign: TextAlign.right,
              style: new TextStyle(fontSize: 16.0, color: Colors.blue),
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
            ),
            Text(
              "Hello Flutter" * 4,
              textAlign: TextAlign.center,
              style: new TextStyle(fontSize: 16.0, color: Colors.blue),
              textScaleFactor: 1.5,
            ),
            Text(
              "Hello Flutter",
              textAlign: TextAlign.center,
              style: new TextStyle(
                  fontSize: 16.0,
                  color: Colors.blue,
                  decoration: TextDecoration.underline),
            ),
            Text.rich(TextSpan(children: [
              TextSpan(text: "Hello"),
              TextSpan(
                text: "Flutter",
                style: TextStyle(
                  fontSize: 20.0,
                  color: Colors.red,
                ),
              )
            ])),
          ],
        ),
      ),
    );
  }
}

编译项目运行结果：