作者 | 弗拉德
來源 | 弗拉德（公眾號：fulade_me)

Text

我們先來看Text的構造函數都有哪些參數：

const Text( 
    this.data, { 
    //data 就是我們需要展示的文字 是字符串類型，這個是必傳字段，其他的都是可選
    Key key,    
    //widget的標識
    this.style, 
    //文本樣式，類型是TextStyle
    this.strutStyle, 
    //用來設置最小行高的參數
    this.textAlign, 
    //文本的對齊方式，類型是TextAlign
    this.textDirection, 
    // 文字方向，類型是TextDirection
    this.locale, 
    //選擇用户語言和格式的標識符，類型是Locale，主要用於國際化
    this.softWrap, 
    //bool 類型 ，false標識文本只有一行，水平方向無限
    this.overflow, 
    //超出顯示區域後的展示方式，類型是TextOverflow
    this.textScaleFactor,
    //double類型 表示文本相對於當前字體的縮放係數，默認為1.0
    this.maxLines,
    // int 類型，顯示的最大行數
    this.semanticsLabel, 
    //String 類型，給文本加上一個語義標籤
    this.textWidthBasis,
    //一行或多行文本寬度的不同方式，類型是TextWidthBasis
  }) 

Text我們重點介紹下面幾個參數:data、style、textAlign、maxLines、overflow。
1. 最簡單的示例

  Text("Fulade");

2. 放大和縮小

Text("文字放大1.5倍",textScaleFactor: 1.5);

textScaleFactor是縮放參數，默認是1.0，設置小於1的參數是縮小，設置大約1的參數是放大。
3. 居中、居左和居右

Text(
  "居右顯示" * 10,
  textAlign: TextAlign.right,
);

textAlign是位置參數，常見的枚舉值有TextAlign.right、TextAlign.left和TextAlign.center。
4. 單行顯示

Text(
  "最多一行顯示超過部分顯示..." * 10,
  maxLines: 1,
  overflow: TextOverflow.ellipsis,
);

maxLines表示文字需要幾行來顯示，如果超過了要顯示的行數，文字會被切斷。使用overflow來設置切斷文字的樣式，overflow有以下幾個枚舉值：

enum TextOverflow {
  clip,      //直接裁剪。
  fade,      // 漸變淡出
  ellipsis,  // 以省略號的方式
  visible,   // 依然顯示，此時將會溢出父組件
}

如果我們不設置maxLines，文字默認會換行，以全部都展示的方式來顯示。

以上四種樣式效果如下：

TextStyle

如果想要設置更復雜的文字樣式，我們需要傳入Text的style參數，style參數接收一個 TextStyle的對象，TextStyle可以幫助我們做很多事情。

5. 粗體

Text(
  "粗體",
  style: TextStyle(fontWeight: FontWeight.bold),
)

fontWeight用來設置粗體。FontWeight.bold默認是w700。
6. 顏色

Text(
  "紅色",
  style: TextStyle(color: Colors.red),
)

color參數用來設置顏色。
7. 字號

Text(
  "字號20",
  style: TextStyle(fontSize: 20),
)

fontSize用來設置字號。
8. 斜體

Text(
  "斜體",
  style: TextStyle(fontStyle: FontStyle.italic),
)

fontStyle可以用來設置斜體，FontStyle.italic表示斜體，默認是FontStyle.normal。

9. 背景顏色

Text(
  "背景顏色紅色",
  style: TextStyle(
      background: Paint()..color = Colors.red,
      color: Colors.blue),
)

background用來設置背景顏色，它接收一個Paint對象作為參數，Paint對象可以設置color屬性。
10. 刪除線

Text(
  "刪除線",
  style: TextStyle(
      decoration: TextDecoration.lineThrough,
      decorationColor: Colors.red),
)

decorationColor參數是設置刪除線的顏色，TextDecoration.lineThrough是刪除線的樣式。
11. 下劃線

Text(
  "下劃線",
  style: TextStyle(
    decoration: TextDecoration.underline,
  ),
);

下劃線的設置跟刪除線的設置基本一樣，只是枚舉值不同，下劃線使用的是TextDecoration.underline枚舉。

以上幾種樣式展示效果如下：

RichText 和 TextSpan

Flutter支持在一行文字裏面顯示不同顏色的文字，這裏我們需要用到RichText和 TextSpan。

12. 多彩文字

RichText(
  text: TextSpan(
    textAlign: TextAlign.center,
    text: "多彩文字：",
    style: TextStyle(color: Colors.black),
    children: <TextSpan>[
      TextSpan(
          text: "紅色、", style: TextStyle(color: Colors.red)),
      TextSpan(
          text: "藍色、", style: TextStyle(color: Colors.blue)),
      TextSpan(
          text: "綠色 ", style: TextStyle(color: Colors.green)),
    ],
  ),
);

TextSpan的參數children，可以是一個TextSpan對象的數組，這就比較有意思。每一個TextSpan都可以設置顏色和字體，這樣我們就可以組合成一個多彩的文字結構。同樣RichText也有textAlign參數，它是整個文字的位置參數。

13. 給文字添加點擊事件

RichText(
  text: TextSpan(
    text: "添加了手勢的文字: ",
    style: TextStyle(color: Colors.black),
    children: <TextSpan>[
      TextSpan(
        text: "點擊會輸出Log",
        style: TextStyle(color: Colors.blue),
        recognizer: TapGestureRecognizer()
          ..onTap = () {
            tapCount++;
            print("taped taped " + tapCount.toString());
          },
      ),
    ],
  ),
);

TextSpan可以給相應的文字添加手勢，這樣就可以滿足我們點擊某個文字觸發事件的需求，這在日常開發中非常有效。我們就不需要搞一些"文字+按鈕+文字+..."的這種組合了。
TextSpan的參數recognizer可以接收一個手勢參數，當然這裏的手勢不僅有點擊手勢，還有滑動手勢等等(具體的手勢功能我們後面會講到)。多種手勢更是滿足了我們更多的交互需求。

多彩文字和點擊時間如下圖：

想體驗點擊事件效果，可以到我的Github倉庫項目裏flutter_app->lib->routes->text_page.dart運行查看。

DefaultTextStyle

DefaultTextStyle是一個特殊的TextStyle。在DefaultTextStyle下面的所有子元素的文本樣式都繼承了DefaultTextStyle設置的文本樣式。因此，我們只需要定義一個DefaultTextStyle，其下的所有文本樣式都是該定義好的DefaultTextStyle的樣式。這樣就極大的方便我們來寫一些統一的樣式，而不需要每次都要寫繁瑣的設置樣式的代碼。

DefaultTextStyle(
  // 設置文本默認樣式
  style: TextStyle(
    color: Colors.red,
    fontSize: 20.0,
  ),
  textAlign: TextAlign.start,
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Text("DefaultTextStyle "),
      Text("DefaultTextStyle"),
      Text(
        "改變了的DefaultTextStyle",
        style: TextStyle(
            inherit: false, // 設置不再繼承默認樣式
            color: Colors.blue),
      ),
    ],
  ),
);

首先我們聲明瞭一個DefaultTextStyle的樣式，它是紅色的，字號是20。
注意:這裏有一個Text的inherit設置了false，只有設置了false才允許不繼承DefaultTextStyle的樣式。而其他的兩個Text對象，默認使用了DefaultTextStyle的樣式。

效果如下：

以上所有的代碼都在我的Github倉庫項目裏flutter_app->lib->routes->text_page.dart裏面，你可以下載下來運行並體驗。

運行效果圖如下：