文章已同步至掘金：https://juejin.cn/post/6844903956557070343
欢迎访问😃，有任何问题都可留言评论哦~
Flutter 中的Text控件用于显示一些文本内容和样式，其中包含了控制文本显示样式的一些属性
源码示例
构造函数如下：
const Text(
this.data, {
Key key,
this.style,
this.strutStyle,
this.textAlign,
this.textDirection,
this.locale,
this.softWrap,
this.overflow,
this.textScaleFactor,
this.maxLines,
this.semanticsLabel,
})
属性解释
只说一些经常使用的属性
textAlign
设置文本的对齐方式，可以选择左对齐、右对齐还是居中。
示例：
Text(
'测试',
textAlign: TextAlign.center, //文本居中
)
注：对齐的参考系是Text widget本身，
如果Text文本内容宽度不足一行，Text的宽度和文本内容长度相等，那么这时指定对齐方式是没有意义的，只有Text宽度大于文本内容长度时指定此属性才有意义。
在Text中，文本也是可以用算式表示的
例如：
Text(
"xxx" * 100,
),
这样也是可以的，会显示100个xxx
maxLines
指定文本显示的最大行数，默认情况下，文本是自动折行的，如果指定此参数，则文本最多不会超过指定的行。
如：maxLines: 1，则文本的内容最多一行
这个属性要配合overflow一起使用
overflow
指定文本的截断方式
默认是直接截断，我们经常使用的截断方式是TextOverflow.ellipsis，他会将多余文本截断后以省略符...表示
示例：
Text(
'测试测试测试测试测试测试测试测试测试测试测试',
maxLines: 1, //设置最多一行
overflow: TextOverflow.ellipsis, //如果内容超出屏幕宽度，则以...表示
)
textScaleFactor
代表文本相对于当前字体大小的缩放因子，相对于去设置文本的样式style属性的fontSize，它是调整字体大小的一个快捷方式。
style–>TextStyle(详解)
style中有一个TextStyle，用来设置文本的样式
示例：
Text("Hello world",
style: TextStyle(
color: Colors.blue, //设置文本颜色
fontSize: 18.0, //设置字体大小
height: 1.2, //设置行高
fontFamily: "Courier", //设置是什么字体
background: new Paint()..color=Colors.yellow, //设置背景色
decoration:TextDecoration.underline,
decorationStyle: TextDecorationStyle.dashed
),
);
关于decoration有关的使用，请参考我的文章：Flutter 容器控件篇–>Container
源码示例
构造函数如下：
const TextStyle({
this.inherit = true,
this.color,
this.backgroundColor,
this.fontSize,
this.fontWeight,
this.fontStyle,
this.letterSpacing,
this.wordSpacing,
this.textBaseline,
this.height,
this.locale,
this.foreground,
this.background,
this.shadows,
this.decoration,
this.decorationColor,
this.decorationStyle,
this.decorationThickness,
this.debugLabel,
String fontFamily,
List<String> fontFamilyFallback,
String package,
})
其实平常用不了这么多，只要记住常用的几个就行
属性解释
有关基础的属性，在上面的例子中已经注释标明了，所以就不做过多解释，这里只说几个需要注意的
height
该属性用于指定行高，但它并不是一个绝对值，而是一个因子，具体的行高等于fontSize*height。
color
在使用color时，我们通常都是这样color: Colors.blue,
也可以这样color: Color(0xFF1E88E5),
然后会呈现蓝色，但是如果我们想改变一下颜色的深度呢？不想让他那么蓝
我们可以这样color: Colors.blue[50],
在颜色后面加一个[]里面放1-100的数值，就可以调整颜色的深度
fontFamily
由于不同平台默认支持的字体集不同，所以在手动指定字体时一定要先在不同平台测试一下。
fontSize
该属性和Text的textScaleFactor都用于控制字体大小。但是有两个主要区别：
fontSize可以精确指定字体大小，而textScaleFactor只能通过缩放比例来控制。textScaleFactor主要是用于系统字体大小设置改变时对Flutter应用字体进行全局调整，而fontSize通常用于单个文本，字体大小不会跟随系统字体大小变化。
TextSpan
在上面的例子中，Text的所有文本内容只能按同一种样式，
如果我们需要对一个Text内容的不同部分按照不同的样式显示，这时就可以使用TextSpan，它代表文本的一个“片段”。
源码示例
构造函数如下：
const TextSpan({
this.style,
this.text,
this.children,
this.recognizer,
this.semanticsLabel,
});
属性解释
其中 style 和 text 属性代表该文本片段的样式和内容。
children是一个TextSpan的数组，也就是说TextSpan可以包括其他TextSpan。
而recognizer用于对该文本片段上用于手势进行识别处理。这里不做介绍
举一个例子：
Text.rich(TextSpan(
children: [
TextSpan(
text: "夜夕i的博客: "
),
TextSpan(
text: "https://juejin.im/user/2999123452633720",
style: TextStyle(
color: Colors.blue
),
recognizer: _click
),
]
))
上面代码中，通过TextSpan实现了一个基础文本片段和一个链接片段，然后通过Text.rich方法将 TextSpan 添加到Text中，
_click是点击链接后的一个处理器（代码已省略）
DefaultTextStyle
在Widget树中，文本的样式默认是可以被继承的
因此，如果在Widget树的某一个节点处设置一个默认的文本样式，那么该节点的子树中所有文本都会默认使用这个样式，而DefaultTextStyle正是用于设置默认文本样式的。
代码示例：
DefaultTextStyle(
//1.设置文本默认样式
style: TextStyle(
color:Colors.red,
fontSize: 20.0,
),
textAlign: TextAlign.start,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("hello world"),
Text("I am Jack"),
Text("I am Jack",
style: TextStyle(
inherit: false, //2.不继承默认样式
color: Colors.grey
),
),
],
),
);
上面代码中，首先设置了一个默认的文本样式，即字体为20像素(逻辑像素)、颜色为红色。然后通过 DefaultTextStyle 设置给了子树Column节点处，这样一来Column的所有子孙Text默认都会继承该样式，除非Text显示指定不继承样式，如代码中注释2。
评论区