Flutter Text(文本控件)
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
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Fix SSH客户端登录会话超时设置
- JAVA的泛型与反射的联合应用
- 专项测试实战 | 如何测试 App 流畅度(基于 FPS 和丢帧率)
- 计算上传文件的存放路径
- 按照list中实体类的某一属性排序
- java邮件开发
- java计算某日期之后的日期
- 文件上传之Html5 + jQuery上传、asp.net web api接收
- Struts2自定义结果视图(servlet验证码)
- jQuery Ajax传递数组到asp.net web api参数为空
- asp.net web api集成微信服务(使用Senparc微信SDK)
- asp.net web api添加统一异常处理
- .NET HttpClient扩展
- md5和base64加密解密
- asp.net web api添加自定义认证