Flutter文本搜索高亮插件search_text_highlight_plus的使用

Search Text Highlight Plus 是一个用于在 Flutter 应用中高亮文本搜索结果的插件。它允许你在文本字段中突出显示搜索词，并提供了多种自定义选项，如高亮颜色和文本样式。

特性

• 高亮搜索词 在文本字段中。
• 自定义 高亮颜色和文本样式。
• 导航 到高亮的文本段落。
• 支持 大小写敏感和不敏感的搜索。
• 实时编辑 所选高亮文本。
• 滚动 到不在可见屏幕上的高亮内容。
• 支持 多种语言。

安装

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

dependencies:
  search_text_highlight_plus: ^0.0.5+3

使用

首先，你需要导入必要的包并创建一个 HighlightTextController 实例。

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

// 创建一个 HighlightTextController 实例
final _highlightTextController = HighlightTextController(
  // 要显示和高亮的文本
  text: englishText.trim(),

  // 控制文本视图的滚动
  scrollController: _scrollController,

  // 当前选择的文本背景色
  selectedTextBackgroundColor: Colors.redAccent,

  // 高亮文本的背景色
  highlightTextBackgroundColor: Colors.yellow,

  // 高亮的选定文本样式
  selectedHighlightedTextStyle: const TextStyle(
    color: Colors.white,
    fontSize: 19,
  ),

  // 非选定的高亮文本样式
  highlightedTextStyle: const TextStyle(
    color: Colors.black,
    fontSize: 19,
  ),
);

自定义

你可以通过传递适当的参数来自定义高亮的颜色和文本样式。

HighlightTextController(
  text: englishText.trim(),
  scrollController: _scrollController,
  selectedTextBackgroundColor: Colors.redAccent,
  highlightTextBackgroundColor: Colors.yellow,
  selectedHighlightedTextStyle: const TextStyle(
    color: Colors.white,
    fontSize: 19,
  ),
  highlightedTextStyle: const TextStyle(
    color: Colors.black,
    fontSize: 19,
  ),
);

示例

这是一个使用 Search Text Highlight Plus 包的基本示例：

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:search_text_highlight_plus/data/highlight_span.dart';
import 'package:search_text_highlight_plus/search_text_highlight_plus.dart';

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

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

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

class HighlightTextEditor extends StatefulWidget {
  const HighlightTextEditor({super.key});

  [@override](/user/override)
  State<HighlightTextEditor> createState() => _HighlightTextEditorState();
}

class _HighlightTextEditorState extends State<HighlightTextEditor> {
  late HighlightTextController _highlightTextController;
  late TextEditingController _searchController;
  late ScrollController _scrollController;
  Timer? _debounceTimer;

  [@override](/user/override)
  void initState() {
    super.initState();
    _searchController = TextEditingController();
    _scrollController = ScrollController();

    _highlightTextController = HighlightTextController(
      text: englishText.trim(),
      scrollController: _scrollController,
      selectedTextBackgroundColor: Colors.redAccent,
      highlightTextBackgroundColor: Colors.yellow,
      selectedHighlightedTextStyle: const TextStyle(
        color: Colors.white,
        fontSize: 19,
      ),
      highlightedTextStyle: const TextStyle(
        color: Colors.black,
        fontSize: 19,
      ),
    );
  }

  [@override](/user/override)
  void dispose() {
    _highlightTextController.dispose();
    _searchController.dispose();
    _scrollController.dispose();
    _debounceTimer?.cancel(); // 释放定时器
    super.dispose();
  }

  // 抖动方法以延迟处理搜索查询
  void _onSearchChanged(String query) {
    if (_debounceTimer?.isActive ?? false) {
      _debounceTimer?.cancel();
    }
    _debounceTimer = Timer(const Duration(milliseconds: 0), () { // 增加抖动时间根据需求
      _highlightTextController.highlightSearchTerm(query);
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Highlight Text Plus')),
      body: SafeArea(
        child: Column(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: TextField(
                controller: _searchController,
                decoration: const InputDecoration(
                  labelText: '输入搜索词',
                  border: OutlineInputBorder(),
                ),
                onChanged: (value) {
                  _onSearchChanged(value); // 使用抖动方法
                },
              ),
            ),
            Expanded(
              child: SingleChildScrollView(
                controller: _highlightTextController.scrollController,
                child: ValueListenableBuilder<List<HighlightSpan>>(
                  valueListenable: _highlightTextController.highlightsNotifier,
                  builder: (context, highlights, child) {
                    return Padding(
                      padding: const EdgeInsets.symmetric(
                          horizontal: 12.0, vertical: 16.0),
                      child: TextField(
                        // readOnly: true,
                        controller: _highlightTextController,
                        maxLines: null,
                        decoration: const InputDecoration(
                          border: OutlineInputBorder(
                            borderSide: BorderSide(color: Colors.grey),
                          ),
                        ),
                        style: const TextStyle(fontSize: 20),
                        onChanged: (value) {
                          _onSearchChanged(_searchController.text.trim());
                        },
                      ),
                    );
                  },
                ),
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          FloatingActionButton(
            onPressed: () {
              _highlightTextController.highlightPrevious();
            },
            child: const Icon(Icons.arrow_upward),
          ),
          const SizedBox(height: 10),
          FloatingActionButton(
            onPressed: () {
              _highlightTextController.highlightNext();
            },
            child: const Icon(Icons.arrow_downward),
          ),
        ],
      ),
    );
  }
}

const englishText = '''
In a small village, there was a small house with a small garden. The small children loved to play with their small toys in the small backyard. Every small detail of their small world brought them immense joy. The small moments they shared were forever cherished in their small hearts. In a small village, there was a small house with a small garden. The small children loved to play with their small toys in the small backyard. Every small detail of their small world brought them immense joy. The small moments they shared were forever cherished in their small hearts. In a small village, there was a small house with a small garden. The small children loved to play with their small toys in the small backyard. Every small detail of their small world brought them immense joy. The small moments they shared were forever cherished in their small hearts. In a small village, there was a small house with a small garden. The small children loved to play with their small toys in the small backyard. Every small detail of their small world brought them immense joy. The small moments they shared were forever cherished in their small hearts.
''';

const arabicText = '''
في قرية صغيرة، كان هناك منزل صغير بحديقة صغيرة. أحب الأطفال الصغار اللعب بألعابهم الصغيرة في الفناء الخلفي الصغير. كل تفصيل صغير في عالمهم الصغير جلب لهم فرحة كبيرة. اللحظات الصغيرة التي شاركوها كانت محبوبة إلى الأبد في قلوبهم الصغيرة. في قرية صغيرة، كان هناك منزل صغير بحديقة صغيرة. أحب الأطفال الصغار اللعب بألعابهم الصغيرة في الفناء الخلفي الصغير. كل تفصيل صغير في عالمهم الصغير جلب لهم فرحة كبيرة. اللحظات الصغيرة التي شاركوها كانت محبوبة إلى الأبد في قلوبهم الصغيرة. في قرية صغيرة، كان هناك منزل صغير بحديقة صغيرة. أحب الأطفال الصغار اللعب بألعابهم الصغيرة في الفناء الخلفي الصغير. كل تفصيل صغير في عالمهم الصغير جلب لهم فرحة كبيرة. اللحظات الصغيرة التي شاركوها كانت محبوبة إلى الأبد في قلوبهم الصغيرة. في قرية صغيرة، كان هناك منزل صغير بحديقة صغيرة. أحب الأطفال الصغار اللعب بألعابهم الصغيرة في الفناء الخلفي الصغير. كل تفصيل صغير في عالمهم الصغير جلب لهم فرحة كبيرة. اللحظات الصغيرة التي شاركوها كانت محبوبة إلى الأبد في قلوبهم الصغيرة.
''';