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

若是这篇文章有帮助到您，但愿您来个“赞”并关注个人公众号，很是谢谢。