Flutter搜索辅助插件search_helper的使用

Flutter搜索辅助插件search_helper的使用

DotCoder

概述

SearchHelper 是由 DOTCODER 开发的用于搜索功能的代码封装。它帮助开发者轻松实现搜索功能。

工作原理

SearchHelper 是一个包含三个静态方法的类:

  1. wordSearch()
  2. stringInstantSearch()
  3. searchModel()

前两个方法需要传递相同的参数,具体如下表所示。

参数描述

参数 描述
data 这个参数接受 List<Map<String,dynamic>> 类型的数据源,并在该数据上执行搜索。
keys 这个参数接受 List<String> 类型的搜索字段,如搜索标题、描述等字段。
searchWord 这个参数是需要在数据中搜索的关键字。

注意: searchWord 参数接受动态值,例如 bool, int, doubleString

如何使用 wordSearch()stringInstantSearch()

这两个方法接受 List<Map<String,dynamic>> 类型的数据参数,List<String> 类型的属性参数和动态类型的 searchWord 参数。它们返回 List<Map<String,dynamic>> 类型的搜索结果。

如何使用 searchModel()

searchModel() 方法接受 List<T> 类型的数据参数,List<String> 类型的键参数,Map<String,String> 类型的对象以搜索每个用户定义的模型,以及动态类型的 searchWord 参数。它返回 List<Map<String,dynamic>> 类型的搜索结果。

重要提示: 确保你使用的每个模型都有 toJson()fromJson() 方法,因为插件在底层使用了这些方法。

参数描述

参数 描述
data 这个参数接受 List<T> 类型的数据源,并在该数据上执行搜索。
properties 这个参数接受 List<String> 类型的搜索字段,如搜索标题、描述等字段。
innerObject 如果你想在一个 List<T> 中搜索并且 T 中有一个对象,则可以使用 innerObject 来搜索特定对象的包含模型。
searchWord 这个参数是需要在数据中搜索的关键字。

开始使用

pubspec.yaml 文件中添加依赖:

dependencies:
    search_helper: ^0.0.7

示例代码

第一种方法示例

import 'package:search_helper/search_helper.dart';

void main(){
  
  List<Map<String,dynamic>> items = [
    {
      'name': "Osama",
      'age': 21,
      'father': "Noushad"
    },
    {
      'name': "Haseeb",
      'age': 20,
      'father': "Noushad"
    },
    {
      'name': "Shahrok",
      'age': 22,
      'father': "Noushad"
    },
    {
      'name': "Asad",
      'age': 23,
      'father': "Noushad"
    },
  ];
  
  
  List<String> keys = ['age','name','father'];
  
  
  List<Map<String,dynamic>> result = SearchHelper.stringInstantSearch(data: items,keys: keys,searchWord: 'osama');
 
}

基于模型的搜索示例

示例1

首先定义我们的 User 模型,并使用该模型来搜索一些用户。

class User {
  String name;
  int age;

  User(this.name, this.age);

  Map<String, dynamic> toJson() => {
    'name': name,
    'age': age,
  };

  factory User.fromJson(Map<String, dynamic> json) {
    return User(json['name'] as String, json['age'] as int);
  }
}

接下来搜索 List<User> 数据。

import 'package:search_helper/search_helper.dart';
import 'dart:convert';

void main(){
  
  
    List<User> users = [
        User('Osama',12),
        User('Haseeb',13),
        User("Shahrokh",14)
    ];
    
    List<User> filteredUsers = [];

    var result = SearchHelper.searchModel(
        data: users,
        properties: ['name'],
        searchWord: 'osama'
    );
           
    result.forEach((e){
       User u = User.fromJson(e);
       filteredUsers.add(u);
    });              
    
}
示例2

让我们对另一个具有教程信息及其作者信息的模型进行更深入的搜索。

首先创建 Tutorial 模型。

class Tutorial {
  String title;
  String description;
  User? author;
  
  Tutorial(this.title, this.description, {this.author});

  Map<String, dynamic> toJson() {
    Map<String, dynamic>? author =
    this.author != null ? this.author!.toJson() : null;

    return {
      'title': title,
      'description': description,
      'author': author,
    };
  }

  factory Tutorial.fromJson(Map<String, dynamic> json) {
    
      return Tutorial(
          json['title'] as String,
          json['description'] as String,
          author:
          User.fromJson(json['author'])
      );
    
  }
}

现在我们已经完成了 Tutorial 模型的定义,接下来使用上面定义的 User 类。

搜索所有作者名字以 “osama” 开头的教程。

import 'package:search_helper/search_helper.dart';
import 'dart:convert';

