Flutter實戰】文字元件及五大案例
阿新 • • 發佈：2020-06-11
> 老孟導讀：大家好，這是【Flutter實戰】系列文章的第二篇，這一篇講解文字元件，文字元件包括文字展示元件（Text和RichText）和文字輸入元件（TextField），基礎用法和五個案例助你快速掌握。
> 第一篇連結：[【Flutter實戰】移動技術發展史](https://juejin.im/post/5edec7c7f265da771b2fee5b)
### Text
Text是顯示文字的元件，最常用的元件，沒有之一。基本用法如下：
```dart
Text('老孟')
```
**注意：Text元件一定要包裹在Scaffold元件下，否則效果如下：**
文字的樣式在`style`中設定，型別為`TextStyle`，`TextStyle`中包含很多文字樣式屬性，下面介紹一些常用的。
設定文字大小和顏色：
```dart
Text('老孟',style: TextStyle(color: Colors.red,fontSize: 20),),
```
上面黑色的字型為沒有設定的效果，作為對比。
設定字型粗細：
```dart
Text('老孟',style: TextStyle(fontWeight: FontWeight.bold))
```
字型粗細共有9個級別，為`w100`至`w900`，**FontWeight.bold**是`w700`。
設定斜體：
```dart
Text('老孟',style: TextStyle(fontStyle: FontStyle.italic,))
```
設定自定義的字型：
1. 首先下載字型庫（比如中華字型庫）
2. 將字型檔案拷貝的專案中，一般目錄是：assets/fonts/，assets和fonts都需要手動建立，此目錄不是必須的，而是約定俗成，資源一般都放在assets目錄下。
3. 配置`pubspec.yaml`：
```dart
fonts:
- family: maobi
fonts:
- asset: assets/fonts/maobi.ttf
```
maobi：是自己對當前字型的命名，有意義即可。
asset：字型檔案的目錄。
使用：
```dart
Text('老孟', style: TextStyle(fontFamily: 'maobi',)),
```
設定對齊方式：
```dart
Container(
height: 100,
width: 200,
color: Colors.blue.withOpacity(.4),
child: Text('老孟', textAlign: TextAlign.center),
),
```
`textAlign`只是控制水平方向的對齊方式，值說明如下：
- left：左對齊
- right：右對齊
- center：居中
- justify：兩端對齊，此屬性中文存在bug（Flutter版本：1.17.3）也可以在[官方issue中關注此問題](https://github.com/flutter/flutter/issues/35734)
- start：前端對齊，和`TextDirection`屬性有關，如果設定`TextDirection.ltr`，則左對齊，設定`TextDirection.rtl`則右對齊。
- end：末端對齊，和`TextDirection`屬性有關，如果設定`TextDirection.ltr`，則右對齊，設定`TextDirection.rtl`則左對齊。
設定文字自動換行：
```dart
Container(
height: 100,
width: 200,
color: Colors.blue.withOpacity(.4),
child: Text('老孟，專注分享Flutter技術和應用實戰',softWrap: true,),
)
```
文字超出範圍時的處理：
```dart
Container(
height: 100,
width: 200,
color: Colors.blue.withOpacity(.4),
child: Text('老孟，專注分享Flutter技術和應用實戰',overflow: TextOverflow.ellipsis,),
)
```
溢位的處理方式：
- clip：直接裁剪。
- fade：越來越透明。
- ellipsis：省略號結尾。
- visible：依然顯示，此時將會溢位父元件。
設定全域性字型樣式：
在`MaterialApp`的`theme`中設定如下
```dart
MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
...
textTheme: TextTheme(
bodyText2: TextStyle(color: Colors.red,fontSize: 24),
)
),
home: Scaffold(
body: TextDemo(),
),
)
```
Text元件預設為紅色，
```dart
Text('老孟'),
Text('老孟',style: TextStyle(color: Colors.blue,fontSize: 20),),
```
### RichText
RichText的屬性和Text基本一樣，使用如下：
```dart
RichText(
text: TextSpan(
style: DefaultTextStyle.of(context).style,
children: