Flutter文本高亮插件text_highlight_codespark的使用

HighlightText 是一个Flutter小部件，用于高亮显示给定文本中的特定部分。它支持大小写敏感搜索、多个查询和正则表达式匹配。

截图

功能特性

• 单个查询高亮：在源文本中高亮单个查询。
• 多个查询高亮：在源文本中高亮多个查询。
• 正则表达式高亮：根据正则表达式高亮匹配内容。
• 大小写敏感选项：启用或禁用大小写敏感搜索。

安装

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

dependencies:
  text_highlight_codespark: ^1.0.1

然后运行 flutter pub get 来安装该包。

使用示例

单个查询高亮

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

class ExampleSingleQuery extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: HighlightText(
          query: 'highlight',
          source: 'This is a highlight text example.',
          highlightColor: Colors.yellow,
          textStyle: TextStyle(fontSize: 20),
          matchedTextStyle: TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
          caseSensitive: false,
        ),
      ),
    );
  }
}

多个查询高亮

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

class ExampleMultipleQueries extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: HighlightText.multiple(
          queries: ['highlight', 'text'],
          source: 'This is a highlight text example.',
          highlightColor: Colors.green,
          textStyle: TextStyle(fontSize: 20),
          matchedTextStyle: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
          caseSensitive: false,
        ),
      ),
    );
  }
}

正则表达式高亮

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

class ExampleRegex extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: HighlightText.regex(
          regex: r'\b\w{7}\b', // 高亮所有7个字母的单词
          source: 'This is an example with regex highlighting.',
          highlightColor: Colors.blue,
          textStyle: TextStyle(fontSize: 20),
          matchedTextStyle: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
          caseSensitive: false,
        ),
      ),
    );
  }
}

构造函数参数

HighlightText

HighlightText.multiple

HighlightText.regex

示例应用

以下是一个完整的示例应用，展示了如何使用 HighlightText 小部件进行单个查询、多个查询和正则表达式高亮：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('HighlightText Example'), // 应用栏标题
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Center(
                child: HighlightText(
                  query: "example", // 单个查询高亮
                  source: 'This is an example of text highlighting.', // 源文本
                  caseSensitive: false, // 不区分大小写
                  highlightColor: Colors.yellow.shade700, // 高亮颜色
                ),
              ),
              const SizedBox(height: 24), // 间隔
              Center(
                child: HighlightText.multiple(
                  queries: const [
                    'highlight',
                    'text',
                    'example',
                    'multiple'
                  ], // 多个查询高亮
                  source: 'This is an example of highlighting multiple queries in the text.', // 源文本
                  caseSensitive: false, // 不区分大小写
                  highlightColor: Colors.yellow.shade700, // 高亮颜色
                ),
              ),
              const SizedBox(height: 24), // 间隔
              Center(
                child: HighlightText.regex(
                  regex: r'\b\d{4}\b', // 高亮四位数字的正则表达式
                  source: 'The years 2023, 2024, and 2025 are important.', // 源文本
                  caseSensitive: false, // 不区分大小写
                  highlightColor: Colors.yellow.shade700, // 高亮颜色
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

通过以上代码，您可以创建一个包含三种不同高亮方式的应用程序，帮助您更好地理解和使用 text_highlight_codespark 插件。