Text
基本使用
Text 用来显示单一样式的文本字符串,例如:
Text("默认文本显示"),
Text("多行文本显示效果" * 7,),
Text(
"多行文本显示时,只显示 maxLines" * 7,
maxLines: 2,
),
Text(
"多行文本显示时,只显示 maxLines,多余文本通过 overflow 处理" * 7,
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
Text(
"文字缩放倍数",
textScaleFactor: 1.5,
),
效果如下:
说明:
- Text 组件可以单行或多行显示,默认情况下,当文本超过一行时会自动跨行显示。
- maxLines:当文本跨行,页面显示的最大行数。
- overflow:文本溢出时,多余文本的处理方式,可以配合 maxLines 使用。
- textScaleFactor:相当于当前字体大小的缩放比例,它是设置 fontSize 属性的快捷方式。
style
style 属性用来指定文本的显示方式,例如颜色,字体,大小,背景,装饰等等:
Text(
"这里演示 textStyle 的用法" * 6,
style: TextStyle(
color: Colors.red,
fontSize: 20.0,
height: 2.0,
fontFamily: "MicroSoft Yahei",
fontStyle: FontStyle.italic,
fontWeight: FontWeight.bold,
background: new Paint()..color = Colors.yellow,
decoration: TextDecoration.underline,
decorationStyle: TextDecorationStyle.dashed,
),
)
Text(
'单行文字间隔,中文无效。How are you',
style: TextStyle(wordSpacing: 20),
)
Text(
'文本字与字之间间隔。How are you',
style: TextStyle(letterSpacing: 20),
)
效果如下:
说明:
- color:文本颜色。文本的前景色,不能与 foreground 共同设置。
- fontSize:字体大小 (pt、sp ),默认为 14 个逻辑像素 (14pt、14sp )。
- height:指定行高,但它并不是一个绝对值,而是一个因子,具体的行高等于 fontSize * height。在该示例中,行高为 20.0 * 2.0。
- fontFamily:使用的字体名称。
- fontStyle:字体的显示方式,如 FontStyle.italic 为斜体。
-
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 最粗
- background:文本背景色。
-
decoration:绘制文本装饰
- TextDecoration.underline:下划线
- TextDecoration.overline:上划线
- TextDecoration.lineThrough:删除线
- TextDecoration.none:无(默认)
-
decorationStyle:绘制文本装饰的样式
- TextDecorationStyle.dashed:一条虚线(短横线)
- TextDecorationStyle.dotted:一条虚线(点)
- TextDecorationStyle.solid:一条实线
- TextDecorationStyle.double:两条实线
- TextDecorationStyle.wavy:一条波浪线
- wordSpacing:单行文字间隔,中文无效
- letterSpacing:文本字与字之间间隔
textAlign
文本的对齐方式,可以选择左对齐、右对齐还是居中对齐:
Container(
width: 300.0,
child: Text(
"这里演示 textAlign.left 的用法",
textAlign: TextAlign.left,
),
),
Container(
width: 300.0,
child: Text(
"这里演示 textAlign.center 的用法",
textAlign: TextAlign.center,
),
),
Container(
width: 300.0,
child: Text(
"这里演示 textAlign.right 的用法",
textAlign: TextAlign.right,
),
),
效果如下:
说明:使用 Container 容器指定宽度,才能显示对其效果
textSpan
在上面的例子中,Text 的所有文本内容只能按同一种样式,如果我们需要对一个 Text 内容的不同部分按照不同的样式显示,这时就可以使用 TextSpan,它代表文本的一个“片段”。
Text.rich(TextSpan(children: [TextSpan(text: "Home:"),
TextSpan(
text: "https://flutterchina.club",
style: TextStyle(color: Colors.blue),
),
TextSpan(
text: "请点击链接",
style: TextStyle(
color: Colors.red,
fontStyle: FontStyle.italic,
),
),
]))
效果如下:
DefaultTextStyle
在 widget 树中,文本的样式默认是可以被继承的,因此,如果在 widget 树的某一个节点处设置一个默认的文本样式,那么该节点的子树中所有文本都会默认使用这个样式,而 DefaultTextStyle 正是用于设置默认文本样式的。
DefaultTextStyle(
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.red,
fontSize: 20.0,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
width: double.infinity,
child: Text("这里演示 DefaultTextStyle 的用法"),
),
Text("这里演示 DefaultTextStyle 的用法"),
Text(
"这里没有继承默认字体样式",
style: TextStyle(
inherit: false,
color: Colors.grey,
),
),
],
),
));
效果如下: