Flutter文本解析插件flutter_parsed_text_field的使用

Flutter文本解析插件flutter_parsed_text_field的使用

flutter_parsed_text_field 是一个Flutter插件，允许你在 TextField 中使用带有样式化的 @提及和 #标签，并提供类似Twitter的建议功能。这个插件受到了 flutter_parsed_text 和 flutter_mentions 的启发，因此也要感谢这些插件的贡献者！

安装

1. 依赖于它

在你的 pubspec.yaml 文件中添加以下内容：

dependencies:
  flutter_parsed_text_field: ^0.1.0

2. 安装它

你可以通过命令行安装包：

• 使用 pub：

  $ pub get
  

• 使用 Flutter：

  $ flutter pub get
  

3. 导入它

在你的 Dart 代码中导入插件：

import 'package:flutter_parsed_text_field/flutter_parsed_text_field.dart';

使用

FlutterParsedTextField 是一个继承自 TextField 的状态管理小部件（Stateful Widget）。以下是它的基本用法：

FlutterParsedTextField(
  controller: controller.flutterParsedTextEditingController,
  suggestionMatches: suggestionMatches,
  disableSuggestionOverlay: disableSuggestionOverlay,
  suggestionLimit: suggestionLimit,
  suggestionPosition: suggestionPosition,
  matchers: [],
)

可配置属性：

• controller – 扩展了 TextEditingController，用于样式化解析后的文本字段。
• disableSuggestionOverlay – 如果你不想显示内置的建议列表，则设置为 true；否则为 false。
• suggestionLimit – 返回的建议数量。
• suggestionPosition – 建议列表应该出现在文本字段上方还是下方。
• matchers – 匹配器列表，定义触发字符和建议。

回调函数：

• suggestionMatches – 返回匹配的建议列表。

Matcher

Matcher 用于定义触发字符和建议。以下是一个示例：

Matcher<String>(
  trigger: "#",
  suggestions: ['BattleOfNewYork', 'InfinityGauntlet'],
  idProp: (hashtag) => hashtag,
  displayProp: (hashtag) => hashtag,
  style: const TextStyle(color: Colors.blue),
  stringify: (trigger, hashtag) => hashtag,
  alwaysHighlight: true,
  parse: (hashtagString) => hashtagString.substring(1),
)

可配置属性：

• trigger – 触发建议的单个字符。
• suggestions – 建议列表。
• idProp – 获取建议的唯一标识。
• displayProp – 获取建议的显示文本。
• style – 匹配项的文本样式。
• stringify – 将建议转换为可解析的字符串。
• alwaysHighlight – 即使没有匹配的建议也始终应用样式。
• parse – 将可解析的字符串转换为建议。

自定义建议列表

如果你不想使用内置的弹出建议列表，而是想在其他地方显示建议，可以通过设置 disableSuggestionOverlay 为 true，然后自己实现建议列表的显示逻辑。

完整示例Demo

以下是一个完整的示例，展示了如何使用 flutter_parsed_text_field 插件：

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Parsed Text Field',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class Avenger {
  final String userId;
  final String displayName;

  Avenger({
    required this.userId,
    required this.displayName,
  });
}

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

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final flutterParsedTextFieldController = FlutterParsedTextFieldController();

  String addedAvenger = '';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Parsed Text Field'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextButton(
              onPressed: () => FocusScope.of(context).unfocus(),
              child: const Text('Unfocus'),
            ),
            Text('最近添加的复仇者: $addedAvenger'),
            FlutterParsedTextField(
              controller: flutterParsedTextFieldController,
              suggestionMatches: (matcher, suggestions) {},
              disableSuggestionOverlay: false,
              suggestionLimit: 5,
              matchers: [
                Matcher<Avenger>(
                  trigger: "@",
                  suggestions: [
                    Avenger(userId: '3000', displayName: 'Ironman'),
                    Avenger(userId: '4000', displayName: 'Hulk'),
                    Avenger(userId: '5000', displayName: 'Black Widow'),
                  ],
                  idProp: (avenger) => avenger.userId,
                  displayProp: (avenger) => avenger.displayName,
                  style: const TextStyle(color: Colors.red),
                  stringify: (trigger, avenger) {
                    return '[$trigger${avenger.displayName}:${avenger.userId}]';
                  },
                  parseRegExp: RegExp(r"\[(@([^\]]+)):([^\]]+)\]"),
                  parse: (regexp, avengerString) {
                    final avenger = regexp.firstMatch(avengerString);

                    if (avenger != null) {
                      return Avenger(
                        userId: avenger.group(3)!,
                        displayName: avenger.group(2)!,
                      );
                    }

                    throw 'Avenger not found';
                  },
                  onSuggestionAdded: (trigger, avenger) {
                    setState(() => addedAvenger = avenger.displayName);
                  },
                ),
                Matcher<String>(
                  trigger: "#",
                  suggestions: ['BattleOfNewYork', 'InfinityGauntlet'],
                  idProp: (hashtag) => hashtag,
                  displayProp: (hashtag) => hashtag,
                  style: const TextStyle(color: Colors.blue),
                  stringify: (trigger, hashtag) => hashtag,
                  alwaysHighlight: true,
                  parseRegExp: RegExp(r'(#([\w]+))'),
                  parse: (regex, hashtagString) => hashtagString,
                ),
              ],
            ),
            TextButton(
              child: const Text('Clear'),
              onPressed: () => flutterParsedTextFieldController.clear(),
            )
          ],
        ),
      ),
    );
  }
}