Flutter 文字解读 5 | RichText 富文本的使用 (上)

张风捷特烈

发布于 2021-01-26 17:16:14

5.1K0

发布于 2021-01-26 17:16:14

文章被收录于专栏：Android知识点总结 Android知识点总结Android知识点总结

零、前言

通过前四篇，我们已经了解了 Text 的源码实现和基本使用方式。其本质是使用了 RichText进行构建的，也就是说认识了 Text 就等价于认识了 RichText 。通过 Text.rich 我们也可以方便地构建富文本组件，在第三篇中介绍了一下 Text.rich，本篇就来详细地介绍一下富文本的使用。本篇和之前的几篇关系不大，可单独食用。

一、认识 InlineSpan

1. Text.rich 做了什么

Text 组件内部有一个 InlineSpan 类型的 textSpan 成员。它只能通过 Text.rich 构造进行赋值。使用 Text 普通构造时，该成员为 null。

---->[Text 源码]----
final InlineSpan textSpan;

const Text.rich(
   this.textSpan, {
   //... 略

该成员如果非空，会用于 Text#build 时，作为 RichText 中 TextSpan 的 children ，实现富文本。

2. InlineSpan 是什么

InlineSpan 是一个抽象类，所以我们需要使用其子类，实现类有 TextSpan 和 WidgetSpan 两个，分别用于实现多样文本样式和文本中添加组件。

如下面的的需求，我们需要使用 TextSpan ，在一个 TextSpan 中可以传入 List ,从而可以得到一个树状的结构。实现代码如下：

class HomePage extends StatelessWidget {
  
  final TextStyle linkStyle = const TextStyle(
      color: Colors.blue,
      decoration: TextDecoration.underline,
      decorationColor: Colors.blue);
  
  final TextStyle defaultStyle = const TextStyle(
      color: Colors.black);
  
  @override
  Widget build(BuildContext context) {
    InlineSpan span = TextSpan(children: [
      TextSpan(text: '我已同意 ', style: defaultStyle),
      TextSpan(text: '服务条款', style: linkStyle),
      TextSpan(text: ' 和 ', style: defaultStyle),
      TextSpan(text: '隐私政策', style: linkStyle),
      TextSpan(text: ' 。', style: defaultStyle),
    ]);
    return Text.rich(span);
  }
}
复制代码

3.InlineSpan 中的点击事件

InlineSpan 中有一个 recognizer 成员，类型为 GestureRecognizer 。它是一个抽象类，有着很多的实现类，我们可以根据不同的手势选择不同的实现类。

其中点击事件可以使用 TapGestureRecognizer，它可以监听到 按下、点击、抬起、取消 等事件。这样我们就可以对一个 InlineSpan 进行点击监听。效果如下：

这样就可以在点击时执行方法，跳转到对应的条款界面。要注意的是 GestureRecognizer 对象需要做 dispose 操作，代码使用如下：

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final TextStyle linkStyle = const TextStyle(
      color: Colors.blue,
      decoration: TextDecoration.underline,
      decorationColor: Colors.blue);

  final TextStyle defaultStyle = const TextStyle(color: Colors.black);

  TapGestureRecognizer _tapServer;
  TapGestureRecognizer _tapPolicy;
  
  @override
  void initState() {
    super.initState();
    _tapServer= TapGestureRecognizer()..onTap=(){
      print('点击 服务条款');
    };

    _tapPolicy= TapGestureRecognizer()..onTap=(){
      print('点击 隐私政策');
    };
  }

  @override
  void dispose() {
    _tapServer.dispose(); // 销毁对象 
    _tapPolicy.dispose(); // 销毁对象 
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    InlineSpan span = TextSpan(children: [
      TextSpan(text: '我已同意 ', style: defaultStyle),
      TextSpan(text: '服务条款', style: linkStyle, recognizer: _tapServer),
      TextSpan(text: ' 和 ', style: defaultStyle, ),
      TextSpan(text: '隐私政策', style: linkStyle,recognizer: _tapPolicy),
      TextSpan(text: ' 。', style: defaultStyle),
    ]);

    return Text.rich(span);
  }
}
复制代码

4. WidgetSpan

通过 WidgetSpan 可以在文字中添加任何 Widget ，比如下面的图片。

@override
Widget build(BuildContext context) {
  final Image image = Image.asset(
    'assets/images/icon_head.webp',
    width: 20,
    height: 20,
  );
  
  InlineSpan span = TextSpan(children: [
    WidgetSpan(child: image,),
    TextSpan(text: ' 我已同意 ', style: defaultStyle),
    TextSpan(text: '服务条款', style: linkStyle, recognizer: _tapServer),
    TextSpan(text: ' 和 ', style: defaultStyle,),
    TextSpan(text: '隐私政策', style: linkStyle, recognizer: _tapPolicy),
    TextSpan(text: ' 。', style: defaultStyle),
  ]);
  return Text.rich(span);
}

WidgetSpan 中可以设置 PlaceholderAlignment 对齐方式和基线 TextBaseline ，其中对齐方式含 baseline 字样的，必须设置 TextBaseline 。六种对齐方式如下：

到这里，我们就简单地认识完了 InlineSpan 实现富文本的用法。

二、局部文字高亮

文字很少的时候我们用 InlineSpan 来一个个拼，但是对于大段文本的展示，自己拼装是不切实际的。这时候就需要按照某些规则，进行字符串的解析，然后统一生成 InlineSpan。

1.字符串解析

我们先看下面的一段文字，其中有些内容是高亮显示的。可以定义一个规则，然后进行解析。

虽然我们可以自己定义规则，但是在 .md 中已有了规则，最好还是使用共同遵守的规则，如下。

首先我们需要找到被反引号包住的字符串，下面通过写一个 StringParser 类负责文本的解析。其中主要通过 StringScanner 对文本进行扫描，通过下面的正则可以将被包裹的文字位置解析出来。

class StringParser {
  final String content;

  StringParser({this.content});

  StringScanner _scanner;

  parser() {
    _scanner = StringScanner(content);
    parseContent();
  }

  void parseContent() {
    while (!_scanner.isDone) {
      if (_scanner.scan(RegExp('`.*?`'))) {
        print(content.substring(_scanner.lastMatch.start+1,_scanner.lastMatch.end-1));
      }

      if (!_scanner.isDone) {
        _scanner.position++;
      }
    }
  }
}
复制代码

2.定义高亮数据类型

我们通过有个 SpanBean 来存储 InlineSpan 需要的信息。通过 TextStyleSupport 指定高亮支持的文字样式类型。

class SpanBean {
  SpanBean(this.start, this.end);

  final int start;
  final int end;

  String text(String src) {
    return src.substring(start+1, end-1);
  }

  TextStyle get style => TextStyleSupport.dotWrapStyle;
}

class TextStyleSupport{
  static const defaultStyle = TextStyle(color: Colors.black,fontSize: 14);
  static const dotWrapStyle = TextStyle(color: Colors.purple,fontSize: 14);
}
复制代码

这样在 parseContent 中，就可以将解析出的有用信息保存到 SpanBean 中，并用集合进行维护。

List _spans = [];

void parseContent() {
  while (!_scanner.isDone) {
    if (_scanner.scan(RegExp('`.*?`'))) {
      int startIndex = _scanner.lastMatch.start ;
      int endIndex = _scanner.lastMatch.end ;
      _spans.add(SpanBean(startIndex, endIndex));
    }
    if (!_scanner.isDone) {
      _scanner.position++;
    }
  }
}

3.通过 SpanBean 集合生成 InlineSpan

遍历 SpanBean 集合，将其之外的只为默认样式，其区间内的文字设置为指定样式。

InlineSpan parser() {
  _scanner = StringScanner(content);
  parseContent();
  
  final List spans = [];
  
  int currentPosition = 0;
  
  for (SpanBean span in _spans) {
    if (currentPosition != span.start)
      spans.add(TextSpan(text: content.substring(currentPosition, span.start)));
    spans.add(TextSpan(style: span.style, text: span.text(content)));
    currentPosition = span.end;
  }
  if (currentPosition != content.length)
    spans.add(TextSpan(text: content.substring(currentPosition, content.length)));
  return TextSpan(style: TextStyleSupport.defaultStyle, children: spans);
}

4.使用

这样通过 StringParser#parser 就可以获取到 InlineSpan，进行显示。这样我们就完成了一个简易的包裹高亮的需求。使用起来也非常方便，有时只是需要高亮一些内容，没有必要用到 markdown 解析的库，这里也就百来行代码。通过自己写出来，可以对内部有更深的了解，想修改样式什么的，也就游刃有余。

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  InlineSpan span;

  final String content = """
可能说起 Flutter 绘制，大家第一反应就是用 `CustomPaint` 组件，自定义 `CustomPainter` 对象来画。Flutter 中所有可以看得到的组件，比如 Text、Image、Switch、Slider 等等，追其根源都是`画出来`的，但通过查看源码可以发现，Flutter 中绝大多数组件并不是使用 `CustomPaint` 组件来画的，其实 `CustomPaint` 组件是对框架底层绘制的一层封装。这个系列便是对 Flutter 绘制的探索，通过`测试`、`调试`及`源码分析`来给出一些在绘制时`被忽略`或`从未知晓`的东西，而有些要点如果被忽略，就很可能出现问题。
  """;

  StringParser parser;

  @override
  void initState() {
    super.initState();
    parser = StringParser(content: content);
    span = parser.parser();
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(20.0),
      child: Text.rich(span),
    );
  }
}
复制代码

这样一个简单的包裹高亮文本就实现了，如果想要打造自己的解析规则，也可以自己定制，这就是创造者的自由。本篇就介绍这些，在之后的文章中，将会继续拓展文本解析，比如链接的解析、Markdown 的一些基本语法等。这样 Text 就不仅是文本那么简单，还涉及着字符串的解析、正则的使用等更高阶的技能。

当我们掌握了这些能力，再回看代码的高亮显示的实现，也就会驾轻就熟。换到另一个平台上，web、Android等，我们只需知道解析的方法，整个流程都是类似的，这就是经验和能力，和绘制一样，这些能力并不会随着框架的没落而退散，你会了，它就是你的。本文就到这里，谢谢观看~