Flutter Text（文本控件）
Flutter Text（文本控件）
毛大姑娘
发布于 2020-09-10 07:56:20
发布于 2020-09-10 07:56:20
代码可运行
运行总次数：0
代码可运行
Flutter中的Text相当于Android中的TextView，用于展示文本。
1、Text属性及含义
Text控件包含如下属性：
Text属性值 | 含义 |
|---|---|
key | Key字符串，唯一标识 |
data | String字符串 |
style | TextStyle用于控制文本显示样式 |
strutStyle | 使用的支柱风格（基本不用） |
textAlign | 文本对齐方式 |
textDirection | 文本方向 |
locale | 默认Localizations.localeOf(context)（基本不用） |
softWrap | 是否换行 |
overflow | 文字超出屏幕如何处理 |
textScaleFactor | 字体显示倍率 |
maxLines | 最大行数设置 |
semanticsLabel | 没啥用（基本不用） |
下面介绍每个属性的含义及用法。
2、属性示例
2.1、style
TextStyle，用来定义Text中文字的各种属性。后面的例子会陆续使用到一些，常用的属性值也是相当好理解的。具体如下：
style属性值 | 含义 |
|---|---|
inherit | 是否继承 |
color | 字体颜色 |
fontSize | 字体大小 |
fontWeight | 字体厚度，也就是字体粗细 |
fontStyle | normal或者italic |
letterSpacing | 字母间隙(负值可以让字母更紧凑) |
wordSpacing | 单词间隙(负值可以让单词更紧凑) |
textBaseLine | 文本绘制基线(alphabetic/ideographic) |
height | 行距高度 |
locale | 区域设置 |
decoration | 文字装饰(none/underline/overline/lineThrough) |
decorationColor | 文字装饰的颜色 |
decorationStyle | 文字装饰的风格(solid/double/dotted/dashed/wavy) |
fontFamily | 字体风格 |
示例：
new Text(
"红色+黑色删除线+20号",
style: new TextStyle(
color: const Color(0xffff0000),
decoration: TextDecoration.lineThrough,
decorationColor: const Color(0xff000000),
fontSize: 20.0),
),
new Text(
"橙色+下划线+21号",
style: new TextStyle(
color: const Color(0xffff9900),
decoration: TextDecoration.underline,
decorationColor: const Color(0xffff9900),
fontSize: 21.0),
),
new Text(
"虚线上划线+22号+倾斜",
style: new TextStyle(
decoration: TextDecoration.overline,
decorationStyle: TextDecorationStyle.dashed,
fontSize: 22.0,
fontStyle: FontStyle.italic),
),
new Text(
"serif字体+23号",
style: new TextStyle(
fontFamily: "serif",
fontSize: 23.0,
),
),
new Text(
"monospace字体+24号+加粗",
style: new TextStyle(
fontFamily: 'monospace',
fontSize: 24.0,
fontWeight: FontWeight.bold,
),
),
new Text(
"天蓝色+25号+两行跨度",
style:
new TextStyle(color: Colors.cyan, fontSize: 25.0, height: 2.0),
),
new Text(
"26号+10个字符间隔",
style: new TextStyle(fontSize: 26.0, letterSpacing: 10.0),
),2.2、textAlign
文本对齐方式
textAlign属性值 | 含义 |
|---|---|
TextAlign.left | 居左对齐 |
TextAlign.right | 居右对齐 |
TextAlign.center | 居中对齐 |
TextAlign.justify | 两端对齐 |
TextAlign.start | 向开始位置对齐 |
TextAlign.end | 向结束位置对齐 |
示例：
new Text(
" 对齐方式：向右对齐 TextAlign.right ",
style: new TextStyle(color: Colors.blue[400], fontSize: 24.0),
textAlign: TextAlign.right,
),2.3、textDirection
文本方向
textDirection属性值 | 含义 |
|---|---|
TextDirection.ltr | 从左到右 |
TextDirection.rtl | 从右到左 |
示例：
new Text(
"文本方向：从右到左 TextDirection.rtl ",
style: new TextStyle(color: Colors.blue, fontSize: 20.0),
textDirection: TextDirection.rtl,
),2.4、softWrap
是否自动换行，若为false，文字将不考虑容器大小，单行显示，超出屏幕部分将默认截断处理
softWrap属性值 | 含义 |
|---|---|
true | 自动换行 |
false | 不自动换行，超出屏幕截断 |
2.5、overflow
当文字超出屏幕的时候，超出部分如何处理
overflow属性值 | 含义 |
|---|---|
TextOverflow.clip | 超出部分裁剪掉 |
TextOverflow.fade | 超出部分渐变隐藏 |
TextOverflow.ellipsis | 超出部分用...替代 |
示例：
new Text(
"单行显示，不换行。单行显示，不换行。 单行显示，不换行。",
style: new TextStyle(color: Colors.pink, fontSize: 20.0),
overflow: TextOverflow.ellipsis, //超出用...代替
softWrap: false, //不换行
)2.6、maxLines
最大行数设置
如果softWrap和maxLines同时赋值，以maxLines为最高优先级。
new Text(
"单行显示，不换行。单行显示，不换行。 单行显示，不换行。",
style: new TextStyle(color: Colors.pink, fontSize: 20.0),
overflow: TextOverflow.ellipsis, //超出用...代替
softWrap: false,//不换行
maxLines: 2,
)2.7、textScaleFactor
字体显示倍率。
假设有字体大小是20.0。将字体大小设置成10.0，倍率为2，可以实现相同效果。
new Text(
"字体10，倍率为2",
style: new TextStyle(color: Colors.pink, fontSize: 10.0),
textScaleFactor: 2.0,
)2.8、Text.rich& TextSpan
多样式文本（富文本）。
TextSpan可以控制一个Text内拥有不同样式和不同点击事件。类似于Android里的SpannableString
示例：
new Text.rich(
new TextSpan(
text: "one",
style: new TextStyle(
fontSize: 20.0,
color: Colors.green,
decoration: TextDecoration.underline,
decorationColor: Colors.purple,
decorationStyle: TextDecorationStyle.wavy,
),
children: [
new TextSpan(
text: "TWO",
style: new TextStyle(
fontSize: 30.0,
color: Colors.green,
decoration: TextDecoration.lineThrough,
decorationColor: Colors.purple,
decorationStyle: TextDecorationStyle.wavy,
),
recognizer: new TapGestureRecognizer()
..onTap = () {
var alert = new AlertDialog(
title: new Text("Title"),
content: new Text("TWO"),
);
showDialog(context: context, child: alert);
}),
new TextSpan(
text: "THREE",
style: new TextStyle(
fontSize: 20.0,
color: Colors.black12,
decoration: TextDecoration.overline,
decorationColor: Colors.redAccent,
decorationStyle: TextDecorationStyle.dashed,
),
recognizer: new TapGestureRecognizer()
..onTap = () {
var alert = new AlertDialog(
title: new Text("Title"),
content: new Text("THREE"),
);
showDialog(context: context, child: alert);
}),
new TextSpan(
text: "FOUR",
style: new TextStyle(
fontSize: 40.0,
color: Colors.green,
decoration: TextDecoration.lineThrough,
decorationColor: Colors.yellowAccent,
decorationStyle: TextDecorationStyle.dotted,
),
recognizer: new TapGestureRecognizer()
..onTap = () {
var alert = new AlertDialog(
title: new Text("Title"),
content: new Text("FOUR"),
);
showDialog(context: context, child: alert);
})
],
recognizer: new TapGestureRecognizer()
..onTap = () {
var alert = new AlertDialog(
title: new Text("Title"),
content: new Text("one"),
);
showDialog(context: context, child: alert);
}),
)3、综合示例
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
class TextDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("文本控件"),
),
body: new Column(
children: <Widget>[
new Text(
"红色+黑色删除线+20号",
style: new TextStyle(
color: const Color(0xffff0000),
decoration: TextDecoration.lineThrough,
decorationColor: const Color(0xff000000),
fontSize: 20.0),
),
new Text(
"橙色+下划线+21号",
style: new TextStyle(
color: const Color(0xffff9900),
decoration: TextDecoration.underline,
decorationColor: const Color(0xffff9900),
fontSize: 21.0),
),
new Text(
"虚线上划线+22号+倾斜",
style: new TextStyle(
decoration: TextDecoration.overline,
decorationStyle: TextDecorationStyle.dashed,
fontSize: 22.0,
fontStyle: FontStyle.italic),
),
new Text(
"serif字体+23号",
style: new TextStyle(
fontFamily: "serif",
fontSize: 23.0,
),
),
new Text(
"monospace字体+24号+加粗",
style: new TextStyle(
fontFamily: 'monospace',
fontSize: 24.0,
fontWeight: FontWeight.bold,
),
),
new Text(
"天蓝色+25号+两行跨度",
style:
new TextStyle(color: Colors.cyan, fontSize: 25.0, height: 2.0),
),
new Text(
"26号+10个字符间隔",
style: new TextStyle(fontSize: 26.0, letterSpacing: 10.0),
),
// new Text(
// " 对齐方式：向右对齐 TextAlign.right ",
// style: new TextStyle(color: Colors.blue[400], fontSize: 24.0),
// textAlign: TextAlign.right,
// ),
// new Text(
// "对齐方式：向左对齐 TextAlign.left ",
// style: new TextStyle(color: Colors.blue[200], fontSize: 24.0),
// textAlign: TextAlign.left,
// ),
// new Text(
// "对齐方式：居中对齐 TextAlign.center ",
// style: new TextStyle(color: Colors.blue[400], fontSize: 24.0),
// textAlign: TextAlign.center,
// ),
// new Text(
// "对齐方式： 两端对齐 TextAlign. justify ",
// style: new TextStyle(color: Colors.blue[200], fontSize: 24.0),
// textAlign: TextAlign.justify,
// ),
// new Text(
// "文本方向：从右到左 TextDirection.rtl ",
// style: new TextStyle(color: Colors.blue, fontSize: 20.0),
// textDirection: TextDirection.rtl,
// ),
// new Text(
// "文本方向：从左到右 TextDirection.ltr ",
// style: new TextStyle(color: Colors.blue, fontSize: 20.0),
// textDirection: TextDirection.ltr,
// ),
new Text(
"单行显示，不换行。单行显示，不换行。 单行显示，不换行。",
style: new TextStyle(color: Colors.pink, fontSize: 20.0),
overflow: TextOverflow.ellipsis, //超出用...代替
softWrap: false, //不换行
// maxLines: 2, //如果softWrap和maxLines同时赋值，以maxLines为最高优先级。
),
new Text(
"字体10，倍率为2",
style: new TextStyle(color: Colors.yellow[700], fontSize: 10.0),
textScaleFactor: 2.0,
),
new Text.rich(
new TextSpan(
text: "one",
style: new TextStyle(
fontSize: 20.0,
color: Colors.green,
decoration: TextDecoration.underline,
decorationColor: Colors.purple,
decorationStyle: TextDecorationStyle.wavy,
),
children: [
new TextSpan(
text: "TWO",
style: new TextStyle(
fontSize: 30.0,
color: Colors.green,
decoration: TextDecoration.lineThrough,
decorationColor: Colors.purple,
decorationStyle: TextDecorationStyle.wavy,
),
recognizer: new TapGestureRecognizer()
..onTap = () {
var alert = new AlertDialog(
title: new Text("Title"),
content: new Text("TWO"),
);
showDialog(context: context, child: alert);
}),
new TextSpan(
text: "THREE",
style: new TextStyle(
fontSize: 20.0,
color: Colors.black12,
decoration: TextDecoration.overline,
decorationColor: Colors.redAccent,
decorationStyle: TextDecorationStyle.dashed,
),
recognizer: new TapGestureRecognizer()
..onTap = () {
var alert = new AlertDialog(
title: new Text("Title"),
content: new Text("THREE"),
);
showDialog(context: context, child: alert);
}),
new TextSpan(
text: "FOUR",
style: new TextStyle(
fontSize: 40.0,
color: Colors.green,
decoration: TextDecoration.lineThrough,
decorationColor: Colors.yellowAccent,
decorationStyle: TextDecorationStyle.dotted,
),
recognizer: new TapGestureRecognizer()
..onTap = () {
var alert = new AlertDialog(
title: new Text("Title"),
content: new Text("FOUR"),
);
showDialog(context: context, child: alert);
})
],
recognizer: new TapGestureRecognizer()
..onTap = () {
var alert = new AlertDialog(
title: new Text("Title"),
content: new Text("one"),
);
showDialog(context: context, child: alert);
}),
)
],
),
);
}
}
void main() {
runApp(new MaterialApp(
title: "文本案例",
theme: new ThemeData(primaryColor: Colors.deepOrangeAccent),
home: new TextDemo(),
));
}
参考资料： https://blog.csdn.net/chunchun1230/article/details/82458655 https://blog.csdn.net/poorkick/article/details/80426578
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019年08月16日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
💥开发者 MCP广场重磅上线！
精选全网热门MCP server，让你的AI更好用 🚀
腾讯云开发者
