Flutter搜索功能插件search_page的使用

简介

search_page 是一个快速且简单的方式来构建自定义搜索体验的Flutter插件。它基于Flutter框架提供的资源，特别是SearchDelegate来创建Material风格的搜索界面。这个包的一个特别之处是filter参数，它提供了一种简单的方法来过滤列表中的项目，支持通过不同的字符串表示进行筛选。

主要特性

• 基于SearchDelegate实现。
• 提供了简单的过滤机制。
• 支持自定义建议和错误提示界面。
• 可以提供自定义的搜索过滤器。
• 允许更改AppBar的主题等。

示例代码

以下是一个完整的示例demo，展示了如何在应用程序中集成search_page插件：

// 忽略未使用的导入警告
import 'package:flutter/material.dart';
import 'package:search_page/search_page.dart';

/// 用于演示`SearchPage`包的非常简单的类
class Person implements Comparable<Person> {
  final String name, surname;
  final num age;

  const Person(this.name, this.surname, this.age);

  @override
  int compareTo(Person other) => name.compareTo(other.name);
}

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'search_page',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  static const people = [
    Person('Mike', 'Barron', 64),
    Person('Todd', 'Black', 30),
    Person('Ahmad', 'Edwards', 55),
    Person('Anthony', 'Johnson', 67),
    Person('Annette', 'Brooks', 39),
  ];

  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Search Page'),
      ),
      body: ListView.builder(
        itemCount: people.length,
        itemBuilder: (context, index) {
          final person = people[index];

          return ListTile(
            title: Text(person.name),
            subtitle: Text(person.surname),
            trailing: Text('${person.age} yo'),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        tooltip: 'Search people',
        onPressed: () => showSearch(
          context: context,
          delegate: SearchPage(
            onQueryUpdate: print, // 当查询更新时触发
            items: people, // 要搜索的项列表
            searchLabel: 'Search people', // 搜索框占位符文本
            suggestion: const Center( // 当没有输入时显示的建议内容
              child: Text('Filter people by name, surname or age'),
            ),
            failure: const Center( // 当没有找到匹配项时显示的内容
              child: Text('No person found :('),
            ),
            filter: (person) => [ // 定义如何从每个项目中提取用于搜索的字符串
              person.name,
              person.surname,
              person.age.toString(),
            ],
            sort: (a, b) => a.compareTo(b), // 排序规则
            builder: (person) => ListTile( // 搜索结果项的构建方式
              title: Text(person.name),
              subtitle: Text(person.surname),
              trailing: Text('${person.age} yo'),
            ),
          ),
        ),
        child: const Icon(Icons.search),
      ),
    );
  }
}

使用步骤

1. 在pubspec.yaml文件中添加依赖：

   dependencies:
     flutter:
       sdk: flutter
     search_page: ^最新版本号
   

2. 根据上述示例代码修改你的Dart文件，确保你已经正确地引入了必要的库，并按照需要调整数据模型（如Person类）。
3. 运行你的应用并测试搜索功能。

更多详细信息可以参考官方GitHub仓库。如果你有任何问题或需要进一步的帮助，请随时提问！