關於文字

對 API 架構的整體認識，可以避免迷失在各個元件間的組合遊戲；然而，還是得處理元件的細節，這類細節終究要回歸到 API 文件的查詢，不過來聊聊常用的，還是可以減輕一下掌握元件個別細節上的負擔。

無論如何，你的 App 上還是會有基本的文字來承載資訊，〈Hello, World!〉就是從文字開始的，只是說那個 Hello, World 會不會太小家子氣了？好吧！來個大大的 Hello, World！

import 'package:flutter/material.dart';

void main() => runApp(
  Text(
    'Hello, World!',
    textAlign: TextAlign.center,      // 對齊
    textDirection: TextDirection.ltr, // 書寫方向
    textScaleFactor: 15.0,            // 文字級數（就目前的字型大小來放大）
    maxLines: 1,                      // 行數限制
    overflow: TextOverflow.ellipsis,  // 超出分配到的空間時顯示的符號
  )
);

顯示結果如下：

若想指定文字的大小、粗細、字型、前／背景顏色等，必須使用 style 特性，它需要的是個 TextStyle 實例。例如：

import 'package:flutter/material.dart';

void main() => runApp(
  Text(
    'Hello, World!',
    textAlign: TextAlign.center,
    textDirection: TextDirection.ltr,
    overflow: TextOverflow.ellipsis,
    style: TextStyle(
      fontSize: 140,                          // 大小
      fontFamily: 'Courier New',              // 字型
      fontWeight: FontWeight.bold,            // 粗體
      fontStyle: FontStyle.italic,            // 斜體
      decoration: TextDecoration.underline,   // 底線
      color: Colors.green,                    // 前景顏色
      backgroundColor: Colors.red,            // 背景顏色
    )
  )
);

來看一下效果：

你的畫面中可能會有許多文字，如果每個 Text 實例都要這麼設定，絕對對煩死，這時可以使用 DefaultTextStyle，它是 InheritedWidget 的子類別，依〈自訂 InheritedWidget〉中的說明，你應該知道為什麼它要如下使用吧！

import 'package:flutter/material.dart';

void main() => runApp(
  MaterialApp(
    home: DefaultTextStyle(
      textAlign: TextAlign.center,
      overflow: TextOverflow.ellipsis,
      style: TextStyle(
        fontSize: 140,
        fontFamily: 'Courier New',
        fontWeight: FontWeight.bold,
        fontStyle: FontStyle.italic,
        decoration: TextDecoration.underline,
        color: Colors.green,
        backgroundColor: Colors.red,
      ),
      child: Column(
        children: [
          Text('Hello'),
          Text('World'),
        ],
      )
    )
  )
);

在範例中，加入了 MaterialApp，這是因為它會指定 textDirection，個別的 Text 就不用指定了，執行畫面如下：

TextStyle 是針對整個 Text 來設定，如果一段文字中想有有不同的顏色呢？可以透過 TextSpan 來達到：

import 'package:flutter/material.dart';

void main() => runApp(
  MaterialApp(
    home: DefaultTextStyle(
      style: TextStyle(
        fontSize: 120,
        decoration: TextDecoration.underline,
      ),
      child: Text.rich(
        TextSpan(
          text: 'Hello',
          style: TextStyle(
            color: Colors.lightGreen
          ),
          children: [
            TextSpan(
              text: 'World',
              style: TextStyle(
                color: Colors.blue
              )
            )
          ]
        )
      )
    )
  )
);

範例中底部的那串括號很煩人，這代表著你應該適當將元件重構，而不是這樣一直組合下去，這邊只是懶得做這件事罷了，執行效果如下：

另外還有個 RichText，要注意的是，它不會吃 DefaultTextStyle 作為父節點時的設定，應該是想獨立為某文字設定時可以使用，底下純綷做個示範！執行結果與上圖相同。

import 'package:flutter/material.dart';

void main() => runApp(
  MaterialApp(
    home: RichText(
      text: TextSpan(
        text: 'Hello',
        style: TextStyle(
          fontSize: 120,
          decoration: TextDecoration.underline,
          color: Colors.lightGreen,
        ),
        children: [
          TextSpan(
            text: 'World',
            style: TextStyle(
                color: Colors.blue,
            )
          )
        ]
      ),
    )
  )
);