Flutter文本点击事件处理插件click_text_field的使用

简介

• 支持设置正则表达式 (regExp)
• 支持自定义高亮文本样式 (clickTextStyle)
• 支持点击回调函数 (onTapText)
• 提供 suggestClickTextField 组件（Beta版本）

安装

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

dev_dependencies:
  click_text_field: ^last_version

然后运行以下命令以安装依赖：

flutter pub get

使用方法

使用 ClickTextField

ClickTextField(
  controller: ClickTextEditingController(), // 控制器
  regExp: RegExp(r'people c'), // 高亮匹配的正则表达式
  clickTextStyle: TextStyle( 
    background: Paint()
      ..style = PaintingStyle.stroke // 设置背景样式
      ..strokeWidth = 2
      ..color = Colors.cyanAccent, // 设置颜色
  ),
  onTapText: (clickCallBack) => { // 点击回调
    debugPrint('U click the highlight text $clickCallBack'),
  }
)

使用 SuggestClickTextField （Beta版本）

SuggestClickTextField(
  controller: ClickTextEditingController(),
  regExp: RegExp(r'people a|people b|people c|embed c|building d|人物一'), // 匹配多个关键词
  textStyle: const TextStyle( 
    color: Colors.deepPurple // 默认文本样式
  ),
  clickTextStyle: TextStyle( 
    background: Paint()
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2
      ..color = Colors.cyanAccent, // 高亮样式
  ),
  onTapText: (clickCallBack) => { 
    debugPrint('U click the highlight text $clickCallBack'),
  }
),

注意事项

在不同SDK版本下运行时可能会报错：

rendering/editable.dart': Failed assertion: line 1336 pos 14: 'readOnly && !obscureText': is not true.

解决方法：

1. 删除检查代码：

   if (_semanticsInfo!.any((InlineSpanSemanticsInformation info) => info.recognizer != null) &&
   defaultTargetPlatform != TargetPlatform.macOS) {
   // 删除以下代码
   // assert(readOnly && !obscureText);
   }
   

2. 或者升级到更高版本的SDK。

示例代码

以下是完整的示例代码，展示如何使用 ClickTextField 和 SuggestClickTextField：

import 'package:flutter/material.dart';
import 'package:click_text_field/click_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: 'click_text_field',
      theme: ThemeData(
        brightness: Brightness.dark
      ),
      home: const MyHomePage(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {

  /// ClickTextEditingController
  final ClickTextEditingController textEditingController = ClickTextEditingController();

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('click_text_field'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            // 使用 ClickTextField
            ClickTextField(
              controller: textEditingController,
              regExp: RegExp(r'people a|people b|people c'),
              clickTextStyle: TextStyle(
                background: Paint()
                  ..style = PaintingStyle.stroke
                  ..strokeWidth = 2
                  ..color = Colors.cyanAccent,
              ),
              onTapText: (clickCallBack) => {
                debugPrint('U click the highlight text $clickCallBack'),
              },
            ),
            // 使用 SuggestClickTextField (Beta)
            // SuggestClickTextField(
            //   controller: ClickTextEditingController(),
            //   regExp: RegExp(r'people a|people b|people c|embed c|building d|人物一'),
            //   textStyle: const TextStyle(
            //     color: Colors.deepPurple
            //   ),
            //   clickTextStyle: TextStyle(
            //     background: Paint()
            //       ..style = PaintingStyle.stroke
            //       ..strokeWidth = 2
            //       ..color = Colors.cyanAccent,
            //   ),
            //   onTapText: (clickCallBack) => {
            //     debugPrint('U click the highlight text $clickCallBack'),
            //   },
            // ),
          ],
        ),
      ),
    );
  }
}