
微信交流群
Text是显示文本的组件,最常用的组件之一。基本用法如下:
Text('老孟')
1
注意:Text组件一定要包裹在Scaffold组件下(也有其他方式,对初学者建议使用此方式),否则效果如下:
文本的样式在style
中设置,类型为TextStyle
,TextStyle
中包含很多文本样式属性,下面介绍一些常用的。
设置文本大小和颜色:
Text('老孟',style: TextStyle(color: Colors.red,fontSize: 20),),
1
上面黑色的字体为没有设置的效果,作为对比。
设置字体粗细:
Text('老孟',style: TextStyle(fontWeight: FontWeight.bold))
1
字体粗细共有9个级别,为w100
至w900
,FontWeight.bold是w700
。
设置斜体:
Text('老孟',style: TextStyle(fontStyle: FontStyle.italic,))
1
设置自定义的字体:
- 首先下载字体库(比如中华字体库)
- 将字体文件拷贝的项目中,一般目录是:assets/fonts/,assets和fonts都需要手动创建,此目录不是必须的,而是约定俗成,资源一般都放在assets目录下。
- 配置
pubspec.yaml
:
fonts:
- family: maobi
fonts:
- asset: assets/fonts/maobi.ttf
1
2
3
4
2
3
4
maobi:是自己对当前字体的命名,有意义即可。
asset:字体文件的目录。
使用:
Text('老孟', style: TextStyle(fontFamily: 'maobi',)),
1
设置对齐方式:
Container(
height: 100,
width: 200,
color: Colors.blue.withOpacity(.4),
child: Text('老孟', textAlign: TextAlign.center),
),
1
2
3
4
5
6
2
3
4
5
6
textAlign
只是控制水平方向的对齐方式,值说明如下:
- left:左对齐
- right:右对齐
- center:居中
- justify:两端对齐,此属性中文存在bug(Flutter版本:1.17.3)也可以在官方issue中关注此问题
- start:前端对齐,和
TextDirection
属性有关,如果设置TextDirection.ltr
,则左对齐,设置TextDirection.rtl
则右对齐。 - end:末端对齐,和
TextDirection
属性有关,如果设置TextDirection.ltr
,则右对齐,设置TextDirection.rtl
则左对齐。
设置文本自动换行:
Container(
height: 100,
width: 200,
color: Colors.blue.withOpacity(.4),
child: Text('老孟,专注分享Flutter技术和应用实战',softWrap: true,),
)
1
2
3
4
5
6
2
3
4
5
6
文本超出范围时的处理:
Container(
height: 100,
width: 200,
color: Colors.blue.withOpacity(.4),
child: Text('老孟,专注分享Flutter技术和应用实战',overflow: TextOverflow.ellipsis,),
)
1
2
3
4
5
6
2
3
4
5
6
溢出的处理方式:
- clip:直接裁剪。
- fade:越来越透明。
- ellipsis:省略号结尾。
- visible:依然显示,此时将会溢出父组件。
设置全局字体样式:
在MaterialApp
的theme
中设置如下
MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
...
textTheme: TextTheme(
bodyText2: TextStyle(color: Colors.red,fontSize: 24),
)
),
home: Scaffold(
body: TextDemo(),
),
)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
Text组件默认为红色,
Text('老孟'),
Text('老孟',style: TextStyle(color: Colors.blue,fontSize: 20),),
1
2
3
2
3
版权所有,禁止私自转发、克隆网站。