Flutter文本解析插件flutter_parsed_text的使用

Flutter Parsed text 是一个用于解析和提取文本中特定模式部分（如URL、电话号码、电子邮件等）的插件，它也支持正则表达式。

使用方法 💻

要在项目中使用这个插件，首先需要在pubspec.yaml文件中添加flutter_parsed_text作为依赖项：

dependencies:
  flutter_parsed_text: ^latest_version # 请替换为最新版本号

然后，在Dart文件中导入包：

import 'package:flutter_parsed_text/flutter_parsed_text.dart';

参数说明 ⚙️

• text: 将要被解析并渲染的文本。
• style: 用于设置所有非链接文本样式的TextStyle对象。
• parse: 包含MatchText对象的数组，用于定义模式匹配结构。

MatchText 对象参数

• type: 预定义类型，可以是ParsedType.URL, ParsedType.EMAIL, ParsedType.PHONE 或者自定义类型ParsedType.CUSTOM。
• pattern: 自定义正则表达式字符串。
• regexOptions: 正则表达式的选项配置。
• style: 应用到匹配文本上的样式。
• renderText: 当匹配到特定模式时返回显示文本与值的映射。
• onTap: 点击事件触发后执行的动作。

例如，我们可以创建一个简单的MatchText对象来处理电子邮件地址：

MatchText(
  type: ParsedType.EMAIL, 
  style: TextStyle(color: Colors.red, fontSize: 24),
  onTap: (url) {
    launch("mailto:" + url);
  },
)

对于更复杂的场景，比如用户提及（mention），我们可以通过正则表达式来匹配并处理：

MatchText(
  pattern: r"\[(@[^:]+):([^\]]+)\]",
  style: TextStyle(color: Colors.green, fontSize: 24),
  renderText: ({required pattern, required str}) {
    RegExp customRegExp = RegExp(r"\[(@[^:]+):([^\]]+)\]");
    Match match = customRegExp.firstMatch(str)!;
    return {'display': match.group(1)!};
  },
  onTap: (url) {
    // 显示对话框提示用户点击了哪个提及
    showDialog(...);
  },
)

示例代码 ✍🏻

下面是一个完整的例子，展示了如何使用ParsedText小部件来解析包含多种类型的文本，并为不同类型的文本提供不同的样式和交互行为：

import 'package:flutter/material.dart';
import 'package:flutter_parsed_text/flutter_parsed_text.dart';
import 'package:url_launcher/url_launcher.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Example App',
      home: MainApp(),
    );
  }
}

class MainApp extends StatefulWidget {
  @override
  _MainAppState createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  final parseRules = <MatchText>[
    // 解析邮件地址
    MatchText(
      type: ParsedType.EMAIL,
      style: TextStyle(color: Colors.red, fontSize: 24),
      onTap: (email) async {
        await launch("mailto:$email");
      },
    ),
    // 解析URL
    MatchText(
      type: ParsedType.URL,
      style: TextStyle(color: Colors.blue, fontSize: 24),
      onTap: (url) async {
        if (await canLaunch(url)) {
          await launch(url);
        }
      },
    ),
    // 解析电话号码
    MatchText(
      type: ParsedType.PHONE,
      style: TextStyle(color: Colors.red, fontSize: 24),
      onTap: (phone) async {
        await launch("tel:$phone");
      },
    ),
    // 解析用户提及
    MatchText(
      pattern: r"\[(@[^:]+):([^\]]+)\]",
      style: TextStyle(color: Colors.green, fontSize: 24),
      renderText: ({required pattern, required str}) {
        RegExp customRegExp = RegExp(r"\[(@[^:]+):([^\]]+)\]");
        Match match = customRegExp.firstMatch(str)!;
        return {'display': match.group(1)!};
      },
      onTap: (mention) {
        // 弹出对话框通知用户点击了哪个提及
        showDialog(
          context: context,
          builder: (_) => AlertDialog(
            title: Text('Mention Clicked'),
            content: Text('${mention.split(':')[0]} clicked.'),
            actions: [
              TextButton(
                onPressed: () => Navigator.pop(context),
                child: Text('Close'),
              ),
            ],
          ),
        );
      },
    ),
    // 解析话题标签
    MatchText(
      pattern: r"\B#+([\w]+)\b",
      style: TextStyle(color: Colors.pink, fontSize: 24),
      onTap: (hashtag) {
        // 弹出对话框通知用户点击了哪个话题标签
        showDialog(
          context: context,
          builder: (_) => AlertDialog(
            title: Text('Hashtag Clicked'),
            content: Text('$hashtag clicked.'),
            actions: [
              TextButton(
                onPressed: () => Navigator.pop(context),
                child: Text('Close'),
              ),
            ],
          ),
        );
      },
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Parsed Text Example')),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: ParsedText(
          text: "[@michael:51515151] Hello this is an example of the ParsedText, links like http://www.google.com or http://www.facebook.com are clickable and phone number 444-555-6666 can call too. But you can also do more with this package, for example Bob will change style and David too. foo@gmail.com And the magic number is 42! #react #react-native",
          parse: parseRules,
          style: TextStyle(fontSize: 18),
        ),
      ),
    );
  }
}

这段代码实现了对文本中的邮箱、网址、电话号码、用户提及以及话题标签的支持，并且为每个类型设置了不同的样式和点击事件。你可以根据自己的需求调整规则列表parseRules中的内容。