Flutter組件學習（一）—— Text組件

序言

以前說會給你們一一講解 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等技術；在這裏你能獲得的不止是技術上的提高，還有一些學習經驗以及志同道合的朋友，趕快加入咱們，一塊兒學習，一塊兒進化吧！！！