Flutter手把手教程UI佈局和Widget——文本和樣式 Text Widget

做者 | 弗拉德
來源 | 弗拉德（公衆號：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裏面，你能夠下載下來運行並體驗。

運行效果圖以下：

---