作者 | 弗拉德
起源 | 弗拉德（公众号：fulade_me)
Text
咱们先来看Text的构造函数都有哪些参数：
const Text( this.data, { //data 就是咱们须要展现的文字 是字符串类型，这个是必传字段，其余的都是可选 Key key, //widget的标识 this.style, //文本款式，类型是TextStyle this.strutStyle, //用来设置最小行高的参数 this.textAlign, //文本的对齐形式，类型是TextAlign this.textDirection, // 文字方向，类型是TextDirection this.locale, //抉择用户语言和格局的标识符，类型是Locale，次要用于国际化 this.softWrap, //bool 类型 ，false标识文本只有一行，程度方向有限 this.overflow, //超出显示区域后的展现形式，类型是TextOverflow this.textScaleFactor, //double类型 示意文本绝对于以后字体的缩放系数，默认为1.0 this.maxLines, // int 类型，显示的最大行数 this.semanticsLabel, //String 类型，给文本加上一个语义标签 this.textWidthBasis, //一行或多行文本宽度的不同形式，类型是TextWidthBasis }) Text咱们重点介绍上面几个参数:data、style、textAlign、maxLines、overflow。
1. 最简略的示例
Text("Fulade");2. 放大和放大
Text("文字放大1.5倍",textScaleFactor: 1.5);textScaleFactor是缩放参数，默认是1.0，设置小于1的参数是放大，设置大概1的参数是放大。
3. 居中、居左和居右
Text( "居右显示" * 10, textAlign: TextAlign.right,);textAlign是地位参数，常见的枚举值有TextAlign.right、TextAlign.left和TextAlign.center。
4. 单行显示
Text( "最多一行显示超过局部显示..." * 10, maxLines: 1, overflow: TextOverflow.ellipsis,);maxLines示意文字须要几行来显示，如果超过了要显示的行数，文字会被切断。应用overflow来设置切断文字的款式，overflow有以下几个枚举值：
enum TextOverflow { clip, //间接裁剪。 fade, // 突变淡出 ellipsis, // 以省略号的形式 visible, // 仍然显示，此时将会溢出父组件}如果咱们不设置maxLines，文字默认会换行，以全副都展现的形式来显示。
以上四种款式成果如下：
TextStyle
如果想要设置更简单的文字款式，咱们须要传入Text的style参数，style参数接管一个 TextStyle的对象，TextStyle能够帮忙咱们做很多事件。
5. 粗体
Text( "粗体", style: TextStyle(fontWeight: FontWeight.bold),)fontWeight用来设置粗体。FontWeight.bold默认是w700。
6. 色彩
Text( "红色", style: TextStyle(color: Colors.red),)color参数用来设置色彩。
7. 字号
Text( "字号20", style: TextStyle(fontSize: 20),)fontSize用来设置字号。
8. 斜体
Text( "斜体", style: TextStyle(fontStyle: FontStyle.italic),)fontStyle能够用来设置斜体，FontStyle.italic示意斜体，默认是FontStyle.normal。
9. 背景色彩
Text( "背景色彩红色", style: TextStyle( background: Paint()..color = Colors.red, color: Colors.blue),)background用来设置背景色彩，它接管一个Paint对象作为参数，Paint对象能够设置color属性。
10. 删除线
Text( "删除线", style: TextStyle( decoration: TextDecoration.lineThrough, decorationColor: Colors.red),)decorationColor参数是设置删除线的色彩，TextDecoration.lineThrough是删除线的款式。
11. 下划线
Text( "下划线", style: TextStyle( decoration: TextDecoration.underline, ),);下划线的设置跟删除线的设置根本一样，只是枚举值不同，下划线应用的是TextDecoration.underline枚举。
以上几种款式展现成果如下：
RichText 和 TextSpan
Flutter反对在一行文字外面显示不同色彩的文字，这里咱们须要用到RichText和 TextSpan。
12. 多彩文字
RichText( text: TextSpan( textAlign: TextAlign.center, text: "多彩文字：", style: TextStyle(color: Colors.black), children: <TextSpan>[ TextSpan( text: "红色、", style: TextStyle(color: Colors.red)), TextSpan( text: "蓝色、", style: TextStyle(color: Colors.blue)), TextSpan( text: "绿色 ", style: TextStyle(color: Colors.green)), ], ),);TextSpan的参数children，能够是一个TextSpan对象的数组，这就比拟有意思。每一个TextSpan都能够设置色彩和字体，这样咱们就能够组合成一个多彩的文字构造。同样RichText也有textAlign参数，它是整个文字的地位参数。
13. 给文字增加点击事件
RichText( text: TextSpan( text: "增加了手势的文字: ", style: TextStyle(color: Colors.black), children: <TextSpan>[ TextSpan( text: "点击会输入Log", style: TextStyle(color: Colors.blue), recognizer: TapGestureRecognizer() ..onTap = () { tapCount++; print("taped taped " + tapCount.toString()); }, ), ], ),);TextSpan能够给相应的文字增加手势，这样就能够满足咱们点击某个文字触发事件的需要，这在日常开发中十分无效。咱们就不须要搞一些"文字+按钮+文字+..."的这种组合了。TextSpan的参数recognizer能够接管一个手势参数，当然这里的手势不仅有点击手势，还有滑动手势等等(具体的手势性能咱们前面会讲到)。多种手势更是满足了咱们更多的交互需要。
多彩文字和点击工夫如下图：
想体验点击事件成果，能够到我的Github仓库我的项目里flutter_app->lib->routes->text_page.dart运行查看。
DefaultTextStyle
DefaultTextStyle是一个非凡的TextStyle。在DefaultTextStyle上面的所有子元素的文本款式都继承了DefaultTextStyle设置的文本款式。因而，咱们只须要定义一个DefaultTextStyle，其下的所有文本款式都是该定义好的DefaultTextStyle的款式。这样就极大的不便咱们来写一些对立的款式，而不须要每次都要写繁琐的设置款式的代码。
DefaultTextStyle( // 设置文本默认款式 style: TextStyle( color: Colors.red, fontSize: 20.0, ), textAlign: TextAlign.start, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text("DefaultTextStyle "), Text("DefaultTextStyle"), Text( "扭转了的DefaultTextStyle", style: TextStyle( inherit: false, // 设置不再继承默认款式 color: Colors.blue), ), ], ),);首先咱们申明了一个DefaultTextStyle的款式，它是红色的，字号是20。
留神:这里有一个Text的inherit设置了false，只有设置了false才容许不继承DefaultTextStyle的款式。而其余的两个Text对象，默认应用了DefaultTextStyle的款式。
成果如下：
以上所有的代码都在我的Github仓库我的项目里flutter_app->lib->routes->text_page.dart外面，你能够下载下来运行并体验。
运行效果图如下：