Flutter Widgets: Text

介绍

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

类结构

构造方法

两个构造方法

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

属性值

style

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

属性值意义inherit是否继承color字体颜色fontSize字体大小fontWeight字体厚度，也就是字体粗细fontStylenormal或者italicletterSpacing字母间隙(负值可以让字母更紧凑)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, ) ) ) textAlignResultTextAlign.leftTextAlign.rightTextAlign.centerTextAlign.justify(两端对齐)TextAlign.startTextAlign.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, ) ) ) TextDirectionResultTextDirection.ltrTextDirection.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, ) ) ) softWrapResulttruefalse

显然，当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, ) ) ) overflowResultTextOverflow.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字体

原文：https://blog.csdn.net/poorkick/article/details/80426578