1.Text
在Android中，使用TextView显示文本，iOS中使用UILabel来显示文本；
Flutter中，使用Text控制文本如何展示。Text用于显示简单样式文本，代码示例如下：
class TextDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Text(
'《定风波》 苏轼 莫听穿林打叶声，何妨吟啸且徐行。竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。',
textAlign: TextAlign.center, // 所有内容都居中对齐
maxLines: 1, // 最多显示行数
overflow: TextOverflow.ellipsis, // 超出部分显示...
);
}
}
- textAlign
文本的对齐方式；可以选择左对齐、右对齐还是居中。
ps：对齐的参考是Text Widget本身。有时虽然是指定了居中对齐，但因为Text文本内容宽度不足一行，Text的宽度和文本内容长度相等，那么这时指定对齐方式是没有意义的，只有Text宽度大于文本内容长度时指定此属性才有意义 - maxLines
指定文本显示的最大行数，默认情况下，文本是自动折行的，如果指定此参数，则文本最多不会超过指定的行。如果有多余的文本，可以通过overflow来指定截断方式，默认是直接截断，代码中指定的截断方式TextOverflow.ellipsis，它会将多余文本截断后以省略符“...”表示，TextOverflow的其它截断方式可查阅SDK文档 - textScaleFactor
文本相对于当前字体大小的缩放因子，相对于去设置文本的样式style属性的fontSize，它是调整字体大小的一个快捷方式。该属性的默认值可以通过MediaQueryData.textScaleFactor获得，如果没有MediaQuery，那么会默认值将为1.0。
2.TextStyle
TextStyle用于指定文本显示的样式如颜色、字体、粗细、背景等。代码示例如下：
class TextDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Text(
'《定风波》 苏轼 \n莫听穿林打叶声，何妨吟啸且徐行。\n竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。',
textAlign: TextAlign.center, // 所有内容都居中对齐
style: TextStyle(
color: Colors.yellow,
fontSize: 17.0,
height: 1.2,
fontFamily: "Courier",
background: Paint()..color = Colors.red,
decoration: TextDecoration.underline,
decorationStyle: TextDecorationStyle.dashed,
),
);
}
}
- height
该属性用于指定行高，但它并不是一个绝对值，而是一个因子，具体的行高等于fontSize*height - fontFamily
由于不同平台默认支持的字体集不同，所以在手动指定字体时一定要先在不同平台测试一下。 - fontSize
该属性和Text的textScaleFactor都用于控制字体大小。fontSize可以精确指定字体大小，而textScaleFactor只能通过缩放比例来控制。textScaleFactor主要是用于系统字体大小设置改变时对Flutter应用字体进行全局调整，而fontSize通常用于单个文本，字体大小不会跟随系统字体大小变化。
代码只展示了TextStyle的部分属性，它还有一些其它属性，可查阅SDK文档。
3.TextSpan
当需要对一个Text内容的不同部分按照不同的样式显示，这时就可以使用TextSpan，它代表文本的一个“片段”。TextSpan源码如下：
const TextSpan({
this.text,
this.children,
TextStyle style,
this.recognizer,
this.semanticsLabel,
}) : super(style: style,);
其中style和text属性代表该文本片段的样式和内容。 children是一个TextSpan的数组，也就是说TextSpan可以包括其他TextSpan。recognizer一个手势识别器，它将接收到达此文本范围的事件，类型是GestureRecognizer。semanticsLabel语义标签，无实际用处，用于向Android上的TalkBack和iOS的VoiceOver提供图像描述。
ps：Talkback是一款由谷歌官方开发的系统软件,它的定位是帮助盲人或者视力有障碍的用户提供语言辅助。Voiceover功能是苹果公司在2009年4月新推出的一种语音辅助程序。
代码示例如下：
class TextSpanDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Text.rich(
TextSpan(
children: [
TextSpan(
text: '《定风波》',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
),
TextSpan(
text: "\n苏轼",
style: TextStyle(fontSize: 18, color: Colors.redAccent),
),
TextSpan(
text: "\n莫听穿林打叶声，何妨吟啸且徐行。\n竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。",
),
],
),
style: TextStyle(fontSize: 16, color: Colors.black),
textAlign: TextAlign.center,
);
}
}
上面代码中，通过Text.rich方法将TextSpan添加到Text中，因为Text其实就是RichText的一个包装，而RichText是可以显示富文本的Widget。在Android中，我们可以使用SpannableString，在iOS中，我们可以使用NSAttributedString完成。
4.DefaultTextStyle
DefaultTextStyle是用于设置默认文本样式的。 在Widget树中，文本的样式默认是可以被继承的（子类文本类组件未指定具体样式时可以使用Widget树中父级设置的默认样式），所以在Widget树的某一个节点处设置一个默认的文本样式，那么该节点的子树中所有文本都会默认使用这个样式。代码示例如下：
class DefaultTextStyleDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return DefaultTextStyle(
// 设置文本默认样式
style: TextStyle(color: Colors.blue, fontSize: 18),
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text('Hello Text!'),
Text('Hello TextSpan!'),
Text(
'Hello DefaultTextStyle!',
style: TextStyle(
inherit: false, // 不继承默认样式
color: Colors.red,
fontSize: 12,
),
)
],
),
),
);
}
}
示例运行效果如下：
代码传送门
网友评论