![](https://img-blog.csdnimg.cn/20200301144346822.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc=,size_16,color_FFFFFF,t_70)

> 注意：無特殊說明，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設定不同的樣式，比如上面的程式碼中設定“老孟”文字為紅色，效果如下：

![](https://img-blog.csdnimg.cn/20200301133344774.png)

當文字有較多行時，可以設定其對齊方式：
```
RichText(
	textAlign: TextAlign.end,
	...
)
```
`TextAlign.start`的效果：

![](https://img-blog.csdnimg.cn/20200301142929286.png)

`TextAlign.center`的效果：

![](https://img-blog.csdnimg.cn/2020030114295040.png)

`TextAlign.end`的效果：

![](https://img-blog.csdnimg.cn/20200301142905406.png)

## 手勢互動

當然我們也可以設定其他樣式，比如大小、斜體等，甚至我們還可以新增點選效果，
```
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系列文章總覽](https://blog.csdn.net/mengks1987/article/details/84868953)
- [Flutter Widgets 之 Expanded和Flexible](https://mengqd.blog.csdn.net/article/details/104414251)
- [Flutter Widgets 之 AnimatedList ](https://blog.csdn.net/mengks1987/article/details/103689129)
- [Flutter Widgets 之 SliverAppBar](https://blog.csdn.net/mengks1987/article/details/104031790)

##### 如果這篇文章有幫助到您，希望您來個“贊”並關注我的公眾號，非常謝謝。
![](https://img-blog.csdnimg.cn/2020012208322494.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9tZW5ncWQuYmxvZy5jc2RuLm5ldA==,size_16,color_FFFFFF,t_70)</inlinespan></inlinespan>

Flutter Widgets 之 RichText

相關文章