Flutter系列之UI篇：文本顯示——Text，DefaultTextStyle

Text

Text繼承StatelessWidget,用來顯示文本,完整的構造器如下：

  const Text(
    this.data, {
    Key key,
    this.style,
    this.strutStyle,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
  }) : assert(
         data != null,
         'A non-null String must be provided to a Text widget.',
       ),
       textSpan = null,
       super(key: key);

設置顯示的文本

Text("Hello,world!")  

data爲構造方法的必含參數，指定要顯示的文本。

文本方向

Text(
    "大家好，我是朱志強！",
    textDirection: TextDirection.ltr,
  )

textDirection爲構造方法的可選參數，指定文本閱讀方向。只有兩個枚舉值：

enum TextDirection {
  //從右向左，right-to-left
  rtl,
  
  //從左向右，left-to-right
  ltr,
}

在Arabic（阿拉伯語）和Hebrew（希伯來語）中，文字是從右到左閱讀的。

另外，需要注意的是，雖然textDirection爲可選參數，但如果Text的祖先節點中不存在Directionality widget，textDirection參數必須指定，否則程序會拋出異常。
MaterialApp或WidgetsApp會在widget tree的上層節點中插入Directionalitywidget,當Text是二者的子孫節點時，可以不用指定textDirection。

文本對齊方式

Text(
    "大家好，我是朱志強！",
    textDirection: TextDirection.ltr,
    textAlign: TextAlign.center,
  )

textAlign爲構造方法的可選參數，指定文本對齊方式。枚舉值如下：

enum TextAlign {
  left,
  
  right,

  center,

  justify,

  start,
  
  end,
}

TextAlign.left，TextAlign.right，TextAlign.center好理解，我們說一下剩下三個。

• TextAlign.justify
  文本換行有兩種，一種是由於文本顯示不開而被迫換行，稱爲soft line break；另一種是使用換行符號(\n)主動換行，稱爲hard line break。
  soft line break換行模式下，有的時候每一行文本不一定充滿整行，TextAlign.justify意爲調整每行單詞間的間距，使每行充滿整行，注意只對soft line break模式的換行起作用。
  我們分別用TextAlign.left和TextAlign.justify模式顯示同一段文本，看一下TextAlign.justify的效果。

void main() {
 runApp(Center(
     child: Text(
         "When the aerials are down,and your spirit is covered with the snows of cynicism and the ice of pessimism,then you’ve grown old,even at 20,but as long as your aerials are up,to catch waves of optimism,there’s hope you may die young at 80.",
         textDirection: TextDirection.ltr,
         textAlign: TextAlign.left)));
}

void main() {
  runApp(Center(
      child: Text(
          "When the aerials are down,and your spirit is covered with the snows of cynicism and the ice of pessimism,then you’ve grown old,even at 20,but as long as your aerials are up,to catch waves of optimism,there’s hope you may die young at 80.",
          textDirection: TextDirection.ltr,
          textAlign: TextAlign.justify)));
}

• TextAlign.start
  當textDirection的值爲TextDirection.ltr時，TextAlign.start等價於TextAlign.left;
  當textDirection的值爲TextDirection.rtl時,TextAlign.start等價於TextAlign.right。
• TextAlign.end
  當textDirection的值爲TextDirection.ltr時，TextAlign.end等價於TextAlign.right;
  當textDirection的值爲TextDirection.rtl時,TextAlign.end等價於TextAlign.left。

是否允許軟換行

Text(
    "大家好，我是朱志強！",
    textDirection: TextDirection.ltr,
    softWrap: true,
  )

softWrap爲構造方法的可選參數，指定文本展示不開時，是否允許換行。

注意，這裏針對的是soft line break(展示不開，被迫換行),而不是hard line break(用換行符\n主動換行)。所以，當softWrap爲false時，文本的行數由文本包含的換行符決定（不考慮最大行數限制）。

最大行數限制

Text(
    "大家好，我是朱志強！",
    textDirection: TextDirection.ltr,
    maxLines: 3,
  )

maxLines爲構造方法的可選參數，指定文本顯示的最大行數。

文本溢出

Text(
    "大家好，我是朱志強！",
    textDirection: TextDirection.ltr,
    overflow: TextOverflow.ellipsis,
  )

overflow爲構造方法的可選參數，指定文本溢出後的處理方式，枚舉值如下：

enum TextOverflow {
  // 直接截斷丟棄
  clip,

  // 在末端顯示一小片不完全透明的遮罩
  fade,

