Flutter文本解读 7 | 写个代码高亮组件

2023-11-29 17:55:51

在前面的博文中，我们已经对富文本的显示做了较为详细的介绍，也熟悉了 StringScanner 的用法。如果你对富文本显示和 StringScanner 还不了解，建议你阅读前面的文章，相信对你理解本文有帮助。

最近我在 Flutter Gallery 中看到了一个很酷的代码高亮功能，研究了一下，并把它用在了自己的 FlutterUnit 中。

在 FlutterGallery 中，代码高亮是通过 codeviewer_cli 把所有代码下载到本地，然后显示成一个列表，代码高亮交给 CodeMirror 来实现。而 FlutterUnit 是一个纯 Flutter 实现的代码高亮组件，性能比 codeviewer_cli 要好很多。

实现原理

FlutterUnit 的实现原理很简单，就是把代码分成一个个的 Token，然后根据不同的 Token 类型进行不同的渲染。

Token 的类型有：

关键词：红色
标识符：黑色
数字：绿色
字符串：蓝色
注释：灰色

代码高亮的核心就是把代码分成一个个 Token，这个过程称为词法分析。

在 Flutter 中，可以使用正则表达式来进行词法分析。具体实现可以参考 FlutterUnit 的源码。

词法分析完成后，就可以根据不同的 Token 类型进行不同的渲染了。

在 Flutter 中，可以使用 RichText 组件来渲染不同的文本样式。

RichText(
  text: TextSpan(
    children: [
      TextSpan(text: '关键词', style: TextStyle(color: Colors.red)),
      TextSpan(text: '标识符', style: TextStyle(color: Colors.black)),
      TextSpan(text: '数字', style: TextStyle(color: Colors.green)),
      TextSpan(text: '字符串', style: TextStyle(color: Colors.blue)),
      TextSpan(text: '注释', style: TextStyle(color: Colors.grey)),
    ],
  ),
)