Flutter基礎-(3)Widget之文字Text

Lmaoshammy發表於2018-03-28
Flutter

本來打算第三篇文章來講解 Flutter 單子佈局widget , 奈何 18種單子佈局widget 內容頗多,加之年後有了新專案要開發 , 使得文章產出週期被拉長 :( . 這裡先來篇簡單的關於Text的文章 , 下次更新將會發出 Flutter系列的目錄及佈局widget的文章.

Text

Text 文字是app裡常見的控制元件 , 用以顯示一串單一樣式的文字 . 該字串可跨越多行 , 或根據佈局約束顯示在同一行中

最簡單的可以直接用這樣的程式碼來展示文字 , 類似 Android 裡的 TextView , iOS 裡的 UILabel .

new Text('簡單的文字')
複製程式碼

程式碼未指定樣式 , 此時將使用最近的 DefaultTextStyle 樣式 . 若給定樣式中 TextStyle.inherit 屬性為true , 給定樣式則將與最近的 DefaultTextStyle 樣式合併 .

類似 Android 裡 , style.xml 主題樣式 AppTheme 中定義了文字樣式 , 並且將其設定為 Application 的主題樣式 , 那麼新建一個 TextView 就會預設使用 AppTheme中定義的文字樣式 , 而當給這個 TextView 設定樣式時,此樣式就會和主題樣式進行合併

當 TextStyle.inherit 屬性設定為 false 時 , 文字樣式會恢復到預設狀態: 白色, 10畫素 , sans-serif 字型

final TextStyle _inheritBigFont = new TextStyle(inherit: true, fontSize: 24.0);
final TextStyle _notInheritBigFont = new TextStyle(inherit: false, fontSize: 24.0);
...
new Text('inherit true', style: widget._inheritBigFont)
new Text('inherit false', style: widget._notInheritBigFont)
複製程式碼

Flutter基礎-(3)Widget之文字Text

文字樣式鳥瞰

Flutter基礎-(3)Widget之文字Text

RichText

要顯示多樣式的文字 , 需要使用富文字 RichText

在開發中 , 有一些常見的應用場景需要用到富文字 . 比如在很多 app 註冊 ,開戶介面會有一個同意協議的模組 ,

我已閱讀並同意《xxx協議》 , 協議名稱通常高亮顯示並且可以點選開啟協議頁面 .

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

class DemoText extends StatefulWidget {
  final TextStyle _protocolFont = new TextStyle(fontSize: 16.0);
  final TextStyle _inheritBigFont =
      new TextStyle(inherit: true, fontSize: 24.0);
  final TextStyle _notInheritBigFont =
      new TextStyle(inherit: false, fontSize: 24.0);

  @override
  DemoTextState createState() {
    return new DemoTextState();
  }
}

class DemoTextState extends State<DemoText> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: const Text('Text Demo'),
        ),
        body: new Builder(builder: builderBody));
  }

  Widget builderBody(BuildContext context) {
    final TapGestureRecognizer recognizer = new TapGestureRecognizer();
    recognizer.onTap = () {
      Scaffold.of(context).showSnackBar(new SnackBar(
            content: new Text('協議被點選!'),
          ));
    };

    final Divider divider = new Divider(color: Colors.white, height: 2.0);

    return new Container(
        color: Colors.grey,
        alignment: Alignment.center,
        child: new Column(
          children: <Widget>[
            new Text('inherit true', style: widget._inheritBigFont),
            new Text('inherit false', style: widget._notInheritBigFont),
            divider,
            new Text(
              '龍騎士囧雪諾JohnSnow',
              style: new TextStyle(
                  color: Colors.blue,
                  fontSize: 24.0,
                  fontStyle: FontStyle.italic,
                  letterSpacing: 2.0,
                  decoration: TextDecoration.underline),
            ),
            divider,
            new RichText(
              text: new TextSpan(
                text: '我已閱讀',
                style: widget._protocolFont,
                children: <TextSpan>[
                  new TextSpan(
                      text: '《從flutter入門到放棄》',
                      style: new TextStyle(color: Colors.redAccent),
                      recognizer: recognizer),
                ],
              ),
            ),
          ],
        ));
  }
}
複製程式碼

Flutter基礎-(3)Widget之文字Text

TapGestureRecognizer 是手勢識別者 , 後面講到手勢時再具體說明 . 這裡我們先知道它可以用來給富文字某一段新增點選事件 . 這裡我們點選協議後 , 會彈出一個SnackBar提示協議被點選了 .

相關文章