从本篇开始，将对Flutter的基础控件进行讲解。
Flutter中的Text相当于Android中的TextView，属于最常用的Widget之一了。
Text构造函数如下
const Text(this.data, {
Key key, // 选填参数，Key类型，Widget的标识，
this.style, // 选填参数，TextStyle类型，文本样式
this.strutStyle, // 选填参数，StrutStyle类型，设置每行的最小行高
this.textAlign, // 选填参数，TextAlign类型，文本的对齐方式
this.textDirection, // 选填参数，TextDirection类型，文字方向
this.locale, // 选填参数，Local类型，用于选择用户语言和格式设置首选项的标识符
this.softWrap, // 选填参数，bool类型，是否支持软换行符，如果是 false 的话，这个文本只有一行，水平方向是无限的
this.overflow, // 选填参数，TextOverflow类型，文本的截断方式
this.textScaleFactor, // 选填参数，double类型，代表文本相对于当前字体大小的缩放因子，默认值为1.0
this.maxLines, // 选填参数，int类型，显示的最大行数
this.semanticsLabel, // 选填参数，String类型，给文本加上一个语义标签（用不到）
}) : assert(data != null),
textSpan = null,
super(key: key);
...
}
常用属性如下：
| 属性 | 说明 |
|---|---|
| textAlign | 文本位置(TextAlign.left，TextAlign.right，TextAlign.center） |
| overflow | 超出文本显示样式（TextOverflow.ellipsis,TextOverflow.clip,TextOverflow.fade） |
| maxLines | 最大行数 |
| softWrap | 是否换行 |
| style | TextStyle文本样式 |
TextStyle构造函数如下：
class TextStyle extends Diagnosticable {
const TextStyle({
this.inherit = true, // 可选，类型 bool，是否继承父 Text 的样式，默认为 true，如果为 false，且样式没有设置具体的值，则采用默认值：白色、大小 10px、sans-serif 字体
this.color, // 可选，类型 Color，文字的颜色
this.fontSize, // 可选，类型 Color，文字的大小
this.fontWeight, // 可选，类型 FontWeight，字体粗细
this.fontStyle, // 可选，类型 FontStyle，是否在字体中倾斜字形
this.letterSpacing, // 可选，类型 double，字母之间的间隔
this.wordSpacing, // 可选，类型 double，字母之间的间隔
this.textBaseline, // 可选，类型 TextBaseLine，用于对齐文本的水平线
this.height, // 可选，类型 double，文本的高度，但它并不是一个绝对值，而是一个因子，具体的行高等于 fontSize * height
this.locale, // 可选，类型 Locale，用于选择用户语言和格式设置首选项的标识符
this.foreground, // 可选，类型 Paint，文本的前景色
this.background, // 可选，类型 Paint，文本的背景色
this.shadows, // 可选，类型 List，在文本下方绘制阴影
this.decoration, // 可选，类型 TextDecoration，文本的线条
this.decorationColor, // 可选，类型 Color，TextDecoration 线条的颜色
this.decorationStyle, // 可选，类型 TextDecorationStyle，TextDecoration 线条的样式
this.debugLabel, // 可选，类型 String，文本样式的描述
String fontFamily, // 可选，类型 String，用于设置使用那种自定义字体
List fontFamilyFallback, // 可选，类型 String，字体列表，当前面的字体找不到时，会在这个列表里依次查找
String package, // 可选，类型 String
}) : fontFamily = package == null ? fontFamily : 'packages/$package/$fontFamily',
_fontFamilyFallback = fontFamilyFallback,
_package = package,
assert(inherit != null),
assert(color == null || foreground == null, _kColorForegroundWarning);
...
}
常用属性如下：
| 属性 | 说明 |
|---|---|
| color | 文本颜色 |
| fontSize | 文本大小（默认14） |
| fontStyle | 字体样式（FontStyle.italic 使用斜体，FontStyle.normal 使用直立） |
| textBaseline | 对齐文本的水平线: |
| fontFamily | 文本字体 |
| letterSpacing | 水平字母之间的空间间隔（逻辑像素为单位）。可以使用负值来让字母更接近 |
| wordSpacing | 单词之间添加的空间间隔（逻辑像素为单位）。可以使用负值来使单词更接近。 |
| height | 文本行与行的高度，作为字体大小的倍数（取值1~2，如1.2） |
| background | 文本背景色 |
| foreground | 文本的前景色，不能与color共同设置 |
| fontWeight | 绘制文本时使用的字体粗细:FontWeight.bold 常用的字体重量比正常重。FontWeight.normal 默认字体粗细 |
| decorationStyle | 绘制文本装饰的样式（画一条虚线 TextDecorationStyle.dashed，画两条线 TextDecorationStyle.double，画一条实线 TextDecorationStyle.solid，画一条实线 TextDecorationStyle.solid） |
| shadows | 背景设定（边框、圆角、阴影、形状、渐变、背景图像等）详见Decoration用法 |
RichText
RichText富文本就是使文本呈现各式各样的样式，在Android中通过SpannableString/SpannableStringBuilder来实现富文本
RichText构造函数
RichText({
Key key,
@required this.text,
this.textAlign = TextAlign.start,
this.textDirection,
this.softWrap = true,
this.overflow = TextOverflow.clip,
this.textScaleFactor = 1.0,
this.maxLines,
this.locale,
this.strutStyle,
}) : assert(text != null),
assert(textAlign != null),
assert(softWrap != null),
assert(overflow != null),
assert(textScaleFactor != null),
assert(maxLines == null || maxLines > 0),
super(key: key);
其常用属性和Text差不多
常用属性
| 属性 | 说明 |
|---|---|
| textAligen | 文本位置 |
| textDirection | 文本方向 |
| softWrap | 自动换行 |
| overflow | 文本超出部分显示样式 |
| maxLines | 最大行数 |
与Text不同，RichText的text属性不是String类型，而是TextSpan，这个TextSpan有点像Android富文本里面的ClickableSpan、ForegroundColorSpan等，TextSpan构造函数如下：
TextSpan({
this.style,
this.text,
this.children,
this.recognizer,
this.semanticsLabel,
})
常用属性
| 属性 | 说明 |
|---|---|
| text | 文本内容 |
| style | TextStyle，文本风格 |
| children | TextPan列表，实现多个富文本 |
| recognizer | 文本片段的手势交互，如点击、长按事件 |
完整代码
children: [
Text(
'You have pushed the button this many times:You have pushed the button this many times:You have pushed the button this many times:',
textAlign: TextAlign.left,
style: TextStyle(color: Color(0xffffc811), fontSize: 20),
),
RichText(
text: TextSpan(
text: 'RichText',
style: TextStyle(
color: Color(0xffffc811), fontStyle: FontStyle.normal),
children: [
TextSpan(
text: 'hello',
style: TextStyle(
color: Color(0xfff03f59),
fontStyle: FontStyle.italic),
recognizer: TapGestureRecognizer()
..onTap = () {
print("click");
}),
TextSpan(
text: 'world',
style: TextStyle(
color: Color(0xffffc811),
fontStyle: FontStyle.italic))
]),
),
Text有一个静态方法rich，可以达到RichText的效果。其实，看一下Text的build方法可以知道，Text实际上是对RichText的包装。
@override
Widget build(BuildContext context) {
...
Widget result = RichText(
...
text: TextSpan(
...
text: data,
children: textSpan != null ? [textSpan] : null,
),
);
...
return result;
}