Flutter基礎Widgets-Text

個人博客

Text

構造函數(shù)

Text構造函數(shù)的源碼如下面代碼所示

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',
)

運行結果如下圖所示

flutter_widgets_text_1.png

style

文本樣式瞬矩，樣式屬性如下表所示

flutter_widgets_text_11.png

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
    ),
)

運行結果如下圖所示

flutter_widgets_text_2.png

textAlign

文本對齊方式，參數(shù)如下面表格所示

flutter_widgets_text_12.png

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,
            ),
        ),
    ],
)

運行結果如下圖所示

flutter_widgets_text_3.png

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,
            ),
        ),
    ],
)

運行結果如下圖所示

flutter_widgets_text_4.png

locale

此屬性很少設置，用于選擇區(qū)域特定字形的語言環(huán)境

softWrap

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

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

運行結果如下圖所示

flutter_widgets_text_5.png

overflow

處理溢出文本烹困，參數(shù)如下面表格所示

flutter_widgets_text_13.png

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,
            ),
        ),
    ],
)

運行結果如下圖所示

flutter_widgets_text_6.png

textScaleFactor

字體顯示倍率

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

運行結果如下圖所示

flutter_widgets_text_7.png

maxLines

最大行數(shù)

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

運行結果如下圖所示

flutter_widgets_text_8.png

Text.rich

在上面的例子中乾吻，Text的所有文本內(nèi)容只能按同一種樣式進行展示髓梅，如果我們需要對一個Text內(nèi)容的不同部分按照不同的樣式顯示，那又該怎么處理绎签？此時需要用到Text.rich枯饿。

構造函數(shù)

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屬性代表該文本的樣式和內(nèi)容奢方；children是一個TextSpan的數(shù)組，也就是說TextSpan可以包括其他TextSpan擒权；而recognizer用于對該文本片段上用于手勢進行識別處理阁谆。下面看一個例子

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

運行結果如下圖所示

flutter_widgets_text_9.png

DefaultTextStyle

在widget樹中碳抄，文本的樣式默認是可以被繼承的，父節(jié)點的文本樣式子節(jié)點默認會繼承场绿，如果子節(jié)點中重新設置了默認樣式的某些屬性剖效，那么則以子節(jié)點設置的為準。我們也可以通過設置inherit: false不繼承父節(jié)點的默認樣式焰盗。下面我們看一個例子

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,
                    ),
                  ),
                ],
        ))

運行結果如下圖所示

flutter_widgets_text_10.png

好了璧尸，Text相關的內(nèi)容大概就這么多。更詳細的請看官方文檔