Text 和 style

Text

Text用於顯示簡單樣式文字，它包含一些控制文字顯示樣式的一些屬性，一個簡單的例子如下：

Text("Hello world",
  textAlign: TextAlign.center,
);

Text("Hello world! I'm Jack. "*4,
  maxLines: 1,
  overflow: TextOverflow.ellipsis,
);

Text("Hello world",
  textScaleFactor: 1.5,
);
複製程式碼

執行效果如下：

textAlign：文字的對齊方式；可以選擇左對齊、右對齊還是居中
maxLines、overflow：指定文字顯示的最大行數，預設情況下，文字是自動折行的，如果指定此引數，則文字最多不會超過指定的行。如果有多餘的文字，可以通過overflow來指定截斷方式，預設是直接截斷，本例中指定的截斷方式TextOverflow.ellipsis，它會將多餘文字截斷後以省略符“...”表示；TextOverflow的其它截斷方式請參考SDK文件。
textScaleFactor：代表文字相對於當前字型大小的縮放因子，相對於去設定文字的樣式style屬性的fontSize，它是調整字型大小的一個快捷方式。該屬性的預設值可以通過MediaQueryData.textScaleFactor獲得，如果沒有MediaQuery，那麼會預設值將為1.0。

TextStyle

TextStyle用於指定文字顯示的樣式如顏色、字型、粗細、背景等。我們看一個示例：

Text("Hello world",
  style: TextStyle(
    color: Colors.blue,
    fontSize: 18.0,
    height: 1.2,  
    fontFamily: "Courier",
    background: new Paint()..color=Colors.yellow,
    decoration:TextDecoration.underline,
    decorationStyle: TextDecorationStyle.dashed
  ),
);
複製程式碼

TextSpan

在上面的例子中，Text的所有文字內容只能按同一種樣式，如果我們需要對一個Text內容的不同部分按照不同的樣式顯示，這時就可以使用TextSpan，它代表文字的一個“片段”。我們看看TextSpan的定義:

const TextSpan({
  TextStyle style, 
  Sting text,
  List<TextSpan> children,
  GestureRecognizer recognizer,
});
複製程式碼

其中style 和 text屬性代表該文字片段的樣式和內容。 children是一個TextSpan的陣列，也就是說TextSpan可以包括其他TextSpan。而recognizer用於對該文字片段上用於手勢進行識別處理。下面我們看一個效果，然後用TextSpan實現它。

例子：

Text.rich(TextSpan(
    children: [
     TextSpan(
       text: "Home: "
     ),
     TextSpan(
       text: "https://flutterchina.club",
       style: TextStyle(
         color: Colors.blue
       ),  
       recognizer: _tapRecognizer
     ),
    ]
))
複製程式碼

DefaultTextStyle

在widget樹中，文字的樣式預設是可以被繼承的，因此，如果在widget樹的某一個節點處設定一個預設的文字樣式，那麼該節點的子樹中所有文字都會預設使用這個樣式，而DefaultTextStyle正是用於設定預設文字樣式的。下面我們看一個例子：

DefaultTextStyle(
  //1.設定文字預設樣式  
  style: TextStyle(
    color:Colors.red,
    fontSize: 20.0,
  ),
  textAlign: TextAlign.start,
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Text("hello world"),
      Text("I am Jack"),
      Text("I am Jack",
        style: TextStyle(
          inherit: false, //2.不繼承預設樣式
          color: Colors.grey
        ),
      ),
    ],
  ),
);
複製程式碼

上面程式碼中，我們首先設定了一個預設的文字樣式，即字型為20畫素(邏輯畫素)、顏色為紅色。然後通過DefaultTextStyle 設定給了子樹Column節點處，這樣一來Column的所有子孫Text預設都會繼承該樣式，除非Text顯示指定不繼承樣式，如程式碼中註釋2。

使用字型

在asset中宣告

在pubspec.yaml 中宣告，例子：

flutter:
  fonts:
    - family: Raleway
      fonts:
        - asset: assets/fonts/Raleway-Regular.ttf
        - asset: assets/fonts/Raleway-Medium.ttf
          weight: 500
複製程式碼

如何使用字型

// 宣告文字樣式
const textStyle = const TextStyle(
  fontFamily: 'Raleway',
);

// 使用文字樣式
var buttonText = const Text(
  "Use the font for this text",
  style: textStyle,
);
複製程式碼

Package中的字型

要使用Package中定義的字型，必須提供package引數。例如，假設上面的字型宣告位於my_package包中。然後建立TextStyle的過程如下：

const textStyle = const TextStyle(
  fontFamily: 'Raleway',
  package: 'my_package', //指定包名
);
複製程式碼

如果在package包內部使用它自己定義的字型，也應該在建立文字樣式時指定package引數，如上例所示。

一個包也可以只提供字型檔案而不需要在pubspec.yaml中宣告。這些檔案應該存放在包的lib/資料夾中。字型檔案不會自動繫結到應用程式中，應用程式可以在宣告字型時有選擇地使用這些字型。假設一個名為my_package的包中有一個字型檔案：

lib/fonts/Raleway-Medium.ttf
複製程式碼

然後，應用程式可以宣告一個字型，如下面的示例所示：

 flutter:
   fonts:
     - family: Raleway
       fonts:
         - asset: assets/fonts/Raleway-Regular.ttf
         - asset: packages/my_package/fonts/Raleway-Medium.ttf
           weight: 500
複製程式碼

lib/是隱含的，所以它不應該包含在asset路徑中。

在這種情況下，由於應用程式本地定義了字型，所以在建立TextStyle時可以不指定package引數：

const textStyle = const TextStyle(
  fontFamily: 'Raleway',
);
複製程式碼

flutter隨筆- Text and Style