Text Widgets是Flutter中一個十分常用的一個Widget，類似於Android平臺下的TextView，幾乎在每個App的UI中都會或多或少的出現它的身影，讓我們去一睹Text的風采吧！
簡單Text使用
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(home: new TextDemo()));
}
class TextDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Hello Flutter"),
),
body: new Center(
child: new Text(
"This is Flutter Widget ---- Text ，is a StatelessWidget",
style: new TextStyle(
fontStyle: FontStyle.italic,
fontSize: 20.0,
color: Colors.red,
),
textAlign: TextAlign.center,
)),
);
}
}
複製程式碼效果圖
Flutter中的Text Widget跟Android平臺下的TextView十分類似，我們也可以跟在原生Android平臺下一樣的指定Text顯示的樣式，文字大小，顏色等，來一起看一下Flutter中關於Text的構造方法，以及Text裡面有哪些屬性可供開發者自己定製。
const Text(this.data, { //Text顯示的內容
Key key,
this.style, //Text顯示的樣式
this.textAlign,//文字應該如何水平對齊,TextAlign.start,end 或者center
this.textDirection, //文字方向,TextDirection.ltr\TextDirection.rtl
this.locale,
this.softWrap, //是否自動換行，若為false，文字將不考慮容器大小，單行顯示，超出螢幕部分將預設截斷處理
this.overflow, //當文字超出螢幕的時候，如何處理,TextOverflow.clip(裁剪)\TextOverflow.fade(漸隱)\TextOverflow.ellipsis(省略號)
this.textScaleFactor, //字型顯示倍率，上面的例子使用的字型大小是20.0，將字型設定成10.0，然後倍率為2
this.maxLines, //最大行數設定
this.semanticsLabel,
})
複製程式碼上述的屬性中，我們使用的最多的就是TextStyle屬性了，比如我們想自己設定Text顯示的顏色，大小，或者下劃線、刪除線等等各種各樣的奇葩樣式都可以通過TextStyle來指定，看下TextStyle的構造方法說明：
const TextStyle({
this.inherit: true, // 為false的時候不顯示
this.color, // 顏色
this.fontSize, // 字號
this.fontWeight, // 字重，加粗也用這個欄位 FontWeight.w700
this.fontStyle, // FontStyle.normal FontStyle.italic斜體
this.letterSpacing, // 字元間距 就是單個字母或者漢字之間的間隔，可以是負數
this.wordSpacing, // 字間距 句字之間的間距
this.textBaseline, // 基線，兩個值，字面意思是一個用來排字母的，一人用來排表意字的（類似中文）
this.height, // 當用來Text控制元件上時，行高（會乘以fontSize,所以不以設定過大）
this.decoration, // 新增上劃線，下劃線，刪除線
this.decorationColor, // 劃線的顏色
this.decorationStyle, // 這個style可能控制畫實線，虛線，兩條線，點, 波浪線等
this.debugLabel,
String fontFamily, // 字型
String package,
})
複製程式碼TextStyle裡面的樣式我就不逐個為大家貼效果圖了，讀者可自行模擬測試下期基本使用者，我貼上我的全部樣例程式碼跟統一的效果圖供大家參考。
效果圖
上圖的完整示例程式碼
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(home: new TextDemo()));
}
class TextDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Hello Flutter"),
),
body: new Center(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new Text(
'inherit: 為 false 的時候不顯示',
style: new TextStyle(
fontSize: 18.0,
color: Colors.redAccent,
inherit: true,
),
),
new Text(
'color/fontSize: 字型顏色，字號等',
style: new TextStyle(
color: Color.fromARGB(255, 150, 150, 150),
fontSize: 22.0,
),
),
new Text(
'fontWeight: 字重',
style: new TextStyle(
fontSize: 18.0,
color: Colors.redAccent,
fontWeight: FontWeight.w700),
),
new Text(
'fontStyle: FontStyle.italic 斜體',
style: new TextStyle(
fontStyle: FontStyle.italic,
),
),
new Text(
'letterSpacing: 字元間距',
style: new TextStyle(
letterSpacing: 10.0,
// wordSpacing: 15.0
),
),
new Text(
'wordSpacing: 字或單詞間距',
style: new TextStyle(
// letterSpacing: 10.0,
wordSpacing: 15.0),
),
new Text(
'textBaseline:這一行的值為TextBaseline.alphabetic',
style: new TextStyle(textBaseline: TextBaseline.alphabetic),
),
new Text(
'textBaseline:這一行的值為TextBaseline.ideographic',
style: new TextStyle(textBaseline: TextBaseline.ideographic),
),
new Text('height: 用在Text控制元件上的時候，會乘以fontSize做為行高,所以這個值不能設定過大',
style: new TextStyle(
height: 1.0,
)),
new Text('decoration: TextDecoration.overline 上劃線',
style: new TextStyle(
fontSize: 18.0,
color: Colors.redAccent,
decoration: TextDecoration.overline,
decorationStyle: TextDecorationStyle.wavy)),
new Text('decoration: TextDecoration.lineThrough 刪除線',
style: new TextStyle(
decoration: TextDecoration.lineThrough,
decorationStyle: TextDecorationStyle.dashed)),
new Text('decoration: TextDecoration.underline 下劃線',
style: new TextStyle(
fontSize: 18.0,
color: Colors.redAccent,
decoration: TextDecoration.underline,
decorationStyle: TextDecorationStyle.dotted)),
],
),
));
}
}
複製程式碼