序言
之前說會給大家一一講解 Flutter 中的元件，今天我們們就從 Text 元件開始，無圖言X，先上圖：
Text元件的API
我們先來看一下 Text 元件的構造方法
class Text extends StatelessWidget {
const Text(this.data, {
Key key,
this.style,
this.textAlign,
this.textDirection,
this.locale,
this.softWrap,
this.overflow,
this.textScaleFactor,
this.maxLines,
this.semanticsLabel,
}) : assert(data != null),
textSpan = null,
super(key: key);
const Text.rich(this.textSpan, {
Key key,
this.style,
this.textAlign,
this.textDirection,
this.locale,
this.softWrap,
this.overflow,
this.textScaleFactor,
this.maxLines,
this.semanticsLabel,
}): assert(textSpan != null),
data = null,
super(key: key);
}
複製程式碼構造方法有兩個，一個是預設的 Text 樣式，一個是現實豐富 Text.rich 樣式，這樣解釋大家應該能猜得到就和 Android 中的 SpannableString 一樣，下面來看一下 Text 元件的一些 API ：
| API名稱 | 功能 |
|---|---|
| textAlign | 文字對齊方式（center居中，left左對齊，right右對齊，justfy兩端對齊） |
| textDirection | 文字方向（ltr從左至右，rtl從右至左） |
| softWare | 是否自動換行（true自動換行，false單行顯示，超出螢幕部分預設截斷處理） |
| overflow | 文字超出螢幕之後的處理方式（clip裁剪，fade漸隱，ellipsis省略號） |
| textScaleFactor | 字型顯示倍率 |
| maxLines | 文字顯示最大行數 |
| style | 字型的樣式設定 |
下面是 TextStyle 的 API ：
| API名稱 | 功能 |
|---|---|
| decoration | 文字裝飾線（none沒有線，lineThrough刪除線，overline上劃線，underline下劃線） |
| decorationColor | 文字裝飾線顏色 |
| decorationStyle | 文字裝飾線風格（[dashed,dotted]虛線，double兩根線，solid一根實線，wavy波浪線） |
| wordSpacing | 單詞間隙（如果是負值，會讓單詞變得更緊湊） |
| letterSpacing | 字母間隙（如果是負值，會讓字母變得更緊湊） |
| fontStyle | 文字樣式（italic斜體，normal正常體） |
| fontSize | 文字大小 |
| color | 文字顏色 |
| fontWeight | 字型粗細（bold粗體，normal正常體） |
還有一點需要注意的是，在 Flutter 中，並不是每個 Widget 都有點選事件，比如 Text 就沒有，這時候你需要用一個 GestureDetector 元件包住 Text 元件，然後實現它裡面的 onTap() 事件，詳細看下面程式碼：
class _TextViewWidget extends State<TextViewWidget> {
@override
Widget build(BuildContext context) {
return new Column(
children: <Widget>[
Text('什麼也不設定'),
Padding(
padding: const EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 0.0),
child: Text(
'設定換行設定換行設定換行設定換行設定換行設定換行設定換行設定換行設定換行設定換行設定換行',
//是否自動換行 false文字不考慮容器大小，單行顯示，超出螢幕部分將預設截斷處理
softWrap: true,
),
),
Padding(
padding: const EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 0.0),
child: Text(
'設定超出螢幕之後的顯示規則設定超出螢幕之後的顯示規則設定超出螢幕之後的顯示規則設定超出螢幕之後的顯示規則',
//文字超出螢幕之後的處理方式 TextOverflow.clip剪裁 TextOverflow.fade 漸隱 TextOverflow.ellipsis省略號
overflow: TextOverflow.ellipsis,
),
),
Padding(
padding: const EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 0.0),
child: Text(
'設定最大顯示行數設定最大顯示行數設定最大顯示行數設定最大顯示行數設定最大顯示行數設定最大顯示行數設定最大顯示行數',
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
),
Padding(
padding: const EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 0.0),
child: Text(
'文字方向 sasasasasasasasasasasasasasasasasasasasasasa bdbdbdbdbdbdbdbdbdbdbdb',
//TextDirection.ltr從左至右，TextDirection.rtl從右至左
textDirection: TextDirection.rtl,
),
),
Padding(
padding: const EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 0.0),
child: Text(
'文字對齊方式 sasasasasasasasasasasasasasasasasasasasasasa bdbdbdbdbdbdbdbdbdbdbdb',
//TextAlign.left左對齊，TextAlign.right右對齊，TextAlign.center居中對齊，TextAlign.justfy兩端對齊
textAlign: TextAlign.center,
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 0.0),
child: Text(
'設定顏色和大小',
style: TextStyle(
color: const Color(0xfff2c2b2),
fontSize: 17,
),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 0.0),
child: Text(
'設定粗細和斜體',
style: TextStyle(
//字型粗細，粗體和正常
fontWeight: FontWeight.bold,
//文字樣式，斜體和正常
fontStyle: FontStyle.italic,
),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 0.0),
child: Text(
'設定文字裝飾',
style: TextStyle(
//none無文字裝飾，lineThrough刪除線，overline文字上面顯示線，underline文字下面顯示線
decoration: TextDecoration.underline,
decorationColor: Colors.red,
decorationStyle: TextDecorationStyle.wavy
),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 0.0),
child: Text(
'單詞間隙 hello world i am jack',
style: TextStyle(
wordSpacing: 10.0,
),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 0.0),
child: Text(
'字母間隙 hello world',
style: TextStyle(
letterSpacing: 10.0,
),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 0.0),
child: GestureDetector(
onTap: () {
print("點選了按鈕");
},
child: Text(
'設定文字點選事件',
style: TextStyle(
color: Colors.blue,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic,
),
),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 0.0),
child: Text.rich(
new TextSpan(
text: 'Text.rich',
style: new TextStyle(
color: Colors.yellow,
fontSize: 13,
decoration: TextDecoration.none),
children: <TextSpan>[
new TextSpan(
text: '拼接1',
style: new TextStyle(
color: Colors.blue,
fontSize: 14,
decoration: TextDecoration.none)),
new TextSpan(
text: '拼接2',
style: new TextStyle(
color: Colors.black,
fontSize: 15,
decoration: TextDecoration.none)),
new TextSpan(
text: '拼接3',
style: new TextStyle(
color: Colors.red,
fontSize: 16,
decoration: TextDecoration.none)),
new TextSpan(
text: '拼接4',
style: new TextStyle(
color: Colors.grey,
fontSize: 17,
decoration: TextDecoration.none)),
]),
),
)
],
);
}
}
複製程式碼程式碼已上傳至Github
公眾號
歡迎關注我的個人公眾號【IT先森養成記】，專注大前端技術分享，包含Android，Java，Kotlin，Flutter，HTML，CSS，JS等技術；在這裡你能得到的不止是技術上的提升，還有一些學習經驗以及志同道合的朋友，趕快加入我們，一起學習，一起進化吧！！！