Flutter搜索栏插件search_bar_easy的使用

Flutter搜索栏插件search_bar_easy的使用

概述

search_bar_easy 是一个用于帮助你在应用程序中处理搜索功能的 Flutter 插件。它可以放在 appBar 中，也可以放在应用主体中，具体取决于你的需求。

预览

以下是 search_bar_easy 的默认和浮动模式的预览：

默认 AppBar 预览

浮动 AppBar 预览

安装

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

dependencies:
  ...
  search_bar_easy: ^1.0.0

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

迁移指南（从 1.x.x 到 2.x.x）

以前，你需要将 EasySearchBar 放置在 AppBar 中。现在，你可以直接用 EasySearchBar 替换 AppBar。

旧代码

Scaffold(
  appBar: AppBar(
    title: EasySearchBar(
      title: 'Example',
      onSearch: (value) => setState(() => searchValue = value)
    )
  )
)

新代码

Scaffold(
  appBar: EasySearchBar(
    title: Text('Example'),
    onSearch: (value) => setState(() => searchValue = value)
  )
)

基本示例（带建议列表）

以下是一个带有建议列表的基本搜索栏示例：

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

void main() {
  runApp(const MyHomePage());
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String searchValue = '';
  final List<String> _suggestions = [
    'Afeganistan',
    'Albania',
    'Algeria',
    'Australia',
    'Brazil',
    'German',
    'Madagascar',
    'Mozambique',
    'Portugal',
    'Zambia'
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Example',
      theme: ThemeData(
        primarySwatch: Colors.orange
      ),
      home: Scaffold(
        appBar: EasySearchBar(
          title: const Text('Example'),
          onSearch: (value) => setState(() => searchValue = value),
          suggestions: _suggestions // 添加建议列表
        ),
        drawer: Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: [
              const DrawerHeader(
                decoration: BoxDecoration(
                  color: Colors.blue,
                ),
                child: Text('Drawer Header'),
              ),
              ListTile(
                title: const Text('Item 1'),
                onTap: () => Navigator.pop(context)
              ),
              ListTile(
                title: const Text('Item 2'),
                onTap: () => Navigator.pop(context)
              )
            ]
          )
        ),
        body: Center(
          child: Text('Value: $searchValue')
        )
      )
    );
  }
}

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

1 回复

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


search_bar_easy 是一个用于 Flutter 的简单易用的搜索栏插件。它可以帮助你快速实现一个带有搜索功能的输入框，并且支持自定义样式和回调函数。以下是如何使用 search_bar_easy 插件的基本步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  search_bar_easy: ^1.0.0  # 请检查最新版本

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

2. 导入包

在你的 Dart 文件中导入 search_bar_easy 包：

import 'package:search_bar_easy/search_bar_easy.dart';

3. 使用 SearchBarEasy

你可以在你的 Flutter 应用中使用 SearchBarEasy 组件。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Search Bar Easy Example'),
        ),
        body: SearchExample(),
      ),
    );
  }
}

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

class _SearchExampleState extends State<SearchExample> {
  List<String> items = [
    'Apple',
    'Banana',
    'Cherry',
    'Date',
    'Elderberry',
    'Fig',
    'Grape',
    'Honeydew'
  ];

  List<String> filteredItems = [];

  [@override](/user/override)
  void initState() {
    super.initState();
    filteredItems = items;
  }

  void onSearch(String searchText) {
    setState(() {
      filteredItems = items
          .where((item) => item.toLowerCase().contains(searchText.toLowerCase()))
          .toList();
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      children: [
        SearchBarEasy(
          onSearch: onSearch,
          hintText: 'Search...',
          backgroundColor: Colors.grey[200],
          iconColor: Colors.blue,
          textColor: Colors.black,
        ),
        Expanded(
          child: ListView.builder(
            itemCount: filteredItems.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(filteredItems[index]),
              );
            },
          ),
        ),
      ],
    );
  }
}
回到顶部