Flutter文本搜索插件teno_textsearch的使用

当然，以下是如何在Flutter应用中使用teno_textsearch插件的一个示例代码案例。这个插件主要用于在文本中执行高效的搜索操作，并高亮显示匹配的结果。

首先，确保你的pubspec.yaml文件中已经添加了teno_textsearch依赖：

dependencies:
  flutter:
    sdk: flutter
  teno_textsearch: ^最新版本号  # 替换为实际的最新版本号

然后，运行flutter pub get来安装依赖。

接下来，是一个示例代码，展示了如何使用teno_textsearch插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Text Search Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TextSearchScreen(),
    );
  }
}

class TextSearchScreen extends StatefulWidget {
  @override
  _TextSearchScreenState createState() => _TextSearchScreenState();
}

class _TextSearchScreenState extends State<TextSearchScreen> {
  final String textToSearch =
      "Flutter is an open-source UI software development kit created by Google. It is used for developing applications for Android, iOS, Linux, Mac, Windows, and the web from a single codebase.";
  String searchQuery = "";
  TextSearchController _textSearchController;

  @override
  void initState() {
    super.initState();
    _textSearchController = TextSearchController(textToSearch);
  }

  @override
  void dispose() {
    _textSearchController.dispose();
    super.dispose();
  }

  void _onSearchChanged(String value) {
    setState(() {
      searchQuery = value;
      _textSearchController.search(searchQuery);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Text Search Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            TextField(
              decoration: InputDecoration(
                labelText: 'Search',
                suffixIcon: IconButton(
                  icon: Icon(Icons.clear),
                  onPressed: () {
                    setState(() {
                      searchQuery = "";
                      _textSearchController.reset();
                    });
                  },
                ),
              ),
              onChanged: _onSearchChanged,
            ),
            SizedBox(height: 16),
            Expanded(
              child: Text.rich(
                TextSpan(
                  children: _textSearchController.matches.map((match) {
                    final TextStyle matchStyle = TextStyle(
                      backgroundColor: Colors.yellow.withOpacity(0.5),
                    );
                    final TextStyle normalStyle = TextStyle(color: Colors.black);
                    return TextSpan(
                      text: textToSearch.substring(0, match.start),
                      style: normalStyle,
                      children: <TextSpan>[
                        TextSpan(
                          text: textToSearch.substring(match.start, match.end),
                          style: matchStyle,
                        ),
                        if (match.end < textToSearch.length)
                          TextSpan(
                            text: textToSearch.substring(match.end),
                            style: normalStyle,
                          ),
                      ],
                    );
                  }).toList(),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

解释

1. 依赖添加：在pubspec.yaml中添加teno_textsearch依赖。
2. UI结构：
   • 使用TextField作为搜索框，用户可以在其中输入搜索查询。
   • 当搜索查询变化时，调用_onSearchChanged方法。
3. 搜索逻辑：
   • 初始化TextSearchController并传入要搜索的文本。
   • 在_onSearchChanged方法中，根据用户的输入调用_textSearchController.search(searchQuery)进行搜索。
4. 显示结果：
   • 使用Text.rich和TextSpan来构建高亮显示的文本。
   • 遍历搜索结果中的匹配项，并根据匹配的开始和结束位置来分割和着色文本。

这样，你就可以在Flutter应用中实现文本搜索并高亮显示匹配结果的功能了。