Flutter文本识别插件flutter_text_sniffer的使用

Flutter文本识别插件flutter_text_sniffer的使用

TextSniffer 是一个强大的 Flutter 小部件，用于检测和与特定文本模式进行交互。它允许开发者使用正则表达式定义自定义模式，为检测到的文本应用独特的样式，并处理用户点击链接或特定单词等交互。

目录

• 功能
• 安装
• 使用
• 自定义构建器
• 定义自定义模式
• 贡献
• 许可证

功能

• 可定制的模式：使用正则表达式定义文本模式。
• 交互式文本：使文本片段具有交互性，响应用户的点击。
• 样式选项：为匹配和不匹配的文本应用样式。
• 自定义匹配构建器：定义检测到的模式如何显示。
• 多种搜索嗅探器：默认支持电子邮件和链接，但你可以创建自己的嗅探器。
• 独立样式：单独为不同类型的匹配设置样式。

安装

要使用 TextSniffer，在你的 pubspec.yaml 文件中添加以下内容：

dependencies:
  flutter_text_sniffer: ^latest_version

然后运行 flutter pub get 来安装该包。

使用

基本示例

以下是一个简单的 TextSniffer 小部件使用示例：

TextSniffer(
  text: "Contact us at support@example.com or visit https://example.com/product?name=iPhone",
  snifferTypes: [
    // 内置的嗅探器
    EmailSnifferType(), 
    LinkSnifferType(),
  ],
  onTapMatch: (match, matchText, type, index, error) {
    if (error == null) {
      print('Tapped on: $matchText');
    }
  },
)

自定义构建器

要自定义匹配文本的显示方式，可以使用 matchBuilder 属性：

final images = [
  "assets/flutter.png",
  "assets/google.png",
];

class CustomSnifferType extends SnifferType {
  [@override](/user/override)
  RegExp get pattern => RegExp(r'\[(.*?)\]');

  [@override](/user/override)
  TextStyle? get style => const TextStyle(color: Colors.indigoAccent, fontWeight: FontWeight.bold);

  [@override](/user/override)
  String toString() => 'custom';
}

TextSniffer<String>(
  text: "Check out [Flutter] and [Google]!",
  matchEntries: const ['https://flutter.dev', 'https://google.com'],
  snifferTypes: [
    CustomSnifferType(),
  ],
  onTapMatch: (entry, match, type, index, error) {
    if (error == null) {
      showSnackBar(context, entry ?? "Not found");
    }
  },
  matchBuilder: (match, index, type, entry) {
    return Container(
      padding: const EdgeInsets.only(left: 4.0, right: 4.0),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Image.asset(
            images[index],
            width: 20,
            height: 20,
          ),
          Text(
            match,
            style: type.style,
          ),
        ],
      ),
    );
  },
)

定义自定义模式

你可以使用正则表达式定义自定义模式。例如，检测IP地址、标签和自定义模式：

// 自定义嗅探器。例如：[Example] => 括号中的词 => Example
class CustomSnifferType extends SnifferType {
  [@override](/user/override)
  RegExp get pattern => RegExp(r'\[(.*?)\]');

  [@override](/user/override)
  TextStyle? get style => const TextStyle(color: Colors.indigoAccent, fontWeight: FontWeight.bold);

  [@override](/user/override)
  String toString() => 'custom';
}

// IP地址嗅探器
class IpAddressSnifferType extends SnifferType {
  [@override](/user/override)
  RegExp get pattern => RegExp(r'\b' // 开始单词边界
      r'(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)' // 1个八位字节
      r'\.' // 点
      r'(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)' // 2个八位字节
      r'\.' // 点
      r'(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)' // 3个八位字节
      r'\.' // 点
      r'(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)' // 4个八位字节
      r'\b' // 结束单词边界
      );

  [@override](/user/override)
  TextStyle? get style => const TextStyle(color: Colors.orange, fontStyle: FontStyle.italic);

  [@override](/user/override)
  String toString() => 'ip_address';
}

// 标签嗅探器
class HashtagSnifferType extends SnifferType {
  [@override](/user/override)
  RegExp get pattern => RegExp(r'\B#\w\w+');

  [@override](/user/override)
  TextStyle? get style => const TextStyle(color: Colors.purple, fontWeight: FontWeight.bold);

  [@override](/user/override)
  String toString() => 'hashtag';
}

TextSniffer(
  text: "Check out [Flutter] and [Google]!\nCheck out #Flutter and #Google! IP addresses: 192.168.0.1, 192.168.0.124",
  snifferTypes: [
    CustomSnifferType(),
    HashtagSnifferType(),
    IpAddressSnifferType(),
  ],
  matchEntries: const [
    'https://flutter.dev',
    'https://google.com',
  ],
  onTapMatch: (entry, matchText, type, index, error) {
    if (error == null) {
      print('Tapped on: $matchText');
    }
  },
)