酷客网Flutter文本组件(Text)
Text组件是用于展示文本的组件，是最基本的组件之一。酷客教程Flutter 文本组件已经有做介绍，本文再做补充。
下面是Text源码的构造函数：
class Text extends StatelessWidget {
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表示Text组件展示的文本，是必填参数，style表示文本的样式等。Text主要属性如表所示:
使用Text组件直接显示“Flutter实战入门”，代码如下：
Text('Flutter 实战入门')
Text组件中style属性表示文本的样式，类型为TextStyle，TextStyle主要属性如表所示：
设置字体颜色为蓝色、字体大小为20，带阴影，代码如下：
Text(
style: TextStyle(color: Colors.blue,fontSize: 20,
shadows: [
Shadow(color: Colors.black12,offset: Offset(3, 3),blurRadius: 3)
]),
)
效果如图所示：
Text组件中textAlign属性代表文本对齐方式，值包括左对齐、中间对齐、右对齐。分别设置为左对齐、中间对齐、右对齐，代码如下：
Container(
width: 300,
color: Colors.black12,
child: Text('Flutter 实战入门'),
),
SizedBox(
height: 10,
),
Container(
width: 300,
color: Colors.black12,
child: Text(
'Flutter 实战入门',
textAlign: TextAlign.center,
),
),
SizedBox(
height: 10,
),
Container(
width: 300,
color: Colors.black12,
child: Text(
'Flutter 实战入门',
textAlign: TextAlign.end,
),
),
若要看到文本的对齐效果，需要父组件比文本组件大，所以加入Container父组件。Container是一个容器组件，SizeBox是为了分割开3个Text，效果如图所示：
softWrap属性表示是否自动换行，设置为true表示自动换行，设置为false表示不自动换行，代码如下：
Text(
'Flutter 实战入门Flutter 实战入门Flutter 实战入门Flutter 实战入门
Flutter 实战入门Flutter 实战入门',
softWrap: true,
),
SizedBox(
height: 10,
),
Text(
'Flutter 实战入门Flutter 实战入门Flutter 实战入门Flutter 实战入门
Flutter 实战入门Flutter 实战入门',
softWrap: false,
),
效果如图所示：
Overflow属性表示当文本超过范围时的截取方式，包括直接截取、渐隐、省略号。Overflow的值参如表所示：
Overflow用法如下：
Container(
width: 150,
color: Colors.black12,
child: Text(
'Flutter 实战入门 截取方式：直接截取',
overflow: TextOverflow.clip,
softWrap: false,
),
),
SizedBox(
height: 10,
),
Container(
width: 150,
color: Colors.black12,
child: Text(
'Flutter 实战入门 截取方式：渐隐',
overflow: TextOverflow.fade,
softWrap: false,
),
),
SizedBox(
height: 10,
),
Container(
width: 150,
color: Colors.black12,
child: Text(
'Flutter 实战入门 截取方式：省略号',
overflow: TextOverflow.ellipsis,
softWrap: false,
),
),
SizedBox(
height: 10,
),
Container(
width: 150,
color: Colors.black12,
child: Text(
'Flutter 实战入门 截取方式：显示',
overflow: TextOverflow.visible,
softWrap: false,
),
),
效果如图所示：
酷客网相关文章：
评论前必须登录！
注册