Text 控件是 Flutter 中最基本的一个控件,用来显示一个文本。

创建方法

Text 控件继承至 StatelessWidget,创建方法有两种

创建方法 介绍
new Text() 构造方法创建,只能生成一种style
Text.rich() 静态方法创建,能够生成多种style

构造方法简介

Text(String data, {Key key, TextStyle style, StrutStyle strutStyle, TextAlign textAlign, TextDirection textDirection, Locale locale, bool softWrap, TextOverflow overflow, double textScaleFactor, int maxLines, String semanticsLabel}) → Text

{}花括号内的参数为可选

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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,
}) : assert(data != null),
textSpan = null,
super(key: key);

第一个必选参数 String data

1
2
3
4
/// The text to display.
///
/// This will be null if a [textSpan] is provided instead.
final String data;

从源码注释中可以了解到,data 为要显示的文本,类型为 String
Text('Hello World')

第一个可选参数 Key key

key 这个参数目前不确定有什么用,可以不管,待以后研究明白再写一篇说明吧。
官方解释:https://flutterchina.club/widgets-intro/#key

第二个可选参数 TextStyle style

style 确定了文本显示的样式风格。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const TextStyle({
this.inherit = true,
this.color,
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.debugLabel,
String fontFamily,
List<String> fontFamilyFallback,
String package,
}) : fontFamily = package == null ? fontFamily : 'packages/$package/$fontFamily',
_fontFamilyFallback = fontFamilyFallback,
_package = package,
assert(inherit != null),
assert(color == null || foreground == null, _kColorForegroundWarning);

TextStyle({bool inherit: true, Color color, double fontSize, FontWeight fontWeight, FontStyle fontStyle, double letterSpacing, double wordSpacing, TextBaseline textBaseline, double height, Locale locale, Paint foreground, Paint background, List<Shadow> shadows, TextDecoration decoration, Color decorationColor, TextDecorationStyle decorationStyle, String debugLabel, String fontFamily, List<String> fontFamilyFallback, String package}) → TextStyle
TextStyle 的构造方法可以看到,所有参数都是可选的。

TextStyle的第一个可选参数 bool inherit

该参数默认值为 true,为 true 时,此 style 会与最接近的系统的 DefaultTextStyle 合并。

TextStyle的第二个可选参数 Color color

Text 控件中文本 显示的颜色

如果指定了 foreground 属性,则该参数必须为空。

1
2
Text('Hello World', style: new TextStyle(color: Colors.deepOrange))),
Text('Hello World', style: new TextStyle(color: Colors.blue))),

TextStyle的第三个可选参数 double fontSize

Text 控件中文本 显示的文字大小,类型为 双精度,默认值为 14.0

1
2
3
4
Text('Hello World!',
style: new TextStyle(color: Colors.deepOrange, fontSize: 18.0));
Text('Hello Flutter!',
style: new TextStyle(color: Colors.blue, fontSize: 20.0));

TextStyle的第四个可选参数 FontWeight fontWeight

Text 控件中文本 显示的字体粗细程度
该参数有11种类型可选。

类型 含义
FontWeight.bold 常用的粗体,值为w700
FontWeight.normal 默认字体粗细,值为w400
FontWeight.w100 最细
FontWeight.w200 特细
FontWeight.w300
FontWeight.w400 正常,普通
FontWeight.w500 较粗
FontWeight.w600 半粗体
FontWeight.w700 加粗
FontWeight.w800 特粗
FontWeight.w900 最粗

TextStyle的第五个可选参数 FontStyle fontStyle

Text 控件中文本的字体显示类型。
该参数有两种类型

类型 含义
FontStyle.normal 直体
FontStyle.italic 斜体

TextStyle的第六个可选参数 double letterSpacing

Text 控件中文本的 字母 之间的 间隔空间,类型为 双精度
负数 可以让字母更加接近。

1
2
3
4
5
6
Text('Hello world!', style: new TextStyle(color: Colors.greenAccent,
fontSize: 20.0, letterSpacing: -5.0)));
Text('Hello world!', style: new TextStyle( color: Colors.pinkAccent,
fontSize: 20.0, letterSpacing: 0)));
Text('Hello world!', style: new TextStyle( color: Colors.blue,
fontSize: 20.0, letterSpacing: 5)));

TextStyle的第七个可选参数 double wordSpacing

Text 控件中文本的 单词 之间的 间隔空间,类型为 双精度
负数 可以让单词更加接近。

1
2
3
4
5
6
Text('Hello world!', style: new TextStyle(color: Colors.greenAccent,
fontSize: 20.0, wordSpacing: -10.0)));
Text('Hello world!', style: new TextStyle( color: Colors.pinkAccent,
fontSize: 20.0, wordSpacing: 0)));
Text('Hello world!', style: new TextStyle( color: Colors.blue,
fontSize: 20.0, wordSpacing: 10)));

TextStyle的第八个可选参数 TextBaseline textBaseline

Text 控件中文本的对齐基准线。
该参数有两种类型

类型 含义
TextBaseline.alphabetic //TODO 目前不清楚含义
TextBaseline.ideographic //TODO 目前不清楚含义

TextStyle的第九个可选参数 double height

Text 控件中文本的 行与行显示的距离,值为 1~2

