Flutter基礎Widgets-Text

前文

1. 運行第一個Flutter App
2. Flutter基礎Widgets-Text
3. Flutter可滾動Widgets-ListView
4. Flutter主題切換之flutter redux
5. Flutter插件開發之APK自動安裝
6. Flutter 開發一個 GitHub 客戶端OpenGit及學習總結

我的博客

Text

構造函數

Text構造函數的源碼以下面代碼所示

const Text(this.data, {
    Key key,
    this.style,
    this.strutStyle,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
}) : assert(
    data != null,
    'A non-null String must be provided to a Text widget.',
    ),
    textSpan = null,
    super(key: key);
複製代碼

屬性

• data

須要顯示的字符串

Text(
    'Hello World',
)
複製代碼

運行結果以下圖所示

• style

文本樣式，樣式屬性以下表所示

Text(
    'Hello World',
    style: TextStyle(
        color: Colors.green,
        fontSize: 16.0,
        fontWeight: FontWeight.bold,
        fontStyle: FontStyle.italic,
        letterSpacing: 2.0,
        wordSpacing: 1.5,
        textBaseline: TextBaseline.alphabetic,
        decoration: TextDecoration.lineThrough,
        decorationStyle: TextDecorationStyle.dashed,
        decorationColor: Colors.blue
    ),
)
複製代碼

運行結果以下圖所示

• textAlign

文本對齊方式，參數以下面表格所示

Column(
    children: <Widget>[
        Text(
            text,
            textAlign: TextAlign.left,
            style: TextStyle(
              color: Colors.green,
            ),
        ),
        Text(
            text,
            textAlign: TextAlign.center,
            style: TextStyle(
              color: Colors.black,
            ),
        ),
        Text(
            text,
            textAlign: TextAlign.right,
            style: TextStyle(
              color: Colors.yellow,
            ),
        ),
        Text(
            text,
            textAlign: TextAlign.start,
            style: TextStyle(
              color: Colors.red,
            ),
        ),
        Text(
            text,
            textAlign: TextAlign.end,
            style: TextStyle(
              color: Colors.orange,
            ),
        ),
        Text(
            text,
            textAlign: TextAlign.justify,
            style: TextStyle(
              color: Colors.blue,
            ),
        ),
    ],
)
複製代碼

運行結果以下圖所示

• textDirection

TextDirection.ltr，文本從左向右流動； TextDirection.rtl，文本從右向左流動。 相對TextAlign中的start、end而言有用（當start使用了ltr至關於end使用了rtl，也至關於TextAlign使用了left）

Column(
    children: <Widget>[
        Text(
            text,
            textDirection: TextDirection.ltr,
            style: TextStyle(
                color: Colors.green,
            ),
        ),
        Text(
            text,
            textDirection: TextDirection.rtl,
            style: TextStyle(
                color: Colors.blue,
            ),
        ),
    ],
)
複製代碼

運行結果以下圖所示

• locale

此屬性不多設置，用於選擇區域特定字形的語言環境

• softWrap

是否自動換行，若爲false，文字將不考慮容器大小，單行顯示，超出屏幕部分將默認截斷處理

Column(
    children: <Widget>[
        Text(
            text,
            softWrap: false,
            style: TextStyle(
                color: Colors.green,
            ),
        ),
        Text(
            text,
            softWrap: true,
            style: TextStyle(
                color: Colors.blue,
            ),
        ),
    ],
)
複製代碼

運行結果以下圖所示

• overflow

處理溢出文本，參數以下面表格所示

Column(
    children: <Widget>[
        Text(
            text,
            overflow: TextOverflow.clip,
            maxLines: 3,
            style: TextStyle(
                color: Colors.green,
            ),
        ),
        Text(
            text,
            overflow: TextOverflow.fade,
            maxLines: 3,
            style: TextStyle(
                color: Colors.blue,
            ),
        ),
        Text(
            text,
            overflow: TextOverflow.ellipsis,
            maxLines: 3,
            style: TextStyle(
                color: Colors.yellow,
            ),
        ),
    ],
)
複製代碼

運行結果以下圖所示

• textScaleFactor

字體顯示倍率

Column(
    children: <Widget>[
        Text(
            text,
            style: TextStyle(
                color: Colors.green,
            ),
        ),
        Text(
            text,
            textScaleFactor: 2,
            style: TextStyle(
                color: Colors.blue,
            ),
        ),
          ],
        )
複製代碼

運行結果以下圖所示

• maxLines

最大行數

Column(
    children: <Widget>[
        Text(
            text,
            style: TextStyle(
                color: Colors.green,
            ),
        ),
        Text(
            text,
            maxLines: 3,
            style: TextStyle(
                color: Colors.blue,
            ),
        ),
    ],
)
複製代碼

運行結果以下圖所示

Text.rich

在上面的例子中，Text的全部文本內容只能按同一種樣式進行展現，若是咱們須要對一個Text內容的不一樣部分按照不一樣的樣式顯示，那又該怎麼處理？此時須要用到Text.rich。

構造函數

const Text.rich(this.textSpan, {
    Key key,
    this.style,
    this.strutStyle,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
}) : assert(
        textSpan != null,
        'A non-null TextSpan must be provided to a Text.rich widget.',
    ),
    data = null,
    super(key: key);
複製代碼

屬性

Text.rich中除了textSpan屬性跟Text不同，其餘都同樣。textSpan屬性以下所示

TextSpan

TextSpan定義以下

const TextSpan({
    this.style,
    this.text,
    this.children,
    this.recognizer,
});
複製代碼

其中style和text屬性表明該文本的樣式和內容；children是一個TextSpan的數組，也就是說TextSpan能夠包括其餘TextSpan；而recognizer用於對該文本片斷上用於手勢進行識別處理。下面看一個例子

Text.rich(TextSpan(
    children: [
        TextSpan(
            text: "百度: "
        ),
        TextSpan(
            text: "https://www.baidu.com",
            style: TextStyle(
                color: Colors.blue
            ),
        ),
    ]
))
複製代碼

運行結果以下圖所示

DefaultTextStyle

在widget樹中，文本的樣式默認是能夠被繼承的，父節點的文本樣式子節點默認會繼承，若是子節點中從新設置了默認樣式的某些屬性，那麼則以子節點設置的爲準。咱們也能夠經過設置inherit: false不繼承父節點的默認樣式。下面咱們看一個例子

DefaultTextStyle(
    textAlign: TextAlign.left,
    style: TextStyle(
            fontSize: 20.0,
            color: Colors.green,
            fontWeight: FontWeight.bold,
            fontStyle: FontStyle.italic),
            child: Column(
                children: <Widget>[
                  Text(
                    text,
                  ),
                  Text(
                    text,
                    style: TextStyle(
                      color: Colors.yellow,
                    ),
                  ),
                  Text(
                    text,
                    style: TextStyle(
                      inherit: false,
                      color: Colors.blue,
                    ),
                  ),
                ],
        ))
複製代碼

運行結果以下圖所示

好了，Text相關的內容大概就這麼多。更詳細的請看官方文檔