Flutter TolyUI 框架#09 | tolyui_text 轻量高亮文本

《Flutter TolyUI 框架》系列前言:

TolyUI 是张风捷特烈打造的 Fluter 全平台应用开发 UI 框架。具备 全平台、组件化、源码开放、响应式 四大特点。可以帮助开发者迅速构建具有响应式全平台应用软件：

开源地址： github.com/TolyFx/toly…

1. 文本增强的设计动机

在应用开发中，文本从来不只是信息的载体，更是用户与应用交互的桥梁。在界面展示和交互的过程中，有时文本并不仅是基本的静态展示，还有搜索是关键字高亮、隐私政策点击交互等。

搜索高亮	隐私政策等

虽然使用 Flutter 本身的富文本也可以处理，但往往让开发者陷入繁琐的细节之中。实现一个简单的搜索高亮功能，需要手动分割字符串、处理大小写逻辑、管理样式状态。比如下面这样的代码：

1// 传统方式：繁琐的手动处理
2List<TextSpan> buildHighlightSpans(String text, String keyword) {
3  List<TextSpan> spans = [];
4  int start = 0;
5  while (start < text.length) {
6    int index = text.indexOf(keyword, start);
7    if (index == -1) {
8      spans.add(TextSpan(text: text.substring(start)));
9      break;
10    }
11    if (index > start) {
12      spans.add(TextSpan(text: text.substring(start, index)));
13    }
14    spans.add(TextSpan(
15      text: keyword,
16      style: TextStyle(backgroundColor: Colors.yellow),
17    ));
18    start = index + keyword.length;
19  }
20  return spans;
21}
22

TolyUI 的 HighlightText 组件目的在于封装文字高亮方案，提供一套轻量级的解决方案。通过简洁的 API 让开发者用最少的代码实现需求，比如最简单的搜索关键字高亮，使用下面的代码即可:

1HighlightText.withArg(
2  text,
3  arg: keyword,
4  highlightStyle: TextStyle(backgroundColor: Colors.yellow),
5)
6

2. 独立模块: tolyui_text

TolyUI 中对文本表现的增强，封装倒了独立的模块中 tolyui_text。它隶属于 tolyui 的基础组件模块：

使用者可以独立模块包，或者使用 tolyui 全家桶来使用 HighlightText 组件。

1# 仅使用 tolyui_text
2dependencies: 
3   tolyui_text: ^last_version
4
5# 使用 tolyui 全家桶 
6dependencies: 
7    tolyui: ^last_version
8
9

下面来介绍一下 HighlightText 的具体用法。

3. 搜索关键字文本高亮

第一个场景是交互式搜索高亮。这是最常见的文本处理需求，HighlightText 提供了 withArg 构造函数，让开发者可以快速实现，基于搜索字符，实现高亮匹配关键字，效果如下：

支持自定义 高亮匹配样式。
支持 是否区分大小写。

使用方式非常简单，只需要通过 HighlightText.withArg 即可：

1HighlightText.withArg(
2  "文本内容",
3  caseSensitive: // 是否区分大小写,
4  arg: '关键字',
5  highlightStyle: //高亮样式,
6),
7

4. 自定义匹配规则

withArg 构造函数只适合某一个特定字符串的高亮匹配。对于多个复杂的破规则，支持 rules 的规则映射。Rule 对象可以定义正则表达式，以及 onTap 回调，用于处理点击事件。
比如这里 《[^\u300b]+》 正则匹配书名号和其中的内容，匹配到使用 highlightStyle 样式。点击时触发 onTapMatch 方法，回调的 HighlightMatch 对象中可以得到匹配的信息，包括文本内容和第几个。

1HighlightText(
2  '文本内容',
3  rules: {
4    Rule(RegExp(r'《[^\u300b]+》'), onTap: onTapMatch): highlightStyle //高亮样式,
5  },
6  style: const TextStyle(fontSize: 16),
7),
8
9void onTapMatch(HighlightMatch match) {
10  $message.success(
11    message: '点击的是第:${match.matchIndex} 个:${match.matchedText}',
12  );
13}
14

5.多模式智能识别

rules 中有支持多个匹配规则，比如下面所有数字通过 \d+ 匹配，每个数字都可以有自己的点击事件。Rule 的第一参可以传入字符串，比如这里的 zdl1994328 精确匹配每个字符串。

1HighlightText(
2  "文本",
3  rules: {
4    Rule(
5      RegExp(r'\d+'),
6      onTap: (match) =>
7          $message.success(message: '点击了数字: ${match.matchedText}'),
8    ): numStyle,
9    Rule(
10      RegExp(r'\S+@\S+.\S+'),
11      onTap: (match) => print('点击了邮箱: ${match.matchedText}'),
12    ): emailStyle,
13    Rule(
14      'zdl1994328',
15      onTap: (match) {
16        $message.success(message: '点击了微信号: ${match.matchedText}');
17      },
18    ): weiChatStyle,
19  },
20  style: const TextStyle(fontSize: 16),
21)
22

尾声

随着 tolyui 的逐步迭代，越来越多的新功能将会支持。感谢你关注 tolyui 的成长，如果喜欢，也希望你能在 github 中点赞支持~

github 开源地址： github.com/TolyFx/toly…
TolyUI 官方案例演示网站：toly1994.com/ui

《Flutter TolyUI 框架#09 | tolyui_text 轻量高亮文本》是转载文章，点击查看原文。