Flutter搜索栏功能插件search_bar

Flutter搜索栏功能插件search_bar_bloc的使用

搜索栏（SearchBar）与Bloc

该插件提供了一个带有Bloc状态管理的搜索栏。其目的是为无状态组件提供一个简单的实现搜索栏的方法。

功能特点

搜索栏的组成可以自定义，并且未来会处理更多的参数。

入门指南

如果你不熟悉Bloc状态管理和flutter_bloc包，以下是需要的资源：

flutter_bloc
bloc
equatable

使用方法

这里是一个如何使用BlocProvider实现搜索栏的快速示例：

[@override](/user/override)
Widget build(BuildContext context) {
  return BlocProvider(
    create: (_) => SearchBarCubit(), // 创建一个SearchBarCubit实例
    child: Column(
      children: [
        const SearchBar(hintText: "搜索一些东西..."), // 搜索栏
        BlocBuilder<SearchBarCubit, SearchBarState>(
            buildWhen: (previous, current) => previous.content != current.content, // 只有当内容变化时才重新构建
            builder: (context, state) {
              return Text("你正在搜索: ${state.content}"); // 显示当前搜索的内容
            }),
      ],
    ),
  );
}

BlocProvider示例

这里是如何使用BlocProvider实现搜索栏的一个简单示例：

[@override](/user/override)
Widget build(BuildContext context) {
  return BlocProvider(
    create: (_) => SearchBarCubit(),
    child: Column(
      children: [
        const SearchBar(hintText: "搜索一些东西..."),
        BlocBuilder<SearchBarCubit, SearchBarState>(
            buildWhen: (previous, current) => previous.content != current.content,
            builder: (context, state) {
              return Text("你正在搜索: ${state.content}");
            }),
      ],
    ),
  );
}

BlocListener示例

这里是如何使用BlocListener实现搜索栏的一个简单示例：

class BlockBuilderExampleWidget extends StatelessWidget {
  const BlockBuilderExampleWidget({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return BlocListener<SearchBarCubit, SearchBarState>(
      listenWhen: (previous, current) => previous.content != current.content, // 只有当内容变化时才触发监听器
      listener: (context, state) {
        print("你正在搜索: ${state.content}"); // 打印当前搜索的内容
      },
      child: Container(),
    );
  }
}

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

gougou168 1楼

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

search_bar_bloc 是一个用于在 Flutter 应用中实现搜索功能的插件，它基于 BLoC（Business Logic Component）模式来管理搜索状态和逻辑。使用这个插件可以帮助你更轻松地实现复杂的搜索功能，同时保持代码的清晰和可维护性。

安装

首先，你需要在 pubspec.yaml 文件中添加 search_bar_bloc 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  search_bar_bloc: ^1.0.0  # 请根据最新版本号进行替换

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

基本使用

1. 创建 BLoC

首先，你需要创建一个 SearchBarBloc 来管理搜索逻辑。通常，你可以将 SearchBarBloc 放在你的应用中的某个地方，比如 blocs 文件夹中。

import 'package:search_bar_bloc/search_bar_bloc.dart';

class MySearchBarBloc extends SearchBarBloc<String> {
  MySearchBarBloc() : super('');

  [@override](/user/override)
  Future<List<String>> search(String query) async {
    // 这里实现你的搜索逻辑
    // query 是用户输入的搜索词
    // 返回一个包含搜索结果的列表
    await Future.delayed(Duration(seconds: 1)); // 模拟网络延迟
    return ['Result 1', 'Result 2', 'Result 3'];
  }
}

2. 在 UI 中使用

接下来，你可以在你的 UI 中使用 SearchBarBloc。通常，你可以在 Scaffold 的 appBar 中使用 SearchBar 组件。

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:search_bar_bloc/search_bar_bloc.dart';

class SearchPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => MySearchBarBloc(),
      child: Scaffold(
        appBar: AppBar(
          title: Text('Search'),
          actions: [
            SearchBar<MySearchBarBloc, String>(
              onSearch: (query) {
                // 这里可以处理搜索逻辑
                print('Searching for: $query');
              },
            ),
          ],
        ),
        body: BlocBuilder<MySearchBarBloc, SearchBarState<String>>(
          builder: (context, state) {
            if (state is SearchBarLoading) {
              return Center(child: CircularProgressIndicator());
            } else if (state is SearchBarSuccess) {
              return ListView.builder(
                itemCount: state.results.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(state.results[index]),
                  );
                },
              );
            } else if (state is SearchBarError) {
              return Center(child: Text('Error: ${state.message}'));
            } else {
              return Center(child: Text('Start typing to search'));
            }
          },
        ),
      ),
    );
  }
}