Flutter Widgets 之 RichText

注意：無特殊說明，Flutter版本及Dart版本如下：

• Flutter版本： 1.12.13+hotfix.5
• Dart版本： 2.7.0

基礎用法

應用程式離不開文字的展示，是以文字的排版非常重要，通常情況下

Text

元件可以完成絕大多數需求，它可以顯示不同大小的文字、字型、顔色等，如果想在一句話或者一段文字裡面顯示不同樣式的文字，

Text

元件無法滿足我們的需求，這個時候需要使用

RichText

。

RichText(
      text: TextSpan(
          style: DefaultTextStyle.of(context).style,
          children: <InlineSpan>[
            TextSpan(text: '老孟',style: TextStyle(color: Colors.red)),
            TextSpan(text: '，'),
            TextSpan(text: '一個有态度的程式員'),
          ]),
    )           

RichText

元件的

text

屬性是TextSpan，TextSpan中的

style

樣式需要設定屬性，不設定無法顯示文字，一般設定應用程式的預設字型樣式

DefaultTextStyle.of(context).style

，在子元件其中一個TextSpan設定不同的樣式，比如上面的代碼中設定“老孟”文字為紅色，效果如下：

當文字有較多行時，可以設定其對齊方式：

RichText(
    textAlign: TextAlign.end,
    ...
)           

TextAlign.start

的效果：

TextAlign.center

TextAlign.end

手勢互動

當然我們也可以設定其他樣式，比如大小、斜體等，甚至我們還可以添加點選效果，

RichText(
      text: TextSpan(
          style: DefaultTextStyle.of(context).style,
          children: <InlineSpan>[
            TextSpan(text: '登陸即視為同意'),
            TextSpan(
              text: '《xxx服務協定》',
              style: TextStyle(color: Colors.red),
              recognizer: TapGestureRecognizer()..onTap = () {
                
              },
            ),
          ]),
    )           

recognizer

屬性指定手勢互動，類型是

GestureRecognizer

,

GestureRecognizer

是抽象類，一般使用其子類

TapGestureRecognizer

實作點選互動。

更多相關閱讀：

• Flutter系列文章總覽
• Flutter Widgets 之 Expanded和Flexible
• Flutter Widgets 之 AnimatedList
• Flutter Widgets 之 SliverAppBar

如果這篇文章有幫助到您，希望您來個“贊”并關注我的公衆号，非常謝謝。