2.4 文本显示Text组件
在Flutter中，Text组件用于显示文本，类似Android里的TextView，iOS里的UILabel。基本使用代码如下。
在Text组件中通过textAlign来配置文字的对齐方式，取值类型为TextAlign枚举类型，可取值如表2-2所示。
表2-2 文本对齐方式取值简述
默认情况下，Text中的文本默认的文字对齐方式是TextAlign.start。在中英文中，人们的书写习惯是从左向右，所以Text在应用程序中呈现出的是左对齐。在部分地区，人们的操作习惯是从右向左，所以在其环境中呈现出的是右对齐。
设置文字对齐方式时，需要结合文本的绘制方向textDirection，textDirection有两个取值：一个是TextDirection.ltr从左向右；一个是TextDirection.rtl，从右向左。在中文环境下，文本绘制方向是从左向右，此时textDirection的方向就是ltr值，这种情况与left左对齐的效果一致。基本使用代码如下。
2-10 文字方向从左向右
当修改文字的方向为从右向左，代码如下。
2-11 文字方向从右向左
对于TextAlign.justify模式，是针对英文效果，中文无效果，代码如下。
2-12 文字对齐start模式与justify模式对比
可以通过设置Text组件的softWrap属性来控制其是否自动换行，当softWrap为false时，Text中的文本超出父组件配置的宽度时，不会自动换行，会直接被裁剪掉。
2-13 文字自动换行对比效果图
所以可以通过配置softWrap来满足单行显示的业务需求，当然也可以设置Text的最大行数为1来达到同样的效果。
当文本超出设置区域后，可通过配置Text的TextOverflow属性来限制超出部分的显示模式，可取值描述如表2-3所示。
表2-3 TextOverflow取值简述
基本使用代码如下。
几种TextOverflow模式运行效果对比如图2-9所示。
图2-9 不同overflow模式对比效果图
2.4.1 Text组件的样式TextStyle
在文本显示组件Text中，通过TextStyle属性来配置显示的文本的样式，style的取值为TextStyle类型，如表2-4中所示为TextStyle的常用类型配置。
表2-4 TextStyle属性配置说明
TextStyle的基本使用代码如下。
2-14 TextStyle基本使用效果图
TextStyle中的decoration属性可用来配置文本中的下画线、删除线等装饰，基本使用代码如下。
2-15 文本删除线效果图
decoration属性还可以用来配置装饰线的位置，可取值如表2-5中所示，效果对比如图2-10所示。
表2-5 TextDecoration属性取值说明
图2-10 文本装饰线位置对比效果图
decorationStyle属性还可以用来配置装饰线的样式，可取值如表2-6所示，效果对比如图2-11所示。
表2-6 TextDecorationStyle属性取值说明
图2-11 文本装饰线样式对比效果图
2.4.2 RichText组件的基本使用
在Flutter中，使用RichText实现一段文本中多种文字风格的功能，类似Android中的SpannableString与iOS中的NSMutableAttributedString。基本使用代码如下。
2-16 RichText基本使用效果图
TextSpan的构造函数代码描述如下。
TextSpan可以通过children属性来无限嵌套使用。使用此原理可开发一个用于显示搜索内容高亮颜色的依赖库flutter_tag_layout，实际业务场景中就是搜索框搜索出的列表显示内容中有与关键字相同的内容就使用高亮颜色显示。读者可以直接添加依赖使用。
基本使用代码如下。
2-17 RichText-Tag基本使用效果图