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

若是這篇文章有幫助到您，但願您來個「贊」並關注個人公衆號，很是謝謝。