Flutter最基本的组件-文本组件
Flutter中的Text相当于Android中的TextView，用于展示文本，Text 组件非常常用。
1 Text属性及含义
Text控件包含如下表所述属性：
1.1 Text 常用属性介绍
| Text 属性 | 介绍 | 备注 |
|---|---|---|
| style | TextStyle 对象，最常用属性 | 详情见下方表格 |
| textAlign | 对齐方式：left、start、right、end、center、justify | |
| textDirection | TextDirection.ltr:从左到右、TextDirection.rtl：从右到左 | |
| softWrap | 是否自动换行 | |
| overflow | 超出部分截取方式，clip->直接截取，fade->渐隐，ellipsis->省略号 | |
| textScaleFactor | 字体缩放 | |
| maxLines | 最多显示行数 | |
| semanticsLabel | 语义标签，如文本为"$$" | 这里设置为"双美元 |
| textWidthBasis | 测量行宽度 | |
| textHeightBehavior | 官方备注: 定义如何应用第一行的ascent和最后一行的descent |
1.2 TextAlign
textAlign就是文本对齐方式。
| 属性值 | 介绍 |
|---|---|
| TextAlign.left | 居左对齐 |
| TextAlign.start | 向开始位置对齐 |
| TextAlign.end | 向结束位置对齐 |
| TextAlign.center | 居中对齐 |
| TextAlign.justify | 两端对齐 |
Text(" 对齐方式：向右对齐 TextAlign.right ",
style: TextStyle(
color:Colors.blue[400],
fontSize: 24.0),
textAlign: TextAlign.right,
),
1.3 textDirection
文本方向
| 属性值 | 含义 |
|---|---|
| TextDirection.ltr | 从左到右 |
| TextDirection.rtl | 从右到左 |
Text("文本方向：从右到左 TextDirection.rtl ",
style: TextStyle(color: Colors.blue,
fontSize: 20.0),
textDirection: TextDirection.rtl,
),
1.4 softWrap
是否自动换行，若为false，文字将不考虑容器大小，单行显示，超出屏幕部分将默认截断处理
| 属性值 | 含义 |
|---|---|
| true | 自动换行 |
| false | 不自动换行，超出屏幕截断 |
1.5 overflow
当文字超出屏幕的时候，超出部分如何处理
| 属性值 | 含义 |
|---|---|
| TextOverflow.clip | 超出部分裁剪掉 |
| TextOverflow.fade | 超出部分渐变隐藏 |
| TextOverflow.ellipsis | 超出部分用...替代 |
Text("单行显示，不换行。单行显示，不换行。 单行显示，不换行。",
style: TextStyle(color: Colors.pink,
fontSize: 20.0),
overflow: TextOverflow.ellipsis, //超出用...代替
softWrap: false, //不换行
)
1.6 maxLines
最大行数设置, 如果softWrap和maxLines同时赋值,以maxLines为最高优先级。
Text("单行显示，不换行。单行显示，不换行。 单行显示，不换行。",
style: TextStyle(color: Colors.pink, fontSize: 20.0),
overflow: TextOverflow.ellipsis, //超出用...代替
softWrap: false,//不换行
maxLines: 2,
)
1.7 textScaleFactor
字体显示倍率。假设有字体大小是20.0。将字体大小设置成10.0，倍率为2，可以实现相同效果。
Text("字体10，倍率为2",
style: new TextStyle(color: Colors.pink, fontSize: 10.0),
textScaleFactor: 2.0,
)
2 TextStyle 属性介绍
TextStyle，用来定义Text中文字的各种属性。
| TextStyle 属性 | 介绍 |
|---|---|
| inherit | 是否继承父类 |
| color | 字体颜色 |
| backgroundColor | 背景色 |
| fontSize | 字体颜色字体大小 |
| fontWeight | 字体加粗 |
| fontStyle | 系统字体 |
| fontFamily | 字体 |
| letterSpacing | 字母间距 |
| wordSpacing | 单词间距 |
| textBaseline | 字体基线，有兴趣的可以单独了解，flex 布局中会有一种 |
| height | 高度 |
| locale | 区域设置 |
| foreground | 前置层 |
| background | 背景层 |
| shadows | 阴影 |
| fontFeatures | 指定字体的多种变体 |
| decoration | 文字划线：上，中，下 |
| decorationColor | 划线颜色 |
| decorationStyle | 划线样式：虚线，单线，双线 |
| decorationThickness | 线宽，默认1.0 |
| debugLabel | 仅在 debug 模式下有用 |
代码如下：
Text("红色+黑色删除线+20号",
style: TextStyle(
color: const Color(0xffff0000),
decoration: TextDecoration.lineThrough,
decorationColor: const Color(0xff000000),
fontSize: 20.0),
),
Text("橙色+下划线+21号",
style: TextStyle(
color: const Color(0xffff9900),
decoration: TextDecoration.underline,
decorationColor: const Color(0xffff9900),
fontSize: 21.0),
),
Text("虚线上划线+22号+倾斜",
style: TextStyle(
decoration: TextDecoration.overline,
decorationStyle: TextDecorationStyle.dashed,
fontSize: 22.0,
fontStyle: FontStyle.italic),
),
Text("serif字体+23号",
style: TextStyle(
fontFamily: "serif",
fontSize: 23.0,
),
),
Text("monospace字体+24号+加粗",
style: TextStyle(
fontFamily: 'monospace',
fontSize: 24.0,
fontWeight: FontWeight.bold,
),
),
Text("天蓝色+25号+两行跨度",
style:TextStyle(color: Colors.cyan, fontSize: 25.0, height: 2.0),
),
Text("26号+10个字符间隔"
style: new TextStyle(fontSize: 26.0, letterSpacing: 10.0),
),
3 Text.rich& TextSpan
多样式文本（富文本）。TextSpan可以控制一个Text内拥有不同样式和不同点击事件。类似于Android里SpannableString。
Text.rich(
TextSpan(text: "one",
style:TextStyle(
fontSize: 20.0,
color: Colors.green,
decoration: TextDecoration.underline,
decorationColor: Colors.purple,
decorationStyle: TextDecorationStyle.wavy,
),
children: [
TextSpan(
text: "TWO",
style: TextStyle(
fontSize: 30.0,
color: Colors.green,
decoration: TextDecoration.lineThrough,
decorationColor: Colors.purple,
decorationStyle: TextDecorationStyle.wavy,
),
recognizer:TapGestureRecognizer()
..onTap = () {
var alert = AlertDialog(
title: Text("Title"),
content: Text("TWO"),
);
showDialog(context: context, child: alert);
}),
TextSpan(
text: "THREE",
style: TextStyle(
fontSize: 20.0,
color: Colors.black12,
decoration: TextDecoration.overline,
decorationColor: Colors.redAccent,
decorationStyle: TextDecorationStyle.dashed,
),
recognizer: TapGestureRecognizer()
..onTap = () {
var alert = AlertDialog(
title: Text("Title"),
content: Text("THREE"),
);
showDialog(context: context, child: alert);
}),
TextSpan(
text: "FOUR",
style: TextStyle(
fontSize: 40.0,
color: Colors.green,
decoration: TextDecoration.lineThrough,
decorationColor: Colors.yellowAccent,
decorationStyle: TextDecorationStyle.dotted,
),
recognizer: TapGestureRecognizer()
..onTap = () {
var alert = AlertDialog(
title: Text("Title"),
content: Text("FOUR"),
);
showDialog(context: context, child: alert);
})
],
recognizer: TapGestureRecognizer()
..onTap = () {
var alert = AlertDialog(
title: Text("Title"),
content: Text("one"),
);
showDialog(context: context, child: alert);
}),
)
4 完整代码
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
///* project_name：flutter_widgets_app
///* author： laohe(老贺)
///* date： 2020/12/31
///*/
class TextWidgets extends StatefulWidget {
@override
State<TextWidgets> createState() => _TextWidgetsState();
}
class _TextWidgetsState extends State<TextWidgets> {
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Text Widget实例'),
),
body: Container(
child: ListView(children: <Widget>[
Text(
"红色+黑色删除线+20号",
style: TextStyle(
color: const Color(0xffff0000),
decoration: TextDecoration.lineThrough,
decorationColor: const Color(0xff000000),
fontSize: 20.0),
),
Text(
"橙色+下划线+21号",
style: TextStyle(
color: const Color(0xffff9900),
decoration: TextDecoration.underline,
decorationColor: const Color(0xffff9900),
fontSize: 21.0),
),
Text(
"虚线上划线+22号+倾斜",
style: TextStyle(
decoration: TextDecoration.overline,
decorationStyle: TextDecorationStyle.dashed,
fontSize: 22.0,
fontStyle: FontStyle.italic),
),
Text(
"serif字体+23号",
style: TextStyle(
fontFamily: "serif",
fontSize: 23.0,
),
),
Text(
"monospace字体+24号+加粗",
style: TextStyle(
fontFamily: 'monospace',
fontSize: 24.0,
fontWeight: FontWeight.bold,
),
),
Text(
"天蓝色+25号+两行跨度",
style: TextStyle(
color: Colors.cyan, fontSize: 25.0, height: 2.0),
),
Text(
"26号+10个字符间隔",
style: TextStyle(fontSize: 26.0, letterSpacing: 10.0),
),
Text(
" 对齐方式：向右对齐 TextAlign.right ",
style: TextStyle(color: Colors.blue[400], fontSize: 24.0),
textAlign: TextAlign.right,
),
Text(
"对齐方式：向左对齐 TextAlign.left ",
style: TextStyle(color: Colors.blue[200], fontSize: 24.0),
textAlign: TextAlign.left,
),
Text(
"对齐方式：居中对齐 TextAlign.center ",
style: TextStyle(color: Colors.blue[400], fontSize: 24.0),
textAlign: TextAlign.center,
),
Text(
"对齐方式： 两端对齐 TextAlign. justify ",
style: TextStyle(color: Colors.blue[200], fontSize: 24.0),
textAlign: TextAlign.justify,
),
Text(
"文本方向：从右到左 TextDirection.rtl ",
style: TextStyle(color: Colors.blue, fontSize: 20.0),
textDirection: TextDirection.rtl,
),
Text(
"文本方向：从左到右 TextDirection.ltr ",
style: TextStyle(color: Colors.blue, fontSize: 20.0),
textDirection: TextDirection.ltr,
),
Text(
"单行显示，不换行。单行显示，不换行。 单行显示，不换行。",
style: TextStyle(color: Colors.pink, fontSize: 20.0),
overflow: TextOverflow.ellipsis, //超出用...代替
softWrap: false, //不换行
// maxLines: 2, //如果softWrap和maxLines同时赋值，以maxLines为最高优先级。
),
Text(
"字体10，倍率为2",
style: TextStyle(color: Colors.yellow[700], fontSize: 10.0),
textScaleFactor: 2.0,
),
Text.rich(TextSpan(
text: "one",
style: TextStyle(
fontSize: 20.0,
color: Colors.green,
decoration: TextDecoration.underline,
decorationColor: Colors.purple,
decorationStyle: TextDecorationStyle.wavy,
),
children: [
TextSpan(
text: "TWO",
style: TextStyle(
fontSize: 30.0,
color: Colors.green,
decoration: TextDecoration.lineThrough,
decorationColor: Colors.purple,
decorationStyle: TextDecorationStyle.wavy,
),
recognizer: TapGestureRecognizer()
..onTap = () {
var alert = AlertDialog(
title: Text("Title"),
content: Text("TWO"),
);
showDialog(context: context, child: alert);
}),
TextSpan(
text: "THREE",
style: TextStyle(
fontSize: 20.0,
color: Colors.black12,
decoration: TextDecoration.overline,
decorationColor: Colors.redAccent,
decorationStyle: TextDecorationStyle.dashed,
),
recognizer: TapGestureRecognizer()
..onTap = () {
var alert = AlertDialog(
title: Text("Title"),
content: Text("THREE"),
);
showDialog(context: context, child: alert);
}),
TextSpan(
text: "FOUR",
style: TextStyle(
fontSize: 40.0,
color: Colors.green,
decoration: TextDecoration.lineThrough,
decorationColor: Colors.yellowAccent,
decorationStyle: TextDecorationStyle.dotted,
),
recognizer: TapGestureRecognizer()
..onTap = () {
var alert = AlertDialog(
title: Text("Title"),
content: Text("FOUR"),
);
showDialog(context: context, child: alert);
})
],
)),
]), // This trailing comma makes auto-formatting nicer for build methods.
));
}
}
5 运行效果：
6 github项目源码
文章中源码已经放到github上，下载地址如下： github项目源码
