Text最基本的用法有這些：
- 字型
- 顔色，字型，大小，背景
- 文本的對齊方式，可以選擇左對齊、右對齊還是居中對齊
- TextSpan，它代表文本的一個“片段”
- 設定某一個節點處設定一個預設的文本樣式
- 文本點選事件
- 富文本的顯示 ,文字，陰影
基本使用
Text 用來顯示單一樣式的文本字元串，
Container(
child: Text(
"多行文本顯示時，隻顯示 maxLines，多餘文本通過 overflow 處理 " * 7,
///overflow：文本溢出時，多餘文本的處理方式，可以配合 maxLines 使用。
overflow: TextOverflow.ellipsis,
///當文本跨行，頁面顯示的最大行數。
maxLines: 1,
),
),
Container(
child: Text(
"文字縮放倍數",
/// textScaleFactor：相當于目前字型大小的縮放比例，它是設定 fontSize 屬性的快捷方式。
textScaleFactor: 1.5,
),
)
字型
如果需要使用自定義字型，則需要在項目中的fonts檔案夾下放置字型檔案，然後在配置檔案pubspec.yaml中進行配置：
flutter: fonts:
- family: Raleway
fonts:
- asset: fonts/Raleway-Regular.ttf
- asset: fonts/Raleway-Italic.ttf
style: italic
- family: RobotoMono
fonts:
- asset: fonts/RobotoMono-Regular.ttf
- asset: fonts/RobotoMono-Bold.ttf
weight: 700
通過主題設定字型：
MaterialApp(
title: 'Custom Fonts',
// Set Raleway as the default app font.
theme: ThemeData(fontFamily: 'Raleway'),
home: MyHomePage(),
);
單獨設定字型
Text(
'Roboto Mono sample',
style: TextStyle(fontFamily: 'RobotoMono'),
);
style 屬性用來指定文本的顯示方式，例如顔色，字型，大小，背景，裝飾等等
Container(
child: Text(
"textStyle 的用法 " * 2,
style: TextStyle(
///color：文本顔色。文本的前景色，不能與 foreground 共同設定。
color: Colors.deepOrange,
///fontSize：字型大小( pt、sp )，預設為 14 個邏輯像素( 14pt、14sp )。
fontSize: 20.0,
///height:指定行高，但它并不是一個絕對值
height: 2.0,
///fontFamily：使用的字型名稱
fontFamily: "MicroSoft Yahei",
///fontStyle：字型的顯示方式，如 FontStyle.italic 為斜體
fontStyle: FontStyle.italic,
///fontWeight：繪制文本時使用的字型粗細
fontWeight: FontWeight.bold,
///background：文本背景色
background: new Paint()..color = Colors.yellow,
/*decoration：繪制文本裝飾
TextDecoration.underline：下劃線
TextDecoration.overline：上劃線
TextDecoration.lineThrough：删除線
TextDecoration.none：無（預設）*/
decoration: TextDecoration.underline,
/*decorationStyle：繪制文本裝飾的樣式
TextDecorationStyle.dashed：一條虛線（短橫線）
TextDecorationStyle.dotted：一條虛線 （點）
TextDecorationStyle.solid：一條實線
TextDecorationStyle.double：兩條實線
TextDecorationStyle.wavy：一條波浪線*/
decorationStyle: TextDecorationStyle.dashed,
),
)),
Container(
padding: EdgeInsets.only(top: 80),
child: Text(
'單行文字間隔，中文無效。How are you',
///wordSpacing：單行文字間隔，中文無效
style: TextStyle(wordSpacing: 20),
)),
Container(
padding: EdgeInsets.only(top: 80),
child: Text(
'文本字與字之間間隔。How are you',
///letterSpacing：文本字與字之間間隔
style: TextStyle(letterSpacing: 20),
))
textAlign
文本的對齊方式，可以選擇左對齊、右對齊還是居中對齊：
Container(
width: 300.0,
child: Text(
"這裡示範 textAlign.left 的用法 ",
textAlign: TextAlign.left,
),
),
Container(
width: 300.0,
child: Text(
"這裡示範 textAlign.center 的用法 ",
textAlign: TextAlign.center,
),
),
Container(
width: 300.0,
child: Text(
"這裡示範 textAlign.right 的用法 ",
textAlign: TextAlign.right,
),
),
textSpan
在上面的例子中，Text 的所有文本内容隻能按同一種樣式，如果我們需要對一個 Text 内容的不同部分按照不同的樣式顯示，這時就可以使用 TextSpan，它代表文本的一個“片段”。
Container(
child: Text.rich(TextSpan(children: [
TextSpan(text: "Home:"),
TextSpan(
text: "https://blog.csdn.net/timtian008",
style: TextStyle(color: Colors.blue),
),
TextSpan(
text: " 請點選連結",
style: TextStyle(
color: Colors.red,
fontStyle: FontStyle.italic,
),
),
]))),
DefaultTextStyle
在 widget 樹中，文本的樣式預設是可以被繼承的，是以，如果在 widget 樹的某一個節點處設定一個預設的文本樣式，那麼該節點的子樹中所有文本都會預設使用這個樣式，而 DefaultTextStyle 正是用于設定預設文本樣式的。
Container(
child: DefaultTextStyle(
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.red,
fontSize: 20.0,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
width: double.infinity,
child: Text("這裡示範 DefaultTextStyle 的用法"),
),
Text("這裡示範 DefaultTextStyle 的用法"),
Text(
"這裡沒有繼承預設字型樣式",
style: TextStyle(
inherit: false,
color: Colors.grey,
),
),
],
),
)),
Text的點選事件
可以使用GestureDetector，也可以使用InkWell：
InkWell(
child: Text(
"Default Text",
),
onTap: (){print("click");},
)
**富文本 **
可以使用Text.rich/ RichText + TextSpan來顯示富文本文字陰影
文字的陰影可以通過TextStyle中的shadows屬性進行控制：
Container(
child: Text.rich(
TextSpan(
text: "plain text ",
children: <TextSpan>[
TextSpan(
text: "color",
style: TextStyle(color: Colors.pinkAccent)),
TextSpan(text: "fontSize", style: TextStyle(fontSize: 28)),
TextSpan(
text: "decoration",
style: TextStyle(decoration: TextDecoration.lineThrough)),
],
),
)),
Container(
child: RichText(
text: TextSpan(
children: <TextSpan>[
TextSpan(
text: "Text 1",
style: TextStyle(color: Colors.blueAccent)),
TextSpan(
text: "Text 2",
style: TextStyle(color: Colors.pinkAccent, fontSize: 28)),
],
)),
)