微信交流群

老孟公众号

Text是显示文本的组件,最常用的组件之一。基本用法如下:

Text('老孟')
1

注意:Text组件一定要包裹在Scaffold组件下(也有其他方式,对初学者建议使用此方式),否则效果如下:

文本的样式在style中设置,类型为TextStyleTextStyle中包含很多文本样式属性,下面介绍一些常用的。

设置文本大小和颜色:

Text('老孟',style: TextStyle(color: Colors.red,fontSize: 20),),
1

上面黑色的字体为没有设置的效果,作为对比。

设置字体粗细:

Text('老孟',style: TextStyle(fontWeight: FontWeight.bold))
1

字体粗细共有9个级别,为w100w900FontWeight.boldw700

设置斜体:

Text('老孟',style: TextStyle(fontStyle: FontStyle.italic,))
1

设置自定义的字体:

  1. 首先下载字体库(比如中华字体库)
  2. 将字体文件拷贝的项目中,一般目录是:assets/fonts/,assets和fonts都需要手动创建,此目录不是必须的,而是约定俗成,资源一般都放在assets目录下。
  3. 配置pubspec.yaml
fonts:
  - family: maobi 
    fonts:
      - asset: assets/fonts/maobi.ttf
1
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

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

文本超出范围时的处理:

Container(
  height: 100,
  width: 200,
  color: Colors.blue.withOpacity(.4),
  child: Text('老孟,专注分享Flutter技术和应用实战',overflow: TextOverflow.ellipsis,),
)
1
2
3
4
5
6

溢出的处理方式:

  • clip:直接裁剪。
  • fade:越来越透明。
  • ellipsis:省略号结尾。
  • visible:依然显示,此时将会溢出父组件。

设置全局字体样式:

MaterialApptheme中设置如下

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

Text组件默认为红色,

Text('老孟'),

Text('老孟',style: TextStyle(color: Colors.blue,fontSize: 20),),
1
2
3