Flutter文本搜索功能插件text_search的使用

发布于 1周前 作者 caililin 来自 Flutter

Flutter文本搜索功能插件text_search的使用

text_search 是一个用于Dart的内存中模糊文本搜索库，可以帮助开发者在Flutter应用中实现高效的文本搜索功能。本文将详细介绍如何使用text_search插件，并提供完整的示例代码。

一、基本用法

1. 添加依赖

首先，在pubspec.yaml文件中添加text_search依赖：

dependencies:
  flutter:
    sdk: flutter
  text_search: ^latest_version # 请替换为最新版本号

然后执行flutter pub get命令以安装该包。

2. 创建可搜索项

通过TextSearchItem.fromTerms方法创建可搜索项。每个TextSearchItem对象包含一个主标题（如商店名称）和一组关联关键词（如提供的饮品）。例如：

final searchableItems = [
  TextSearchItem.fromTerms(
      'Coffee Shop', ['coffee', 'latte', 'macchiato', 'tea']),
  TextSearchItem.fromTerms('Dessert', ['ice cream', 'cake', 'pastry']),
  TextSearchItem.fromTerms('Milk Tea Shop', ['boba', 'milk tea', 'bubble tea']),
];

3. 构建搜索器

使用TextSearch构造函数传递上述创建的可搜索项列表来初始化搜索器实例：

final placeTypeSearch = TextSearch(searchableItems);

4. 执行搜索

调用search方法并传入要查找的关键字，即可获取匹配的结果。注意，这里支持模糊匹配，因此即使输入不完全准确也能找到相关结果：

void main() {
  print(placeTypeSearch.search('icecream'));
}

完整示例代码如下：

import 'package:text_search/text_search.dart';

void main() {
  // 定义可搜索项
  final searchableItems = [
    TextSearchItem.fromTerms(
        'Coffee Shop', ['coffee', 'latte', 'macchiato', 'tea']),
    TextSearchItem.fromTerms('Dessert', ['ice cream', 'cake', 'pastry']),
    TextSearchItem.fromTerms('Milk Tea Shop', ['boba', 'milk tea', 'bubble tea']),
  ];

  // 初始化搜索器
  final placeTypeSearch = TextSearch(searchableItems);

  // 执行搜索并打印结果
  print(placeTypeSearch.search('icecream'));
}

运行这段代码后，如果存在与“icecream”相关的项目（例如上面定义的“Dessert”），那么它将会被正确地识别出来。

二、特性与问题反馈

如果您发现了任何bug或者有新的功能需求，欢迎前往GitHub Issues提交报告或建议。

希望以上信息对您有所帮助！如果有更多关于text_search的问题，请随时提问。


更多关于Flutter文本搜索功能插件text_search的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter文本搜索功能插件text_search的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter中使用text_search插件来实现文本搜索功能的示例代码。text_search插件允许你高效地在文本中高亮显示搜索结果。首先，确保你已经在pubspec.yaml文件中添加了text_search依赖：

dependencies:
  flutter:
    sdk: flutter
  text_search: ^latest_version  # 请替换为最新版本号

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

接下来是一个简单的示例，展示如何使用text_search插件来实现文本搜索和高亮显示功能：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '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 to develop applications for Android, iOS, Linux, Mac, Windows, and the web from a single codebase.';

  String searchQuery = '';
  TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    final searchResult = searchQuery.isEmpty
        ? []
        : compute(findMatches, textToSearch, searchQuery);

    return Scaffold(
      appBar: AppBar(
        title: Text('Text Search Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            TextField(
              controller: _controller,
              decoration: InputDecoration(
                prefixIcon: Icon(Icons.search),
                labelText: 'Search',
                suffixIcon: IconButton(
                  icon: Icon(Icons.clear),
                  onPressed: () {
                    _controller.clear();
                    setState(() {
                      searchQuery = '';
                    });
                  },
                ),
              ),
              onChanged: (value) {
                setState(() {
                  searchQuery = value;
                });
              },
            ),
            SizedBox(height: 16),
            Expanded(
              child: searchResult.isEmpty
                  ? Text('No matches found.')
                  : HighlightText(
                      text: textToSearch,
                      terms: searchResult.map((match) => match.item).toList(),
                      textStyle: TextStyle(fontSize: 18),
                      textAlign: TextAlign.justify,
                      matchStyle: TextStyle(
                        backgroundColor: Colors.yellow.withOpacity(0.5),
                        fontWeight: FontWeight.bold,
                      ),
                    ),
            ),
          ],
        ),
      ),
    );
  }
}

// 计算匹配项的函数，这里使用compute来避免阻塞UI线程
List<Match> findMatches(String text, String query) {
  final TextSearcher searcher = TextSearcher(text);
  return searcher.allMatches(query).toList();
}

在这个示例中：

  1. 我们定义了一个包含要搜索的文本的字符串textToSearch。
  2. 使用TextField来接受用户的搜索查询，并在用户输入时更新searchQuery状态。
  3. 使用compute函数在隔离的线程中计算匹配项，以避免阻塞UI线程。注意，实际使用中，compute函数需要导入dart:async包。
  4. 根据搜索结果，使用HighlightText小部件来显示高亮显示的文本。

HighlightText小部件是text_search插件提供的一个方便的工具，用于显示带有高亮匹配项的文本。

请确保在实际项目中测试和调整代码，以适应你的具体需求和UI设计。

回到顶部