RichText-富文本组件

应用程序离不开文字的展示，因此文字的排版非常重要，通常情况下Text组件可以完成绝大多数需求，它可以显示不同大小的文字、字体、颜色等，如果想在一句话或者一段文字里面显示不同样式的文字，Text组件无法满足我们的需求，这个时候需要使用RichText。

import 'package:flutter/material.dart';

/**
 * 富文本
 * 
 * RichText 组件的text属性是TextSpan，TextSpan中的style样式需要设置属性，
 * 不设置无法显示文字，一般设置应用程序的默认字体样式DefaultTextStyle.of(context).style
 */
class RichTextDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [
          RichText(
            textAlign: TextAlign.start, // 设置富文本对齐方式
            text: TextSpan(
              style: DefaultTextStyle.of(context).style, // 使用应用程序默认字体样式, 不然无法显示字体
              children: [
                TextSpan(text: "服务协议", style: TextStyle(color: Colors.red)),
                TextSpan(text: "欢迎是用Flutter, 这里是富文本使用方式，可以显示多个文本，各自定义文本样式")
              ]
            ),

          )
        ],
      ),
    );
  }

}

RichText 组件的text属性是TextSpan，TextSpan中的style样式需要设置属性，不设置无法显示文字，一般设置应用程序的默认字体样式DefaultTextStyle.of(context).style，在子组件其中一个TextSpan设置不同的样式，比如上面的代码中设置“老孟”文字为红色，效果如下：

截屏2021-01-01 上午11.26.36.png

当文字有较多行时，可以设置其对齐方式：

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

TextAlign.start的效果：

截屏2021-01-01 上午11.27.30.png

TextAlign.center的效果：

截屏2021-01-01 上午11.28.12.png

TextAlign.end的效果：

截屏2021-01-01 上午11.28.46.png

#手势交互

当然我们也可以设置其他样式，比如大小、斜体等，甚至我们还可以添加点击效果，

RichText(
      text: TextSpan(
          style: DefaultTextStyle.of(context).style,
          children: <InlineSpan>[
            TextSpan(text: '登陆即视为同意'),
            TextSpan(
              text: '《xxx服务协议》',
              style: TextStyle(color: Colors.red),
              recognizer: TapGestureRecognizer()..onTap = () {
                        // 手势触发
                       // 消息提示框
                          Scaffold.of(context).showSnackBar(SnackBar(
                            content: Text('手势触发'),
                          ));
              },
            ),
          ]),
    )

recognizer属性指定手势交互，类型是GestureRecognizer,GestureRecognizer是抽象类，一般使用其子类TapGestureRecognizer实现点击交互。