  // 在末端用省略號表示
  ellipsis,

  // 越過文本widget的邊界顯示
  visible,
}

我們用四種效果分別展示同一段文本，並用紅線標出Text的區域：

• TextOverflow.clip
  
• TextOverflow.fade
  
• TextOverflow.ellipsis
  
• TextOverflow.visible
  

文本風格設置

Text(
      "大家好，我是朱志強！",
      textDirection: TextDirection.ltr,
      style: TextStyle(color: Colors.red, fontWeight: FontWeight.bold),
    )

style爲構造方法的可選參數，指定文本風格。TextStyle的構造方法如下：

  const TextStyle({
    this.inherit = true,
    this.color,
    this.backgroundColor,
    this.fontSize,
    this.fontWeight,
    this.fontStyle,
    this.letterSpacing,
    this.wordSpacing,
    this.textBaseline,
    this.height,
    this.locale,
    this.foreground,
    this.background,
    this.shadows,
    this.decoration,
    this.decorationColor,
    this.decorationStyle,
    this.decorationThickness,
    this.debugLabel,
    String fontFamily,
    List<String> fontFamilyFallback,
    String package,
  }) : fontFamily = package == null ? fontFamily : 'packages/$package/$fontFamily',
       _fontFamilyFallback = fontFamilyFallback,
       _package = package,
       assert(inherit != null),
       assert(color == null || foreground == null, _kColorForegroundWarning),
       assert(backgroundColor == null || background == null, _kColorBackgroundWarning);

字體顏色

Text(
    "大家好，我是朱志強！",
    textDirection: TextDirection.ltr,
    style: TextStyle(color: Color(0xFFFF0000)),
  )

color用來指定文本顏色

文字背景顏色

Text(
      "大家好，我是朱志強！",
      textDirection: TextDirection.ltr,
      style: TextStyle(backgroundColor: Colors.blue),
    )

backgroundColor用來指定文字背景顏色

字體大小

Text(
      "大家好，我是朱志強！",
      textDirection: TextDirection.ltr,
      style: TextStyle(fontSize: 18),
    )

fontSize用來指定文字大小

字體粗細

Text(
      "大家好，我是朱志強！",
      textDirection: TextDirection.ltr,
      style: TextStyle(fontWeight: FontWeight.bold),
    )

FontWeight中定義了9個等級的字體粗細度，

  /// Thin, the least thick
  static const FontWeight w100 = const FontWeight._(0);

  /// Extra-light
  static const FontWeight w200 = const FontWeight._(1);

  /// Light
  static const FontWeight w300 = const FontWeight._(2);

  /// Normal / regular / plain
  static const FontWeight w400 = const FontWeight._(3);

  /// Medium
  static const FontWeight w500 = const FontWeight._(4);

  /// Semi-bold
  static const FontWeight w600 = const FontWeight._(5);

  /// Bold
  static const FontWeight w700 = const FontWeight._(6);

  /// Extra-bold
  static const FontWeight w800 = const FontWeight._(7);

  /// Black, the most thick
  static const FontWeight w900 = const FontWeight._(8);

  /// The default font weight.
  static const FontWeight normal = w400;

  /// A commonly used font weight that is heavier than normal.
  static const FontWeight bold = w700;

其中，FontWeight.bold等價於FontWeight.w700,FontWeight.normal等價於FontWeight.w400。

斜體設置

Text(
      "大家好，我是朱志強！",
      textDirection: TextDirection.ltr,
      style: TextStyle(fontStyle: FontStyle.italic),
    )

fontStyle用來指定文字是否斜體，只有兩個枚舉值：

enum FontStyle {
  //正常
  normal,

  //斜體
  italic,
}

修飾線（下劃線、上劃線、刪除線）

Text(
    "大家好，我是朱志強！",
    textDirection: TextDirection.ltr,
    style: TextStyle(decoration: TextDecoration.underline),
  )

decoration用來指定文本的修飾線。預定義值如下：

  /// 不繪製修飾線
  static const TextDecoration none = const TextDecoration._(0x0);

  /// 繪製下劃線
  static const TextDecoration underline = const TextDecoration._(0x1);

  /// 繪製上劃線
  static const TextDecoration overline = const TextDecoration._(0x2);

  /// 繪製刪除線
  static const TextDecoration lineThrough = const TextDecoration._(0x4);

看一下效果：

還可以對修飾線進行組合，利用TextDecoration.combine(List<TextDecoration> decorations)方法，

