一、文本及樣式

1.Text

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

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

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

Text("Hello world",
  textScaleFactor: 1.5,
);

運行效果如圖3-5所示：

3-5

• textAlign：文本的對齊方式；可以選擇左對齊、右對齊還是居中。注意，對齊的參考系是Text widget本身。本例中雖然是指定了居中對齊，但因為Text文本內容寬度不足一行，Text的寬度和文本內容長度相等，那么這時指定對齊方式是沒有意義的，只有Text寬度大于文本內容長度時指定此屬性才有意義。下面我們指定一個較長的字符串：

Text("Hello world "*6,  //字符串重復六次
  textAlign: TextAlign.center,
)；

運行效果如圖3-6所示：

3-6

• maxLines、overflow：指定文本顯示的最大行數，默認情況下，文本是自動折行的，如果指定此參數，則文本最多不會超過指定的行。如果有多余的文本，可以通過overflow來指定截斷方式，默認是直接截斷，本例中指定的截斷方式TextOverflow.ellipsis，它會將多余文本截斷后以省略符“...”表示；TextOverflow的其它截斷方式請參考SDK文檔。
• textScaleFactor：代表文本相對于當前字體大小的縮放因子，相對于去設置文本的樣式style屬性的fontSize，它是調整字體大小的一個快捷方式。該屬性的默認值可以通過MediaQueryData.textScaleFactor獲得，如果沒有MediaQuery，那么會默認值將為1.0。

2.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
  ),
);

效果如圖3-7所示：

3-7

• height：該屬性用于指定行高，但它并不是一個絕對值，而是一個因子，具體的行高等于fontSize*height。

• fontFamily ：由于不同平臺默認支持的字體集不同，所以在手動指定字體時一定要先在不同平臺測試一下。

• fontSize：該屬性和Text的textScaleFactor都用于控制字體大小。但是有兩個主要區別：

• fontSize可以精確指定字體大小，而textScaleFactor只能通過縮放比例來控制。

• textScaleFactor主要是用于系統字體大小設置改變時對Flutter應用字體進行全局調整，而fontSize通常用于單個文本，字體大小不會跟隨系統字體大小變化。

3. TextSpan

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

const TextSpan({
  TextStyle style, 
  Sting text,
  List<TextSpan> children,
  GestureRecognizer recognizer,
});

其中style 和 text屬性代表該文本片段的樣式和內容。children是一個TextSpan的數組，也就是說TextSpan可以包括其他TextSpan。而recognizer用于對該文本片段上用于手勢進行識別處理。下面我們看一個效果（圖3-8），然后用TextSpan實現它。

3-8

Text.rich(TextSpan(
    children: [
     TextSpan(
       text: "Home: "
     ),
     TextSpan(
       text: "https://flutterchina.club",
       style: TextStyle(
         color: Colors.blue
       ), 
     ),
    ]
))

DefaultTextStyle

在Widget樹中，文本的樣式默認是可以被繼承的（子類文本類組件未指定具體樣式時可以使用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。示例運行效果如圖3-9：

3-9

字體

在Flutter中使用字體分兩步完成。首先在pubspec.yaml中聲明它們，以確保它們會打包到應用程序中。然后通過TextStyle屬性使用字體。

在asset中聲明

要將字體文件打包到應用中，和使用其它資源一樣，要先在pubspec.yaml中聲明它。然后將字體文件復制到在pubspec.yaml中指定的位置。如：

flutter:
  fonts:
    - family: Raleway
      fonts:
        - asset: assets/fonts/Raleway-Regular.ttf
        - asset: assets/fonts/Raleway-Medium.ttf
          weight: 500
        - asset: assets/fonts/Raleway-SemiBold.ttf
          weight: 600
    - family: AbrilFatface
      fonts:
        - asset: assets/fonts/abrilfatface/AbrilFatface-Regular.ttf

使用字體

// 聲明文本樣式
const textStyle = const TextStyle(
  fontFamily: 'Raleway',
);

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