Flutter搜索功能插件search_app_bar_page的使用

简介

search_app_bar_page 是一个Flutter包，旨在提供一个完整且响应式的搜索页面，具有最佳的便利性。它基于另一个包 search_app_bar 构建，并进行了改进，使开发者无需继承控制器类，只需传递基础列表或插入返回要过滤的列表的流即可。此外，该包已经内置了StreamBuilder以处理后台逻辑。

核心组件

SEARCH_APP_BAR: 搜索栏组件。
CONTROLLER: 控制器，用于管理状态和业务逻辑。
BODY de um Scaffold: 页面主体内容。

必要参数

SearchAppBarPage

listFull: 完整的列表，用于过滤。
obxListBuilder: 一个函数，在搜索时构建Widget。
stringFilter: 如果类型化，则需要此参数。例如：(Person person) => person.name。

SearchAppBarPageStream

listStream: 已经处理过的流。
obxListBuilder: 接收通过流或搜索过滤的数据后应用的函数。
stringFilter: 类型化时必需。

SearchAppBarPageRefresh

functionRefresh: 一个刷新Future函数。
obxListBuilder: 接收通过流或搜索过滤的数据后应用的函数。
stringFilter: 类型化时必需。

SearchAppBarPagination

futureFetchPageItems: 分页请求数据的Future函数。
paginationItemBuilder: 构建分页项目的函数。
stringFilter: 类型化时必需。

示例代码

SearchAppBarPage 示例

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

class Person {
  final String name;
  final int age;

  Person({required this.name, required this.age});

  @override
  String toString() {
    return 'Person{name: $name, age: $age}';
  }
}

final dataListPerson2 = <Person>[
  // ... 数据列表
];

class SearchPage extends StatefulWidget {
  @override
  _SearchPageState createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {
  TestController controll_1 = Get.find<TestController>();

  @override
  void initState() {
    super.initState();

    Future.delayed(const Duration(seconds: 4), () {
      controll_1.changeAuth = true;
    });

    Future.delayed(const Duration(seconds: 6), () {
      controll_1.rxList.refresh();
    });
  }

  @override
  Widget build(BuildContext context) {
    return SearchAppBarPage<Person>(
      magnifyGlassColor: Colors.white,
      searchAppBarCenterTitle: true,
      searchAppBarHintText: 'Search for a name',
      searchAppBarTitle: const Text(
        'Search Page',
        style: TextStyle(fontSize: 20),
      ),
      listFull: dataListPerson2,
      stringFilter: (Person person) => person.name,
      rxBoolAuth: RxBoolAuth.input(
          rxBoolAuthm: Get.find<TestController>().rxAuth,
          authFalseWidget: () => const Center(
                child: Text(
                  'Please login.',
                  style: TextStyle(fontSize: 22),
                ),
              )),
      filtersType: FiltersTypes.contains,
      obxListBuilder: (context, list, isModSearch) {
        if (list.isEmpty) {
          return const Center(
              child: Text(
            'NOTHING FOUND',
            style: TextStyle(fontSize: 14),
          ));
        }
        return ListView.builder(
          itemCount: list.length,
          itemBuilder: (_, index) {
            return Card(
                margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(4)),
                child: Padding(
                  padding: const EdgeInsets.all(14.0),
                  child: Row(
                    children: [
                      Expanded(
                        child: Text(
                          'Name: ${list[index].name}',
                          style: const TextStyle(fontSize: 16),
                        ),
                      ),
                      Expanded(
                        child: Text(
                          'Age: ${list[index].age.toStringAsFixed(2)}',
                          style: const TextStyle(fontSize: 12),
                        ),
                      )
                    ],
                  ),
                ));
          },
        );
      },
    );
  }
}

SearchAppBarPageStream 示例

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:search_app_bar_page/search_app_bar_page.dart';

final dataListPerson = <Person>[
  // ... 数据列表
];

final dataListPerson2 = <Person>[
  // ... 数据列表
];

final dataListPerson3 = <Person>[
  // ... 数据列表
];

class SearchAppBarStream extends StatefulWidget {
  const SearchAppBarStream();

  @override
  _SearchAppBarStreamState createState() => _SearchAppBarStreamState();
}

class _SearchAppBarStreamState extends State<SearchAppBarStream> {
  final Stream<List<Person>> _streamListPerson = (() async* {
    await Future<void>.delayed(const Duration(seconds: 3));
    yield dataListPerson;
    await Future<void>.delayed(const Duration(seconds: 4));
    yield dataListPerson2;
    await Future<void>.delayed(const Duration(seconds: 5));
    yield dataListPerson3;
  })();

