![](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)

ITPub博客

Flutter Widgets 之 RichText

最新文章