Flutter 入门（Text控件基本使用）

Flutter 入门（Text控件）

Text Widget用于显示简单样式文本，类似于Android中的TextView。在Flutter中Text 用于显示简单样式文本，它包含一些控制文本显示样式的一些属性。

Text构造方法及属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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,
this.textWidthBasis,
}) : assert(
data != null,
'A non-null String must be provided to a Text widget.',
),
textSpan = null,
super(key: key);

控件属性

属性名	类型	默认值	说明
data	String		数据为要显示的文本
maxLines	int	0	文本显示的最大行数
style	TextStyle	null	文本样式，可定义文本的字体大小、颜色、粗细等
textAlign	TextAlign	TextAlign.center	文本水平方向对齐方式，取值有center、end、justify、left、right、start、values
textDirection	TextDirection	TextDirection.ltr	有些文本书写的方向是从左到右，比如英语、泰米尔语、中文，有些则是从右到左，比如亚拉姆语、希伯来语、乌尔都语。从左到右使用TextDirection.ltr，从右到左使用TextDirection.rtl
textScaleFactor	double	1.0	字体缩放系数，比如，如果此属性设置的值为1.5，那么字体会放大150%，也就是说比原来的大了50%
textSpan	TextSpan	null	文本块，TextSpan里可以包含文本内容及样式
softWrap	bool	TRUE	某一行中文本过长，是否需要换行。默认为true，如果为false，则文本中的字形将被定位为好像存在无限的水平空间。
overflow	TextOverflow	TextOverflow.clip	TextOverflow.clip：剪切溢出的文本以修复其容器。

TextStyle style

属性名	说明
Color color	文本颜色。如果指定了foreground，则此值必须为null。
TextDecoration decoration	绘制文本装饰: 下划线（TextDecoration.underline）上划线（TextDecoration.overline）删除线（TextDecoration.lineThrough）无（TextDecoration.none）
Color decorationColor	绘制文本装饰的颜色。
TextDecorationStyle decorationStyle	绘制文本装饰的样式: 画一条虚线 TextDecorationStyle.dashed 画一条虚线 TextDecorationStyle.dotted 画两条线 TextDecorationStyle.double 画一条实线 TextDecorationStyle.solid 画一条正弦线(波浪线) TextDecorationStyle.wavy
FontWeight fontWeight	绘制文本时使用的字体粗细: FontWeight.bold 常用的字体重量比正常重。即w700 FontWeight.normal 默认字体粗细。即w400 FontWeight.w100 薄，最薄 FontWeight.w200 特轻 FontWeight.w300 轻 FontWeight.w400 正常/普通/平原 FontWeight.w500 较粗 FontWeight.w600 半粗体 FontWeight.w700 加粗 FontWeight.w800 特粗 FontWeight.w900 最粗
FontStyle fontStyle	字体变体： FontStyle.italic 使用斜体 FontStyle.normal 使用直立
TextBaseline textBaseline	对齐文本的水平线: TextBaseline.alphabetic：文本基线是标准的字母基线 TextBaseline.ideographic：文字基线是表意字基线；如果字符本身超出了alphabetic 基线，那么ideograhpic基线位置在字符本身的底部。
String fontFamily	使用的字体名称（例如，Roboto）。如果字体是在包中定义的，那么它将以’packages / package_name /‘为前缀（例如’packages / cool_fonts / Roboto’）
double fontSize	字体大小(pt、sp)，默认为14个逻辑像素(14pt、14sp)
double letterSpacing	水平字母之间的空间间隔（逻辑像素为单位）。可以使用负值来让字母更接近。
double wordSpacing	单词之间添加的空间间隔（逻辑像素为单位）。可以使用负值来使单词更接近。
double height	文本行与行的高度，作为字体大小的倍数（取值1~2，如1.2）
Locale locale	此属性很少设置，用于选择区域特定字形的语言环境
Paint background	文本背景色
Paint foreground	文本的前景色，不能与color共同设置（比文本颜色color区别在Paint功能多，后续会讲解）
List shadows	详解:Flutter Decoration背景设定（边框、圆角、阴影、形状、渐变、背景图像等）

TextAlign textAlign

