flutter應用開發中文本樣式 TextStyle 篇

題記
—— 執劍天涯，從你的點滴積累開始，所及之處，必精益求精，便是折騰每一天。

重要消息

• 精通點的能夠查看這裏 精述
• Flutter 從入門實踐到開發一個APP之UI基礎篇 視頻
• flutter從入門 到精通 系列文章

---

一句話描述 TextStyle ，TextStyle 是用來設置 Text、TextFeild 中文本的樣式的。

---

TextField 系列文章

• TextField的基本使用以及TextField經常使用屬性精講《點擊查看詳情》
• TextField 焦點獲取控制篇《點擊查看詳情》
• TextField 輸入文本樣式 TextStyle 篇《正是本文章了》
• TextField 輸入文本 textAlign 對齊分析篇《點擊查看詳情》
• TextField 輸入文本 decoration 配置邊框樣式以及提示文本分析篇《點擊查看詳情》
• TextField TextEditingController 分析篇《點擊查看詳情》

1 引言

在 flutter應用程序開發中，TextField 組件用於輸入文本，Text 組件用於顯示文本。

文本輸入框 TextField 的 decoration 設置
InputDecoration 來配置不一樣的邊框樣式與提示文本文字等，經過 style 屬性設置 TextStyle 來配置輸入文本的樣式。

用於文本顯示的組件 Text 一樣也是經過 style 屬性來設置 TextStyle 樣式來配置顯示文本的樣式的。

2 TextStyle 的經常使用屬性配置

TextStyle buildCommonStyle() { 
 
   
    return TextStyle(
      textBaseline: TextBaseline.alphabetic,
      ///設置文字的顏色
      color: Colors.deepPurple,
      ///設置文字的大小
      fontSize: 16.0,
      ///用設置 Text 的線
      /// TextDecoration.none 沒有
      /// TextDecoration.underline 下劃線
      /// TextDecoration.overline 上劃線
      /// TextDecoration.lineThrough 刪除線
      decoration: TextDecoration.none,
      /// 設置下劃線的顏色
      decorationColor: Colors.green,
      /// 設置下劃線的樣式
      /// TextDecorationStyle.dashed 設置爲虛線
      /// TextDecorationStyle.solid 設置爲實線
      /// TextDecorationStyle.double 兩條實線
      /// TextDecorationStyle.wavy 波浪線
      decorationStyle: TextDecorationStyle.wavy,
      ///設置文字爲粗體
      /// FontWeight.bold 粗體
      fontWeight: FontWeight.w600,
      ///設置 斜體
      fontStyle: FontStyle.normal,
      ///用來設置 單字之間的距離
      letterSpacing: 1.0,
      ///用來設置 單詞之間的距離
      wordSpacing: 2.0,
      ///控制行高 倍數（默認行高的倍數）乘以fontSize作爲行高
      height: 1.2,
      ///文本的背景顏色
      backgroundColor: Colors.grey,
      ///Decoration背景設定
// shadows:
    );
  }

3 TextStyle textBaseline 屬性來配置文本基線

textBaseline 屬性設置或返回在繪製文本時的當前文本基線。

下面的圖示演示了 textBaseline 屬性支持的各類基線：

值	描述
alphabetic	默認。文本基線是普通的字母基線。
top	文本基線是 em 方框的頂端。。
hanging	文本基線是懸掛基線。
middle	文本基線是 em 方框的正中。
ideographic	文本基線是表意基線。
bottom	文本基線是 em 方框的底端。

在 flutter 應用開發中，TextStyle 中經過 textBaseline 來配製基線，不過在 flutter 中 的 TextStyle 只支持 alphabetic 與 ideographic 這兩種，通常這兩種取值對於文字的對齊來說只有微動，不一樣的是（可經過上圖觀察出來）alphabetic 設置的是文本基線參照英文，而 ideographic 設置的是文本基線參照中文。

flutter 中 textBaseline 的取值經過 TextBaseline 枚舉來定義。

/// A horizontal line used for aligning text.
enum TextBaseline { 
 
   
  /// The horizontal line used to align the bottom of glyphs for alphabetic characters.
  alphabetic,
  /// The horizontal line used to align ideographic characters.
  ideographic,
}

4 TextStyle fontWeight

屬性設置文本的粗細,在 flutter 應用開發中 ,fontWeight 的取值定義在 FontWeight 類中

值	描述
normal	默認值。定義標準的字符。
bold	定義粗體字符。
w100 - w900	定義由細到粗的字符。400 等同於 normal，而 700 等同於 bold。

本文同步分享在 博客「早起的年輕人」（CSDN）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。