Flutter Widgets: Text

介绍

Text，很常用的一个Widget，作为一个Android 开发者，我把它当成一个TextView来对待。

类结构

构造方法

两个构造方法

可以看到，两个构造方法的不同在于构造方法中的第一个参数，普通的是一个String对象，data; 复杂的是一个TextSpan对象，textSpan。从事Android开发的朋友一定用过SpannableString，感觉上应该会和TextSpan差不多吧。

属性值

style

TextStyle，用来定义Text中文字的各种属性。后面的例子会陆续使用到一些，常用的属性值也是相当好理解的。具体如下：

textAlign

文本对齐方式

body: new Container(
    width: 400.0,
    height: 200.0,
    color: Colors.greenAccent,
    child: new Text("hello world sdfdfgdfgdfgdfgdfgdfgdfgdfgdfgdfgdfg",
        textAlign: TextAlign.right,
        style: new TextStyle(
          color: Colors.purple,
          fontSize: 40.0,
        )
    )
)

textAlign	Result
TextAlign.left
TextAlign.right
TextAlign.center
TextAlign.justify(两端对齐)
TextAlign.start
TextAlign.end

textDirection

文本方向

body: new Container(
    width: 400.0,
    height: 200.0,
    color: Colors.greenAccent,
    child: new Text("hello world sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsd",
        textDirection: TextDirection.rtl,
        style: new TextStyle(
          color: Colors.purple,
          fontSize: 40.0,
        )
    )
)

TextDirection	Result
TextDirection.ltr
TextDirection.rtl

softWrap

是否自动换行，若为false，文字将不考虑容器大小，单行显示，超出屏幕部分将默认截断处理

body: new Container(
    width: 400.0,
    height: 200.0,
    color: Colors.greenAccent,
    child: new Text("hello world sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsd",
        softWrap: false,
        style: new TextStyle(
          color: Colors.purple,
          fontSize: 40.0,
        )
    )
)

softWrap	Result
true
false

显然，当softWrap为false而文字长度超出屏幕宽度时，会出现截断的现象。

overflow

当文字超出屏幕的时候，如何处理

body: new Container(
    width: 300.0,
    height: 200.0,
    color: Colors.greenAccent,
    child: new Text("hello world sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsd",
        overflow: TextOverflow.ellipsis,
        softWrap: false,
        style: new TextStyle(
          color: Colors.purple,
          fontSize: 40.0,
        )
    )
)

overflow	Result
TextOverflow.clip(裁剪)
TextOverflow.fade(渐隐)
TextOverflow.ellipsis(省略号)

textScaleFactor

字体显示倍率，上面的例子使用的字体大小是40.0，将字体设置成20.0，然后倍率为2，依然可以实现相同的效果

body: new Container(
    width: 400.0,
    height: 200.0,
    color: Colors.greenAccent,
    child: new Text("hello world sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsd",
        overflow: TextOverflow.fade,
        textScaleFactor: 2.0,
        softWrap: false,
        style: new TextStyle(
          color: Colors.purple,
          fontSize: 20.0,
        )
    )
)

maxLines

最大行数设置

body: new Container(
    width: 400.0,
    height: 200.0,
    color: Colors.greenAccent,
    child: new Text("hello world sdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsd",
        maxLines: 2,
        overflow: TextOverflow.ellipsis,
        style: new TextStyle(
          color: Colors.purple,
          fontSize: 40.0,
        )
    )
)

data & textSpan

data，普通的String类型，无需赘述 textSpan，TextSpan类型，个人觉得TextSpan最大的用处在于处理多种类型和显示效果的文字，以及各自点击事件的处理，看下面这个例子。

class HomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Container(
        width: 400.0,
        height: 200.0,
        color: Colors.greenAccent,
        child: new Text.rich(new TextSpan(
          text: "one",
          style: new TextStyle(
            fontSize: 40.0,
            color: Colors.green,
            decoration: TextDecoration.underline,
            decorationColor: Colors.purple,
            decorationStyle: TextDecorationStyle.wavy,
          ),
          children: [
            new TextSpan(
              text: "TWO",
              style: new TextStyle(
                fontSize: 40.0,
                color: Colors.green,
                decoration: TextDecoration.underline,
                decorationColor: Colors.purple,
                decorationStyle: TextDecorationStyle.wavy,
              ),
              recognizer: new TapGestureRecognizer()
                ..onTap = () =>
                    Scaffold.of(context).showSnackBar(new SnackBar(
                      content: new Text("TWO is tapped"),
                    )),),
            new TextSpan(
              text: "THREE",
              style: new TextStyle(
                fontSize: 40.0,
                color: Colors.black12,
                decoration: TextDecoration.overline,
                decorationColor: Colors.redAccent,
                decorationStyle: TextDecorationStyle.dashed,
              ), recognizer: new LongPressGestureRecognizer()
              ..onLongPress = () =>
                  Scaffold.of(context).showSnackBar(new SnackBar(
                    content: new Text("THREE is longpressed"),
                  )),),
            new TextSpan(
                text: "four",
                style: new TextStyle(
                  fontSize: 40.0,
                  color: Colors.green,
                  decoration: TextDecoration.lineThrough,
                  decorationColor: Colors.yellowAccent,
                  decorationStyle: TextDecorationStyle.dotted,
                ),
                recognizer: new TapGestureRecognizer()
                  ..onTap = () {
                    var alert = new AlertDialog(
                      title: new Text("Title"),
                      content: new Text("four is tapped"),
                    );
                    showDialog(context: context, child: alert);
                  }
            )
          ],
          recognizer: new TapGestureRecognizer()
            ..onTap = () =>
                Scaffold.of(context).showSnackBar(new SnackBar(
                  content: new Text("one is tapped"),
                )),
        ),)
    );
  }
}

4段文字，不完全相同的样式，不完全相同的事件处理。

自定义字体使用方式

字体下载路径
GoogleFont
操作方法

看下对比效果，图二为RobotoSlab字体