属性名	说明
TextAlign.center	将文本对齐容器的中心。
TextAlign.end	对齐容器后缘上的文本。
TextAlign.justify	拉伸以结束的文本行以填充容器的宽度。即使用了decorationStyle才起效
TextAlign.left	对齐容器左边缘的文本。
TextAlign.right	对齐容器右边缘的文本。
TextAlign.start	对齐容器前缘上的文本。

示例代码

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
27
28
29
30
31

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Text示例',
home: Scaffold(
appBar:AppBar(
title:Text(
'TextWidget'
)
),
body:new Center(
child: MyText(),
),
),
);
}
}
class MyText extends StatelessWidget{
@override
Widget build(BuildContext context) {
return new Text(
'MyText'
);
}
}

运行后是这样

1591856514(1)

overflow

文本的截断方式，接收一个TextOverflow 类型的值，TextOverflow 有三种方式分别是

enum TextOverflow { clip, fade, ellipsis,}

示例代码

1
2
3
4
5
6
7
8
9

Text(
'好看的UI千篇一律，有趣的代码万里挑一'*10,//内容重复10遍
maxLines: 3,
style: TextStyle(
fontSize: 20,
color: Colors.red
),
overflow: TextOverflow.clip,
)

默认情况是clip就是直接切断的如图
fade格式（最后一行会有渐变色）
ellipsis格式（行尾会有省略符）

TextSpan

Text源码中还可以看到一个构造方法，该方法是用TextSpan创建一个Text widget。rich方法必须要传一个TextSpan

构造方法如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

const Text.rich(
this.textSpan, {
Key key,
this.style,
this.strutStyle,
this.textAlign,
this.textDirection,
this.locale,
this.softWrap,
this.overflow,
this.textScaleFactor,
this.maxLines,
this.semanticsLabel,
this.textWidthBasis,
}) : assert(
textSpan != null,
'A non-null TextSpan must be provided to a Text.rich widget.',
),
data = null,
super(key: key);

TextSpan跟Text的区别就在于TextSpan是分片，我们可以把一串字符串分为几个片段来管理，每个片段可以单独设置样式。
我们再来看看TextSpan的构造方法

1
2
3
4
5
6
7
8
9
10
11

const TextSpan({
this.style,//设置样式
this.text,//要显示的文本内容
this.children,//是一个TextSpan的数组,不能为空
this.recognizer,//用来处理手势的
});

final TextStyle style;
final String text;
final List<TextSpan> children;
final GestureRecognizer recognizer;

示例代码

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
27
28
29
30

/*TextSpan
* 文本片段，可以对文本片段单独设置样式
* */
class MyTextSpan extends StatelessWidget{
@override
Widget build(BuildContext context) {
return new Text.rich(
TextSpan(
children:[
TextSpan(
text:'好看的UI千篇一律',
style: TextStyle(
color: Colors.black,
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
TextSpan(
text:'有趣的代码万里挑一',
style: TextStyle(
color: Colors.blue,
fontSize: 24,
fontStyle: FontStyle.italic,
),
)
]
)
);
}
}

效果展示

1591859169(1)

DefaultTextStyle（可设置默认样式）

在Flutter的widget树中，文本的样式默认是可以被继承的，父节点的文本样式子节点默认会继承，如果子节点中重新设置了默认样式的某些属性，那么则以子节点设置的为准。我们也可以通过设置inherit: false 不继承父节点的默认样式。

示例代码

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
27
28
29
30
31
32
33
34

/*带有默认样式的Text*/
class MyDefaultStyleText extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return DefaultTextStyle(
//设置默认样式
style: TextStyle(
fontSize: 40,
color: Colors.red
),
/*子节点就会默认继承父节点的样式，如果子节点重新设置了父节点中已设置的样式，那么以子节点设置的样式为准*/
child: Column(
children: <Widget>[
Text(
"好看的UI千篇一律",
style: TextStyle(
/*这里我们重新指定一下颜色，那么最终的颜色就以子节点的设置为准*/
color: Colors.deepOrange,
),
),
Text(
"有趣的代码万里挑一",
style: TextStyle(
inherit: false,//inherit设为false表示不继承父节点默认样式，默认值为true
color: Colors.blue,
),
),
],
)

);
}
}

效果展示

1591859818(1)

更详细的请看官方文档

结束

学习Flutter第二天