Flutter學習：基礎組件（一）

1.Text

用於顯示單個樣式的文本控件，字符串可以顯示一行或者多行，具體取決於佈局約束。
text的屬性值：

 const Text(this.data, {
    Key key,
    this.style,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,//圖像的語義描述，用於向Andoid上的TalkBack和iOS上的VoiceOver提供圖像描述
  }) : assert(data != null),
       textSpan = null,
       super(key: key);

style	文字基本樣式設置，包括（inherit, color, fontSize, fontWeight, fontStyle, letterSpacing, wordSpacing, textBaseline, height, locale, foreground, background,）
textAlign	文本對齊方式（如左對齊，右對齊，中心對齊等）
textDirection	有兩種方式：TextDirection.rtl: TextDirection.ltr:
locale	分別是languageCode，scriptCode和countryCode的語言， 腳本和 區域。
softWrap	文本是否可以換行
overflow	對文本進行處理，如果不換行結尾顯示省略，還是變模糊等有個屬性值（TextOverflow.clip，TextOverflow.ellipsis，TextOverflow.fade）
textScaleFactor	文本比例縮放因子
maxLines	文本最多顯示行數

代碼如下：

class TestText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Text(
      'hello world hello world hello world hello world hello world hello world',
      textAlign: TextAlign.left,
      textDirection: TextDirection.ltr,
      locale: Locale.fromSubtags(languageCode: 'und'),
      softWrap: true,
      overflow: TextOverflow.clip,
      textScaleFactor: 1.5,
      maxLines: 2,
      semanticsLabel: ,
      style: TextStyle(
          inherit: false,
          color: Colors.blue,
          fontSize: 20,
          height: 1
      ),
    );
  }
}

對於文字樣式屬性的基本瞭解：

屬性	介紹
inherit	是否繼承TextSpan tree的樣式，默認爲true
color	字體顏色
fontSize	字體大小
fontWeight	字體的權重 通過這個fontWeight: FontWeight.w100調節字體的粗細
fontStyle	字體樣式，有斜體字，正常字體
letterSpacing	字符間距
wordSpacing	字間距，包括一個單詞與一個單詞之間的間距
textBaseline	文本基線
height	行高
foreground	文本前景繪製圖
background	文本背景繪製圖
decoration	添加上劃線，下劃線，刪除線（如TextDecoration.lineThrough）

style: TextStyle(
          inherit: false,
          color: Colors.blue,
          fontSize: 20,
          fontWeight: FontWeight.w100,
          fontStyle: FontStyle.italic,
          letterSpacing: 1.0,
          wordSpacing: 20,
          textBaseline: TextBaseline.ideographic,
          height: 1,
          decoration: TextDecoration.lineThrough,
          decorationStyle: TextDecorationStyle.dashed,
          background:mPaint,
      ),

1.Text.rich

可以顯示具有不同樣式TextSpan的段落。
在他的構造器中多了TextSpan參數。

const Text.rich(this.textSpan, {
    Key key,
    this.style,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
  }): assert(textSpan != null),
      data = null,
      super(key: key);

TextSpan的構造器爲：

const TextSpan({
    this.style,
    this.text,
    this.children,
    this.recognizer,
  });

對於這幾個參數的介紹：

參數名	描述
style	和Text控件的無差別
text	文本標籤
children	集合，添加多個textSpan
recognizer	手勢識別，點擊等一系列操作

class TestTextRich extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text.rich(
      TextSpan(
        text: "hello world",
        children: <TextSpan>[
          TextSpan(
              text: "Hello world",
              style: TextStyle(
                  inherit: true,
                  fontStyle: FontStyle.italic
              )
          ),
          TextSpan(
              text: "hello world",
              style: TextStyle(
                  inherit: false,
                  fontWeight: FontWeight.bold,
                  fontSize: 50,
                  decoration: TextDecoration.underline
              )
          ),
        ],
        style: TextStyle(
          inherit: false,
          fontSize: 100,
          fontStyle: FontStyle.italic,
        ),
        recognizer: new TapGestureRecognizer()
          ..onTap = () {
            print("點擊了父TextSpan");
          },
      ),
      softWrap: true,
      textDirection: TextDirection.rtl,
      textAlign: TextAlign.center,
    );
  }