Flutter正则表达式验证文本字段插件regex_pattern_text_field的使用

Flutter正则表达式验证文本字段插件 regex_pattern_text_field 的使用

RegexPatternTextField 是一个强大的 Flutter 小部件，它简化了在文本字段中进行模式匹配和应用样式的工作。这个小部件特别适用于高亮显示 URL、电子邮件、标签（hashtags）、提及（mentions）等模式。

功能特性

• 模式匹配：根据预定义或自定义的正则表达式模式识别并样式化文本。
• 可定制样式：为每个匹配的模式应用独特的文本样式。
• 实时更新：动态监控并响应输入的变化。
• 可扩展性：轻松添加新的正则表达式模式及其对应的样式。

开始使用

安装

在 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  regex_pattern_text_field: ^1.0.0

运行以下命令来获取包：

flutter pub get

导入包

在 Dart 文件中导入 regex_pattern_text_field 包：

import 'package:regex_pattern_text_field/regex_pattern_text_field.dart';

使用方法

基本示例

将标准的 TextField 替换为 RegexPatternTextField，并使用 RegexPatternTextStyle 定义模式和样式。

RegexPatternTextField(
  maxLines: null,
  regexPatternController: _controller,
  onChanged: (matches, text) {
    print("Text changed: $text");
  },
  onSubmitted: (matches, text) {
    print("Text submitted: $text");
  },
  defaultRegexPatternStyles: true,
  regexPatternStyles: [
    RegexPatternTextStyle(
      type: "email",
      regexPattern: r"[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}",
      textStyle: const TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),
    ),
    RegexPatternTextStyle(
      type: "hashtag",
      regexPattern: r"#\w+",
      textStyle: const TextStyle(color: Colors.green, fontStyle: FontStyle.italic),
    ),
  ],
  onMatch: (model) {
    print("Matched pattern: ${model.type}, Text: ${model.text}");
  },
  onNonMatch: (text) {
    print("No match for: $text");
  },
);

回调函数

• onMatch：当正则表达式模式匹配到部分文本时触发，提供详细的匹配信息。
• onNonMatch：当没有模式匹配到文本时调用。
• onChanged：每次文本变化时执行，提供实时反馈。
• onSubmitted：当用户提交文本时（例如按下回车键）调用。

自定义

添加新模式

可以动态定义额外的模式：

RegexPatternTextStyle(
  type: "customPattern",
  regexPattern: r"\d{4}-\d{2}-\d{2}", // 匹配 YYYY-MM-DD 格式的日期
  textStyle: const TextStyle(color: Colors.orange, fontWeight: FontWeight.bold),
);

组合默认和自定义样式

可以在启用默认样式的同时添加自定义样式：

RegexPatternTextField(
  defaultRegexPatternStyles: true,
  regexPatternStyles: [
    // 在这里添加自定义样式
  ],
);

完整示例应用

以下是一个完整的示例应用，展示了如何使用 RegexPatternTextField：

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: RegexPatternDemo(),
    );
  }
}

class RegexPatternDemo extends StatefulWidget {
  const RegexPatternDemo({Key? key}) : super(key: key);

  [@override](/user/override)
  State<RegexPatternDemo> createState() => _RegexPatternDemoState();
}

class _RegexPatternDemoState extends State<RegexPatternDemo> {
  final RegexPatternTextEditingController _controller = RegexPatternTextEditingController();
  List<RegexPatternMatched> matches = [];

  [@override](/user/override)
  void initState() {
    super.initState();
    _controller.addListener(() {
      setState(() {
        matches = _controller.regexPatternMatchedList;
      });
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Regex Pattern Text Field'),
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: RegexPatternTextField(
              maxLines: null,
              regexPatternController: _controller,
              onChanged: (matches, text) => debugPrint("Text changed: $text"),
              regexPatternStyles: [
                RegexPatternTextStyle(
                  type: "email",
                  regexPattern: r"[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}",
                  textStyle: const TextStyle(color: Colors.blue),
                ),
              ],
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: matches.length,
              itemBuilder: (context, index) {
                final match = matches[index];
                return ListTile(
                  title: Text("Matched Text: ${match.text}"),
                  subtitle: Text("Type: ${match.type}"),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}