Flutter 基礎Widgets Text()之TextStyle詳解

Text概述

即一個單同樣式的文本 Text Widget就是顯示單同樣式的文本字符串。字符串可能會跨越多行，也可能所有顯示在同一行上，具體取決於佈局約束。

style參數可選。若是省略了，文本將使用最近的DefaultTextStyle的樣式。若是給定樣式的TextStyle.inherit屬性爲true（默認值），則給定樣式將與最近的DefaultTextStyle合併。例如，好比能夠在使用默認字體系列和大小時使文本變爲粗體。

第一個構造函數：

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),
       textSpan = null,
       super(key: key);
複製代碼

1. style及構造函數

style對文本的樣式，顏色，字體大小等有更加詳盡的定製，若是省略該參數則使用DefaultTextStyle

const TextStyle({
    this.inherit = true,
    this.color,
    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.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);
複製代碼

• inherit 是否將null值替換爲祖先文本樣式中的值（例如，在TextSpan樹中）。若是爲false，則沒有顯式值的屬性將恢復爲默認值：白色，字體大小爲10像素，採用無襯線字體。
• color 字體的顏色
• fontSize 文字大小,單位爲像素，若是沒有指定大小則默認爲14像素，能夠乘以textScaleFactor來增長字體大小以便用戶更加方便的閱讀
• fontWeight 字體厚度，可使文本變粗或變細
• fontStyle 字體變形，有兩種 FontStyle.normal（字體直立）， FontStyle.italic（字體傾斜）
• letterSpacing 字母間距，整數拉開字母距離，如果負數則拉近字母距離
• wordSpacing，單詞間距，同上
• textBaseline 用於對齊文本的水平線
• height 文本行高，爲字體大小的倍數
• locale 用於選擇區域特定符號的區域設置
• foreground 這個未知
• background 文本的背景顏色
• shadows 文本的陰影能夠利用列表疊加處理，例如shadows: [Shadow(color:Colors.black,offset: Offset(6, 3), blurRadius: 10)], color即陰影的顏色， offset即陰影相對文本的偏移座標，blurRadius即陰影的模糊程度，越小越清晰
• decoration 文字的線性裝飾，好比 underline 下劃線， lineThrough刪除線
• decorationColor 文本裝飾線的顏色
• decorationStyle 文本裝飾線的樣式，好比 dashed 虛線
• debugLabel 這種文本樣式的可讀描述，此屬性僅在調試構建中維護。

簡單使用案例：

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
// Text詳解
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter_Wieghts',
      home: Scaffold(
        appBar: AppBar(
        title: Text('Text Learn'),
      ),
      body: Center(
        child: Text('Hello World'*4,
        style: TextStyle(
          inherit: true,
          color: Colors.white,
          fontSize: 30.0,
          fontWeight: FontWeight.w400,
          fontStyle: FontStyle.italic,
          letterSpacing: 5,
          wordSpacing: 20,
          textBaseline: TextBaseline.alphabetic,
          height: 1.2,
          locale: Locale('fr', 'CH'),
          background: Paint() ..color = Colors.blue,
          shadows: [Shadow(color:Colors.black,offset: Offset(6, 3), blurRadius: 10)],
          decoration: TextDecoration.underline,
          decorationColor: Colors.black54,
          decorationStyle: TextDecorationStyle.dashed,
          debugLabel: 'test',
        ),
        ),
       ),
      )
    );
  }
}
 
複製代碼

示例效果：