Flutter 进阶:RichText/TextSpan 富文本终极版

💡 原文中文,约3500字,阅读约需9分钟。
📝

内容提要

这篇文章介绍了一种处理富文本样式的方法,通过splitMapJoin方法和RegExp合作,可以简化代码并实现高亮文本样式和点击事件。作者提供了封装后的代码示例,并总结了该方法的优点和使用建议。

🔎

延伸解读

核心思路:用 splitMapJoin 替代手动拼接 TextSpan

文章提出的方法不再逐个手写 TextSpan,而是先用 RegExp 匹配所有高亮词,再通过 splitMapJoin 在匹配项前后插入自定义分隔符,最后按分隔符切分字符串并映射为 TextSpan。这样只需维护一个高亮词数组,代码量大幅减少,尤其适合高亮词数量多或文本较长的场景。

点击事件与样式配置的封装方式

封装后的 createTextSpans 支持传入 style 和 linkStyle 分别控制普通文本与高亮文本样式,并通过 onLink 回调处理点击。高亮部分使用 TapGestureRecognizer 绑定点击事件,调用方只需在回调中根据传入的文本决定跳转逻辑,无需关心 TextSpan 的构建细节。

使用建议:用 Map 管理高亮文字与链接

作者建议将高亮文字和对应链接存入 Map,例如协议名称与 URL 的映射。调用时把 linkMap.keys 转为 textTaps,在 onLink 中通过 linkMap[textTap] 获取链接。这样高亮词与业务跳转解耦,后续增删协议或修改链接只需调整 Map,不必改动富文本构建代码。

注意事项:分隔符与正则转义

源码中 prefix 和 suffix 默认使用 '_&t',目的是避免与正文内容重复,否则切分时可能误伤普通文本。同时高亮词通过 RegExp.escape 转义后再拼接,防止特殊字符破坏正则。若正文本身包含该分隔符,需要更换为更独特的标记,否则会导致 TextSpan 切分错误。

❓

Q&A

如何使用splitMapJoin和RegExp处理富文本样式?

可以通过splitMapJoin方法与RegExp结合,简化富文本的代码,支持高亮文本样式和点击事件。

封装后的RichTextExt类有什么功能?

RichTextExt类可以创建高亮文本和处理点击事件,简化TextSpan的创建过程。

如何创建支持点击事件的TextSpan?

使用createTextSpans函数,可以创建支持点击事件的TextSpan,并通过onLink回调处理点击事件。

使用该方法处理富文本的优点是什么?

该方法优雅且高效,能够简化代码并支持高亮文本的点击事件,提升开发体验。

如何在富文本中实现高亮文本的点击事件?

可以通过在createTextSpans函数中定义onLink回调,来实现高亮文本的点击事件。

推荐的高亮文本和链接的存储方式是什么?

建议使用Map来保存高亮文字和对应的链接,以便于管理和调用。

🏷️

标签

➡️

继续阅读