Flutter 基礎組件：文本、字體樣式

// 文本、字體樣式


import 'package:flutter/material.dart';


class TextFontStyle extends StatelessWidget {
  // 聲明文本樣式
  TextStyle textStyle = const TextStyle(fontFamily: 'MyFont', fontSize: 30, );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Text Font Style'),
      ),
      body: Container(
        child: Column(
          children: <Widget>[

            // textAlign：文本的對齊方式；可以選擇左對齊、右對齊還是居中。
            // 注意，對齊的參考系是Text widget本身。
            Text('Hello world!',
              textAlign: TextAlign.left,
            ),

            // maxLines、overflow：指定文本顯示的最大行數，默認情況下，文本是自動折行的，如果指定此參數，則文本最多不會超過指定的行。
            // 如果有多余的文本，可以通過overflow來指定截斷方式，默認是直接截斷。
            // 本例中指定的截斷方式TextOverflow.ellipsis，它會將多余文本截斷后以省略符“...”表示；
            Text('Hello World! hhhhh'*5,
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
            ),

            // textScaleFactor：代表文本相對於當前字體大小的縮放因子，相對於去設置文本的樣式style屬性的fontSize，它是調整字體大小的一個快捷方式。
            Text('Hello world!',
              textScaleFactor: 1.5,
            ),

            // TextStyle用於指定文本顯示的樣式如顏色、字體、粗細、背景等。
            Text('Hello world!',
              style: TextStyle(
                color: Colors.blue,
                // fontSize：該屬性和Text的textScaleFactor都用於控制字體大小。但是有兩個主要區別：
                // * fontSize可以精確指定字體大小，而textScaleFactor只能通過縮放比例來控制。
                // * textScaleFactor主要是用於系統字體大小設置改變時對Flutter應用字體進行全局調整，而fontSize通常用於單個文本，字體大小不會跟隨系統字體大小變化。
                fontSize: 18.0,
                // height：該屬性用於指定行高，但它並不是一個絕對值，而是一個因子，具體的行高等於fontSize*height。
                height: 1.2,
                fontFamily: 'Courier',
                background: Paint()..color = Colors.yellow,
                decoration: TextDecoration.underline,
                decorationStyle: TextDecorationStyle.dashed,
              )
            ),

            // 需要對一個Text內容的不同部分按照不同的樣式顯示，這時就可以使用TextSpan，它代表文本的一個“片段”。
            Text.rich(TextSpan(
              children: [
                TextSpan(
                  text: 'Home:',
                ),
                TextSpan(
                  text: 'www.baidu.com',
                  style: TextStyle(
                    color: Colors.blue,
                    fontSize: 20,
                  ),
                  // 點擊鏈接后的一個處理器，手勢識別的內容
//                  recognizer: _tap
                ),
              ]
            )),

            // 在Widget樹中，文本的樣式默認是可以被繼承的（子類文本類組件未指定具體樣式時可以使用Widget樹中父級設置的默認樣式），
            // 因此，如果在Widget樹的某一個節點處設置一個默認的文本樣式，那么該節點的子樹中所有文本都會默認使用這個樣式，
            // 而DefaultTextStyle正是用於設置默認文本樣式的。
            DefaultTextStyle(
              // 設置文本默認樣式
              style: TextStyle(
                color: Colors.red,
                fontSize: 20.0,
              ),
              textAlign: TextAlign.start,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  // 繼承默認樣式
                  Text('Hello world'),
                  Text('I am Hhh'),
                  // 不繼承默認樣式
                  Text('I am Hhh',
                    style: TextStyle(
                      inherit: false,
                      color: Colors.grey,
                    ),
                  ),
                ],
              ),
            ),

            // 在Flutter中使用字體分兩步完成。
            // 1. 在pubspec.yaml中聲明它們，以確保它們會打包到應用程序中。
            // 2. 通過TextStyle屬性使用字體。
            // 使用本地字體
            Text('你好嗎hello',
              style: textStyle,
            ),
            Text('你好嗎hello',
              style: TextStyle(
                fontSize: 30,
              ),
            ),

          ],
        ),
      ),
    );
  }

}