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

《Flutter TolyUI 框架》系列前言:

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

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

1. 文本增强的设计动机

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

搜索高亮	隐私政策等

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

dart 复制代码

// 传统方式：繁琐的手动处理
List<TextSpan> buildHighlightSpans(String text, String keyword) {
  List<TextSpan> spans = [];
  int start = 0;
  while (start < text.length) {
    int index = text.indexOf(keyword, start);
    if (index == -1) {
      spans.add(TextSpan(text: text.substring(start)));
      break;
    }
    if (index > start) {
      spans.add(TextSpan(text: text.substring(start, index)));
    }
    spans.add(TextSpan(
      text: keyword,
      style: TextStyle(backgroundColor: Colors.yellow),
    ));
    start = index + keyword.length;
  }
  return spans;
}

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

dart 复制代码

HighlightText.withArg(
  text,
  arg: keyword,
  highlightStyle: TextStyle(backgroundColor: Colors.yellow),
)

2. 独立模块: tolyui_text

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

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

yaml 复制代码

# 仅使用 tolyui_text
dependencies: 
   tolyui_text: ^last_version

# 使用 tolyui 全家桶 
dependencies: 
    tolyui: ^last_version

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

3. 搜索关键字文本高亮

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

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

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

dart 复制代码

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

4. 自定义匹配规则

withArg 构造函数只适合某一个特定字符串的高亮匹配。对于多个复杂的破规则，支持 rules 的规则映射。Rule 对象可以定义正则表达式，以及 onTap 回调，用于处理点击事件。

比如这里 《[^\u300b]+》 正则匹配书名号和其中的内容，匹配到使用 highlightStyle 样式。点击时触发 onTapMatch 方法，回调的 HighlightMatch 对象中可以得到匹配的信息，包括文本内容和第几个。

dart 复制代码

HighlightText(
  '文本内容',
  rules: {
    Rule(RegExp(r'《[^\u300b]+》'), onTap: onTapMatch): highlightStyle //高亮样式,
  },
  style: const TextStyle(fontSize: 16),
),

void onTapMatch(HighlightMatch match) {
  $message.success(
    message: '点击的是第:${match.matchIndex} 个:${match.matchedText}',
  );
}

5.多模式智能识别

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

dart 复制代码

HighlightText(
  "文本",
  rules: {
    Rule(
      RegExp(r'\d+'),
      onTap: (match) =>
          $message.success(message: '点击了数字: ${match.matchedText}'),
    ): numStyle,
    Rule(
      RegExp(r'\S+@\S+.\S+'),
      onTap: (match) => print('点击了邮箱: ${match.matchedText}'),
    ): emailStyle,
    Rule(
      'zdl1994328',
      onTap: (match) {
        $message.success(message: '点击了微信号: ${match.matchedText}');
      },
    ): weiChatStyle,
  },
  style: const TextStyle(fontSize: 16),
)

尾声

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

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

TolyUI 官方案例演示网站：toly1994.com/ui