Flutter搜索栏插件flappy_search_bar_ns的使用

Flutter搜索栏插件flappy_search_bar_ns的使用

插件介绍

flappy_search_bar_ns 是一个处理大多数搜索情况的SearchBar小部件，目前由Abdirahman Baabale维护。

使用方法

要在您的项目中使用此插件，请在 pubspec.yaml 文件中添加 flappy_search_bar_ns 作为依赖项。

示例代码

以下是一个完整的示例演示如何使用 flappy_search_bar_ns 插件：

import 'dart:math';
import 'package:flappy_search_bar_ns/flappy_search_bar_ns.dart';
import 'package:flappy_search_bar_ns/scaled_tile.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // 这个小部件是应用程序的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

// 定义Post类
class Post {
  final String title;
  final String body;

  Post(this.title, this.body);
}

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

class _HomeState extends State<Home> {
  final SearchBarController<Post> _searchBarController = SearchBarController();
  bool isReplay = false;

  // 模拟获取帖子列表
  Future<List<Post>> _getALlPosts(String? text) async {
    await Future.delayed(Duration(seconds: text!.length == 4 ? 10 : 1));
    if (isReplay) return [Post("Replaying !", "Replaying body")];
    if (text.length == 5) throw Error();
    if (text.length == 6) return [];
    List<Post> posts = [];

    var random = new Random();
    for (int i = 0; i < 10; i++) {
      posts.add(
        Post("$text $i", "body random number : ${random.nextInt(100)}"),
      );
    }
    return posts;
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SearchBar<Post>(
          searchBarPadding: EdgeInsets.symmetric(horizontal: 10), // 设置搜索栏的填充
          headerPadding: EdgeInsets.symmetric(horizontal: 10), // 设置头部的填充
          listPadding: EdgeInsets.symmetric(horizontal: 10), // 设置列表的填充
          onSearch: _getALlPosts, // 回调函数，用于获取搜索结果
          searchBarController: _searchBarController, // 控制器，用于排序和过滤
          onError: (error) => Text('ERROR: ${error.toString()}'), // 错误回调
          placeHolder: Text("placeholder"), // 占位符文本
          cancellationWidget: Text("Cancel"), // 取消按钮文本
          emptyWidget: Text("empty"), // 空结果时显示的文本
          indexedScaledTileBuilder: (int index) =>
              ScaledTile.count(1, index.isEven ? 2 : 1), // 设置每个项目的大小
          header: Row(
            children: <Widget>[
              TextButton(
                child: Text("sort"), // 排序按钮
                onPressed: () {
                  _searchBarController.sortList((Post a, Post b) {
                    return a.body.compareTo(b.body); // 根据body字段进行排序
                  });
                },
              ),
              TextButton(
                child: Text("Desort"), // 取消排序按钮
                onPressed: () {
                  _searchBarController.removeSort(); // 移除排序
                },
              ),
              TextButton(
                child: Text("Replay"), // 重放按钮
                onPressed: () {
                  isReplay = !isReplay;
                  _searchBarController.replayLastSearch(); // 重新执行上次搜索
                },
              ),
            ],
          ),
          onCancelled: () {
            print("Cancelled triggered"); // 取消操作触发的回调
          },
          mainAxisSpacing: 10, // 主轴间距
          crossAxisSpacing: 10, // 交叉轴间距
          crossAxisCount: 2, // 交叉轴数量
          onItemFound: (Post? post, int index) { // 回调函数，用于构建每个搜索结果的小部件
            return Container(
              color: Colors.lightBlue,
              child: ListTile(
                title: Text(post!.title), // 显示标题
                isThreeLine: true, // 是否为三行文本
                subtitle: Text(post.body), // 显示副标题
                onTap: () {
                  Navigator.of(context).push(MaterialPageRoute(builder: (context) => Detail())); // 跳转到详情页面
                },
              ),
            );
          },
        ),
      ),
    );
  }
}

class Detail extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: <Widget>[
            IconButton(
              icon: Icon(Icons.arrow_back), // 返回按钮
              onPressed: () => Navigator.of(context).pop(), // 返回上一页
            ),
            Text("Detail"), // 显示详细信息
          ],
        ),
      ),
    );
  }
}