1
2
3
4
5
6
Text('Hello Flutter!\nHello Flutter!', style: new TextStyle(color: Colors.greenAccent,
fontSize: 20.0, height: 1)));
Text('Hello Flutter!\nHello Flutter!', style: new TextStyle( color: Colors.pinkAccent,
fontSize: 20.0, height: 1.5)));
Text('Hello Flutter!\nHello Flutter!', style: new TextStyle( color: Colors.blue,
fontSize: 20.0, height: 2)));

TextStyle的第十个可选参数 Locale locale

用于选择 区域特定字形 的区域设置。此参数很少设置,目前不清楚有什么影响。

TextStyle的第十一个可选参数 Paint foreground

Text 控件中文本的 前景色,即文本显示的颜色。

不能和color参数同时设置,否则编译不会出错,运行时Crash。

1
2
3
4
5
6
7
Text('Hello Flutter!', style: new TextStyle(
color: Colors.greenAccent, fontSize: 20.0)));

Paint foreColor = new Paint();
foreColor.color = Colors.pinkAccent;
Text('Hello Flutter!', style: new TextStyle(
fontSize: 20.0, foreground: foreColor)));

TextStyle的第十二个可选参数 Paint background

Text 控件的 背景 颜色。

1
2
3
4
5
6
7
8
9
Paint backBlackColor = new Paint();
backBlackColor.color = Colors.black;
Paint backYellowColor = new Paint();
backYellowColor.color = Colors.yellowAccent;

Text('Hello Flutter!', style: new TextStyle(color: Colors.greenAccent,
fontSize: 20.0, background: backBlackColor))),
Text('Hello Flutter!', style: new TextStyle(color: Colors.pinkAccent,
fontSize: 20.0, background: backYellowColor))),

TextStyle的第十三个可选参数 List<ui.Shadow> shadows

Text 控件中文本的 文字阴影效果,类型为 Shadow集合,最终效果为集合中的 所有Shadow组合效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Text('Hello Flutter!',
style: new TextStyle(
color: Colors.greenAccent, //字体颜色 绿色
fontSize: 30.0, //字体大小 30
shadows: [
new Shadow(
color: Colors.purpleAccent, //阴影颜色 紫色
offset: new Offset(-5, -5), //偏移量 (5,10)
blurRadius: 1.0), //模糊度 1
new Shadow(
color: Colors.black, //阴影颜色 黑色
offset: new Offset(5, 5), //偏移量 (5,5)
blurRadius: 3.0), //模糊度 3
])));

TextStyle的第十四个可选参数 TextDecoration decoration

Text 控件中文本的 文字装饰 效果,该参数有四个类型,可以和decorationColor参数一起使用

类型 含义
TextDecoration.none 无装饰
TextDecoration.lineThrough 删除线
TextDecoration.overline 上划线
TextDecoration.underline 下划线
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Text('Hello Flutter!',
style: new TextStyle(
color: Colors.deepOrange, //文本颜色 橘色
fontSize: 20.0,
decoration: TextDecoration.lineThrough, //删除线
decorationColor: Colors.yellowAccent))), //装饰颜色 黄色
Text('Hello Flutter!',
style: new TextStyle(
color: Colors.deepOrange, //文本颜色 橘色
fontSize: 20.0,
decoration: TextDecoration.overline, //上划线
decorationColor: Colors.black))), //装饰颜色 黑色
Text('Hello Flutter!',
style: new TextStyle(
color: Colors.deepOrange, //文本颜色 橘色
fontSize: 20.0,
decoration: TextDecoration.underline, //下划线
decorationColor: Colors.cyanAccent))), //装饰颜色 青色

TextStyle的第十五个可选参数 Color decorationColor

Text 控件中文本的文字装饰效果的 颜色,默认和文本颜色一致。

TextStyle的第十六个可选参数 TextDecorationStyle decorationStyle

Text 控件中文本的文字装饰效果的 样式风格,该参数有五个类型。

类型 含义
TextDecorationStyle.dashed 横线式虚线
TextDecorationStyle.dotted 点式虚线
TextDecorationStyle.double 两条线
TextDecorationStyle.solid 实线(默认值)
TextDecorationStyle.wavy 波浪线
1
2
3
4
5
6
7
8
9
10
11
Text('Hello Flutter!',
style: new TextStyle(
color: Colors.deepOrange, //文本颜色 橘色
fontSize: 20.0,
decoration: TextDecoration.lineThrough,
decorationColor: Colors.black,
// decorationStyle: TextDecorationStyle.dashed))); //横线式虚线
// decorationStyle: TextDecorationStyle.dotted))); //点式虚线
// decorationStyle: TextDecorationStyle.double))); //两条线
// decorationStyle: TextDecorationStyle.solid))); //实线
decorationStyle: TextDecorationStyle.wavy))); //波浪线

TextStyle的第十七个可选参数 String debugLabel

用于描述该TextStyle,方便用户调试,仅在Debug模式编译时有效,并且在用 “==” 比较两个TextStyle时,该参数不会影响结果。

TextStyle的第十八个可选参数 String fontFamily

Text 控件中文本的文字 字体,参数类型为 String

1
2
3
4
Text('Hello Flutter!', style: new TextStyle(color: Colors.deepOrange,
fontSize: 20.0, fontFamily: "Times New Roman")));
Text('Hello Flutter!', style: new TextStyle(color: Colors.deepOrange,
fontSize: 20.0, fontFamily: "monospace")));

TextStyle的第十九个可选参数 List<String> fontFamilyFallback

//TODO

TextStyle的第二十个可选参数 String package

//TODO

第三个可选参数 StrutStyle strutStyle

//TODO

第四个可选参数 TextAlign textAlign