Text(
    "大家好，我是朱志強。",
    textDirection: TextDirection.ltr,
    style: TextStyle(
        decoration: TextDecoration.combine(
            [TextDecoration.underline, TextDecoration.overline])),
  )

decorationColor用來指定修飾線的顏色，

Text("大家好，我是朱志強。",
        textDirection: TextDirection.ltr,
        style: TextStyle(
            decoration: TextDecoration.underline, decorationColor: Colors.red))

decorationStyle用來指定修飾線的風格，枚舉值如下：

enum TextDecorationStyle {
  //實線
  solid,

  //雙線
  double,

  //虛線，由點間隔而成
  dotted,

  //虛線，由短橫線間隔而成
  dashed,

  /// 波浪線
  wavy
}

Text("大家好，我是朱志強。",
        textDirection: TextDirection.ltr,
        style: TextStyle(
            decoration: TextDecoration.underline,
            decorationStyle: TextDecorationStyle.wavy))

decorationThickness用來指定修飾線的粗細,

Text("大家好，我是朱志強。",
      textDirection: TextDirection.ltr,
      style: TextStyle(
          decoration: TextDecoration.underline, decorationThickness: 2.0))

行風格

strutStyle爲構造方法的可選參數，用來指定行風格，如行高、行間距，構造器如下：

StrutStyle({
    String fontFamily,
    List<String> fontFamilyFallback,
    this.fontSize,
    this.height,
    this.leading,
    this.fontWeight,
    this.fontStyle,
    this.forceStrutHeight,
    this.debugLabel,
    String package,
  }) : fontFamily = package == null ? fontFamily : 'packages/$package/$fontFamily',
       _fontFamilyFallback = fontFamilyFallback,
       _package = package,
       assert(fontSize == null || fontSize > 0),
       assert(leading == null || leading >= 0),
       assert(package == null || (package != null && (fontFamily != null || fontFamilyFallback != null)));

行高

height用來指定行高，當值爲1時（默認值），表示爲默認行高，下面的代碼指定行高爲默認行高的兩倍。

Text(
    "大家好，我是朱志強。",
    textDirection: TextDirection.ltr,
    strutStyle: StrutStyle(height: 2),
  )

行間距

leading用來指定如外的行間距，下面的代碼指定行之間如外增加一倍的行間距。

Text(
      "大家好，我是朱志強。",
      textDirection: TextDirection.ltr,
      strutStyle: StrutStyle(leading: 1),
    )

StrutStyle的其他構造參數——fontSize、fontWeight、fontStyle，用來指定計算行高、行間距的基準。當你不想通過Text的Style中指定的fontSize、fontWeight、fontStyle來作爲StrutStyle計算行高、行間距的依據，你可以通過在StrutStyle中指定這些值來作爲計算標準。
在StrutStyle中指定的fontSize、fontWeight、fontStyle僅僅作爲StrutStyle計算行高、行間距的標準，並不會應用到文本上。

DefaultTextStyle

一個widget tree可能包含多個Text，它們在某些文本風格上是統一的，如字體大小、字體顏色等。如果每一個Text都要定義一遍，就顯得太笨拙了。
DefaultTextStyle是一個特殊的Widget,它並不直接顯示文本，而是可以指定一種文本風格，那麼它的子孫節點中的Text都可以繼承它的文本風格。下面代碼中的Text會自動繼承DefaultTextStyle中指定的文本風格。

DefaultTextStyle(
      style: TextStyle(
        fontSize: 18,
        color: Colors.blue,
      ),
      child: Container(
        child: Text(
          "大家好，我是朱志強！",
          textDirection: TextDirection.ltr,
        ),
      ))

當沒有爲Text指定style值時，Text會上溯widget tree，尋找距離自己最近的DefaultTextStyle並繼承它指定的文本風格。
當爲Text指定style值時，如果style的inherit爲true，則合併style和DefaultTextStyle指定的文本風格，發生衝突時，前者會覆蓋後者；如果style的inherit爲false，則不會合並DefaultTextStyle指定的文本風格。style的inherit屬性的默認值爲true；
下面的代碼，Text的最終顏色是red而不是blue，大小依然爲18。

DefaultTextStyle(
      style: TextStyle(
        fontSize: 18,
        color: Colors.blue,
      ),
      child: Container(
        child: Text(
          "大家好，我是朱志強！",
          textDirection: TextDirection.ltr,
          style: TextStyle(color: Colors.red),
        ),
      ))

關注公衆號，隨時接收優質技術文章