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