Flutter文本点击事件插件clickable_pattern_text的使用

clickable_pattern_text 是一个用于处理富文本中特定模式点击事件的小部件。它能够通过正则表达式匹配文本中的某些部分，并将这些部分设置为可点击的样式（如下划线或不同颜色），同时支持点击时触发回调函数。

示例

场景一：将邮箱地址转换为可点击的链接

ClickablePatternText(
    'my email is a@b.com you can click it or this a@c.com ',
    style: TextStyle(color: Colors.black, fontSize: 16),
    clickableDefaultStyle: TextStyle(
        color: Colors.blue, decoration: TextDecoration.underline),
    patterns: [
        ClickablePattern(
            name: 'email',
            pattern: r'\w+@\w+.\w+', // 匹配邮箱格式
            onClicked: (email, clickablePattern) => print(email), // 点击时打印邮箱
            style: TextStyle(
                color: Colors.red, // 自定义邮箱的颜色
                decoration: TextDecoration.none), // 去掉下划线
        ),
    ],
),

效果展示：

输入文本：

my email is a@b.com you can click it or this a@c.com 

运行后：

• 邮箱 a@b.com 和 a@c.com 会变成蓝色并带有下划线。
• 点击任意邮箱时，会在控制台打印邮箱地址。

场景二：将电话号码转换为可点击的链接

ClickablePatternText(
    'my phone is 123456789 or 987654321, my friends phone is:456321987 ',
    style: TextStyle(color: Colors.black, fontSize: 16),
    patterns: [
        ClickablePattern(
            name: 'phone',
            pattern: r'(?<=[ ,.:]|^)\d{9}(?=[ ,.]|$)', // 匹配9位数字的电话号码
            onClicked: (phone, clickablePattern) => print(phone), // 点击时打印电话号码
            style: TextStyle(
                color: Colors.blue, decoration: TextDecoration.underline),
        ),
    ],
),

效果展示：

输入文本：

my phone is 123456789 or 987654321, my friends phone is:456321987 

运行后：

• 电话号码 123456789、987654321 和 456321987 会变成蓝色并带有下划线。
• 点击任意电话号码时，会在控制台打印电话号码。

默认值

目前 ClickablePatternText 提供了两个默认的模式：

1. email_1: 匹配简单邮箱格式，点击时无操作。
2. phone_1: 匹配简单的10位电话号码，点击时无操作。

如果需要自定义这些默认值，可以覆盖它们：

ClickablePatternText(
    text: 'Email: example@example.com Phone: 1234567890',
    patterns: [
        ClickablePattern(
            name: 'email_1',
            pattern: r'\w+@\w+.\w+', // 自定义邮箱匹配规则
            onClicked: (email, clickablePattern) => print(email),
        ),
        ClickablePattern(
            name: 'phone_1',
            pattern: r'(?<=[ ,.:]|^)\d{10}(?=[ ,.]|$)', // 自定义电话匹配规则
            onClicked: (phone, clickablePattern) => print(phone),
        ),
    ],
),

注意事项

如果您在使用过程中遇到任何问题，或者有改进建议，欢迎在 GitHub 上提交 issue。我会非常感谢您的反馈！

完整示例代码

以下是一个完整的示例代码，展示了如何使用 ClickablePatternText 处理多种文本点击事件：

import 'package:flutter/material.dart';
import 'package:clickable_pattern_text/clickable_pattern_text.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Click Patterns Example')),
      body: SingleChildScrollView(
        child: Column(
          children: [
            ClickablePatternText(
                'my email is a@b.com you can click it or this a@c.com ',
                style: TextStyle(color: Colors.black, fontSize: 16),
                clickableDefaultStyle: TextStyle(
                    color: Colors.blue, decoration: TextDecoration.underline),
                patterns: [
                  ClickablePattern(
                      name: 'email',
                      pattern: r'\w+@\w+.\w+',
                      onClicked: (email, clickablePattern) => print(email),
                      style: TextStyle(color: Colors.red),
                  ),
                ],
            ),
            ClickablePatternText(
                'my phone is 123456789 or 987654321, my friends phone is:456321987 ',
                style: TextStyle(color: Colors.black, fontSize: 16),
                patterns: [
                  ClickablePattern(
                      name: 'phone',
                      pattern: r'(?<=[ ,.:]|^)\d{9}(?=[ ,.]|$)',
                      onClicked: (phone, clickablePattern) => print(phone),
                      style: TextStyle(
                          color: Colors.blue, decoration: TextDecoration.underline),
                  ),
                ],
            ),
          ],
        ),
      ),
    );
  }
}