Flutter搜索功能插件simple_search的使用

Flutter搜索功能插件simple_search的使用

简介

simple_search 插件提供了简单的搜索功能，并且使用了 infinite_scroll_pagination 库来分页和展示数据。

使用方法

1. 添加依赖

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

   dependencies:
     infinite_scroll_pagination: any
     simple_search: any
   

2. 导入库

   在 Dart 文件中导入 simple_search 库：

   import 'package:simple_search/simple_search.dart';
   

基本用法

SimpleSearch 组件依赖于 infinite_scroll_pagination 库中的 PagedSliverList。

SimpleSearch<int, Person>(
  pagedSliverList: PagedSliverList(
    pagingController: _pagingController,
    builderDelegate: PagedChildBuilderDelegate(
      animateTransitions: true,
      itemBuilder: (context, item, index) => ListTile(
        title: Text(item.name),
      ),
    ),
  ),
  searchBar: SimpleSearchBar(
    searchBarElevation: 3.0,
    padding: EdgeInsets.all(24),
    leading: IconButton(
      onPressed: () {
        Navigator.of(context).pop();
      },
      icon: Icon(Icons.close),
    ),
    topLeading: true,
    title: Padding(
      padding: const EdgeInsets.all(8.0),
      child: Text(
        'Find a pokemon or people',
        style: Theme.of(context)
            .textTheme
            .titleMedium
            ?.copyWith(fontWeight: FontWeight.w500),
      ),
    ),
    clearAction: Icon(Icons.delete),
    textFieldDecoration: BoxDecoration(
        color: Colors.white, borderRadius: BorderRadius.circular(8)),
    inputDecoration: InputDecoration(
      prefixIcon: Icon(Icons.search),
      border: InputBorder.none,
    ),
    onChangeSearch: (text) {
      // 不进行搜索如果文本没有变化
      if (text != _searchTerm) {
        _searchTerm = text;
        _pagingController.refresh();
      }
    },
    searchTermValidator: (value) {
      if (value != null && value.length < 3) {
        return false;
      }
      return true;
    },
  ),
),

持久化搜索栏

你也可以将搜索栏固定在顶部或其他位置。

SimpleSearch<int, Person>.persistent(
  pinnedSearchBar: true,
  floatingSearchBar: false,
  persistentSearchBar: SimpleSearchBar(
    searchBarElevation: 8.0,
    leading: IconButton(
      onPressed: () {
        Navigator.of(context).pop();
      },
      icon: Icon(Icons.arrow_back),
    ),
    clearAction: Icon(Icons.clear),
    textFieldDecoration: BoxDecoration(
        color: Colors.white, borderRadius: BorderRadius.circular(8)),
    onChangeSearch: (text) {
      _searchTerm = text;
      _pagingController.refresh();
    },
    searchTermValidator: (value) {
      if (value != null && value.length < 3) {
        return false;
      }
      return true;
    },
  ),
  pagedSliverList: PagedSliverList(
    pagingController: _pagingController,
    builderDelegate: PagedChildBuilderDelegate(
      animateTransitions: true,
      itemBuilder: (context, item, index) => ListTile(
        title: Text(item.name),
      ),
    ),
  ),
),

圆角搜索栏

你可以为搜索栏设置圆角。

SimpleSearchBar.google(
  leading: IconButton(
    onPressed: () {
      Navigator.of(context).pop();
    },
    ...
)

完整示例

以下是一个完整的示例代码，展示了如何使用 simple_search 插件。

import 'package:flutter/material.dart';
import 'package:sample/seach_persist.dart';
import 'package:sample/search_normal.dart';

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

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

class HomePage extends StatelessWidget {
  final String title;
  const HomePage({Key? key, required this.title}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                Navigator.of(context).push(
                  MaterialPageRoute<void>(
                    builder: (BuildContext context) => SearchDemoNormal(),
                  ),
                );
              },
              child: Text('Demo normal'),
            ),
            SizedBox.fromSize(
              size: Size.fromRadius(8),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.of(context).push(
                  MaterialPageRoute<void>(
                    builder: (BuildContext context) => SearchDemoPersist(),
                  ),
                );
              },
              child: Text('Demo persist'),
            ),
          ],
        ),
      ),
    );
  }
}