void main(){
  
  
    List<Tutorial> tutorials = [
    Tutorial('C++', "This is c++ course.",author: User('Osama', 12)),
    Tutorial('C#', "This is c# course.",author: User('Haseeb', 13)),
  ];
  
  List<Tutorial> filteredTutorials = [];

  var result = SearchHelper.searchModel(
        data: tutorials,
        innerObject: {'author': 'name'},
        searchWord: 'osama'
    );

 result.forEach((e){
       Tutorial t = Tutorial.fromJson(e);
       filteredTutorials.add(t);
    });                                    
    
}

更多关于Flutter搜索辅助插件search_helper的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


search_helper 是一个用于在 Flutter 应用中实现搜索功能的辅助插件。它可以帮助你快速集成搜索功能,并提供一些常见的搜索辅助功能,如自动补全、搜索历史等。

1. 添加依赖

首先,你需要在 pubspec.yaml 文件中添加 search_helper 插件的依赖:

dependencies:
  flutter:
    sdk: flutter
  search_helper: ^1.0.0  # 请使用最新版本

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

2. 基本使用

2.1 初始化 SearchHelper

import 'package:search_helper/search_helper.dart';

final searchHelper = SearchHelper();

2.2 添加搜索历史

你可以使用 addSearchHistory 方法来添加搜索历史记录:

searchHelper.addSearchHistory('Flutter');
searchHelper.addSearchHistory('Dart');

2.3 获取搜索历史

你可以使用 getSearchHistory 方法来获取搜索历史记录:

List<String> history = await searchHelper.getSearchHistory();
print(history);  // 输出: ['Flutter', 'Dart']

2.4 清除搜索历史

你可以使用 clearSearchHistory 方法来清除搜索历史记录:

await searchHelper.clearSearchHistory();

2.5 自动补全

search_helper 还支持自动补全功能。你可以使用 getSuggestions 方法来获取搜索建议:

List<String> suggestions = await searchHelper.getSuggestions('Fl');
print(suggestions);  // 输出: ['Flutter']

3. 示例代码

以下是一个完整的示例,展示如何使用 search_helper 插件实现一个简单的搜索功能:

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Search Helper Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SearchDemo(),
    );
  }
}

class SearchDemo extends StatefulWidget {
  [@override](/user/override)
  _SearchDemoState createState() => _SearchDemoState();
}

class _SearchDemoState extends State<SearchDemo> {
  final searchHelper = SearchHelper();
  final searchController = TextEditingController();
  List<String> searchHistory = [];
  List<String> suggestions = [];

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

  Future<void> _loadSearchHistory() async {
    searchHistory = await searchHelper.getSearchHistory();
    setState(() {});
  }

  Future<void> _onSearch(String query) async {
    if (query.isNotEmpty) {
      await searchHelper.addSearchHistory(query);
      setState(() {
        searchHistory.insert(0, query);
      });
    }
  }

  Future<void> _onClearHistory() async {
    await searchHelper.clearSearchHistory();
    setState(() {
      searchHistory.clear();
    });
  }

  Future<void> _onTextChanged(String text) async {
    suggestions = await searchHelper.getSuggestions(text);
    setState(() {});
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Search Helper Demo'),
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextField(
              controller: searchController,
              decoration: InputDecoration(
                labelText: 'Search',
                suffixIcon: IconButton(
                  icon: Icon(Icons.search),
                  onPressed: () => _onSearch(searchController.text),
                ),
              ),
              onChanged: _onTextChanged,
            ),
          ),
          if (suggestions.isNotEmpty)
            Expanded(
              child: ListView.builder(
                itemCount: suggestions.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(suggestions[index]),
                    onTap: () {
                      searchController.text = suggestions[index];
                      _onSearch(suggestions[index]);
                    },
                  );
                },
              ),
            ),
          if (searchHistory.isNotEmpty)
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text(
                      'Search History',
                      style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                    ),
                  ),
                  Expanded(
                    child: ListView.builder(
                      itemCount: searchHistory.length,
                      itemBuilder: (context, index) {
                        return ListTile(
                          title: Text(searchHistory[index]),
                          trailing: IconButton(
                            icon: Icon(Icons.delete),
                            onPressed: () async {
                              await searchHelper.removeSearchHistory(searchHistory[index]);
                              setState(() {
                                searchHistory.removeAt(index);
                              });
                            },
                          ),
                        );
                      },
                    ),
                  ),
                  Center(
                    child: TextButton(
                      onPressed: _onClearHistory,
                      child: Text('Clear History'),
                    ),
                  ),
                ],
              ),
            ),
        ],
      ),
    );
  }
}
回到顶部