  @override
  Widget build(BuildContext context) {
    return SearchAppBarPageStream<Person>(
      searchAppBarCenterTitle: true,
      searchAppBarHintText: 'Search for a name',
      searchAppBarTitle: const Text(
        'Search Stream Page',
        style: TextStyle(fontSize: 20),
      ),
      listStream: _streamListPerson,
      stringFilter: (Person person) => person.name,
      filtersType: FiltersTypes.contains,
      obxListBuilder: (context, list, isModSearch) {
        if (list.isEmpty) {
          return const Center(
              child: Text(
            'NOTHING FOUND',
            style: TextStyle(fontSize: 14),
          ));
        }
        return Column(
          children: [
            Expanded(
              child: ListView.builder(
                itemCount: list.length,
                itemBuilder: (_, index) {
                  return Card(
                      margin: const EdgeInsets.symmetric(
                          horizontal: 16, vertical: 4),
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(4)),
                      child: Padding(
                        padding: const EdgeInsets.all(14.0),
                        child: Row(
                          children: [
                            Expanded(
                              child: Text(
                                'Name: ${list[index].name}',
                                style: const TextStyle(fontSize: 16),
                              ),
                            ),
                            Expanded(
                              child: Text(
                                'Age: ${list[index].age.toStringAsFixed(2)}',
                                style: const TextStyle(fontSize: 12),
                              ),
                            )
                          ],
                        ),
                      ));
                },
              ),
            ),
            MaterialButton(
                onPressed: () {
                  Get.toNamed(Routes.PAGE_2);
                },
                child: const Text(
                  'Ir para SearchPage',
                  style: TextStyle(fontSize: 20),
                )),
            MaterialButton(
                onPressed: () {
                  setState(() {});
                },
                child: const Text(
                  'SetState',
                  style: TextStyle(fontSize: 20),
                )),
          ],
        );
      },
    );
  }
}

其他示例

更多示例可以参考官方文档或者直接查看GitHub仓库中的example文件夹。

希望这些信息能帮助你更好地理解和使用search_app_bar_page插件。如果你有任何问题或需要进一步的帮助，请随时提问！

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

nodeper 1楼•2 天前

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

当然，以下是如何在Flutter应用中使用search_app_bar_page插件来实现搜索功能的示例代码。假设你已经在pubspec.yaml文件中添加了search_app_bar_page依赖，并且已经运行了flutter pub get。

1. 添加依赖

首先，确保你的pubspec.yaml文件中包含以下依赖：

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

2. 导入包

在你的Dart文件中，导入search_app_bar_page包：

import 'package:search_app_bar_page/search_app_bar_page.dart';

3. 实现搜索功能

下面是一个完整的示例，展示如何使用search_app_bar_page插件来创建一个具有搜索功能的页面：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Search App Bar Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SearchAppBarPageExample(),
    );
  }
}

class SearchAppBarPageExample extends StatefulWidget {
  @override
  _SearchAppBarPageExampleState createState() => _SearchAppBarPageExampleState();
}

class _SearchAppBarPageExampleState extends State<SearchAppBarPageExample> {
  List<String> items = List.generate(100, (i) => "Item $i");
  String searchQuery = "";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Search App Bar Example'),
      ),
      body: SearchAppBarPage(
        searchQuery: searchQuery,
        onSearchQueryChanged: (query) {
          setState(() {
            searchQuery = query;
          });
        },
        onSearchConfirmed: (query) {
          // 处理确认搜索事件
          print("Confirmed search query: $query");
        },
        body: Column(
          children: [
            Expanded(
              child: ListView.builder(
                itemCount: items
                    .where((item) =>
                        item.toLowerCase().contains(searchQuery.toLowerCase()))
                    .toList()
                    .length,
                itemBuilder: (context, index) {
                  String item = items
                      .where((item) =>
                          item.toLowerCase().contains(searchQuery.toLowerCase()))
                      .toList()[index];
                  return ListTile(
                    title: Text(item),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

代码解释

导入必要的包：我们导入了flutter/material.dart和search_app_bar_page/search_app_bar_page.dart。
创建应用入口：MyApp是一个无状态Widget，它包含了一个MaterialApp，并设置了应用的主题和主页。
创建主页面：SearchAppBarPageExample是一个有状态Widget，它管理搜索查询的状态。
构建页面：在_SearchAppBarPageExampleState中，我们定义了items列表和searchQuery字符串。SearchAppBarPage组件接收搜索查询、搜索查询变化时的回调和确认搜索时的回调。
构建搜索结果的UI：我们使用ListView.builder来动态生成搜索结果列表，根据搜索查询过滤items列表。

这个示例展示了如何使用search_app_bar_page插件实现基本的搜索功能，包括搜索查询的实时更新和搜索结果的显示。你可以根据需要进一步定制和扩展这个示例。