Flutter Widgets: Text

18,333 阅读3分钟
原文链接: blog.csdn.net

介绍

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

类结构

这里写图片描述

构造方法

两个构造方法
这里写图片描述

这里写图片描述

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

属性值

style

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

属性值 意义
inherit 是否继承
color 字体颜色
fontSize 字体大小
fontWeight 字体厚度,也就是字体粗细
fontStyle normal或者italic
letterSpacing 字母间隙(负值可以让字母更紧凑)
wordSpacing 单词间隙(负值可以让单词更紧凑)
textBaseLine 文本绘制基线(alphabetic/ideographic)
height 高度
locale 区域设置
decoration 文字装饰(none/underline/overline/lineThrough)
decorationColor 文字装饰的颜色
decorationStyle 文字装饰的风格(solid/double/dotted/dashed/wavy)
fontFamily 字体

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字体

这里写图片描述 这里写图片描述