Flutter搜索栏插件easy_search_bar_2的使用

Flutter搜索栏插件easy_search_bar_2的使用

预览

默认AppBar预览 浮动AppBar预览

安装

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

dependencies:
  easy_search_bar_2: ^1.0.0-alpha.0

从easy_search_bar迁移到easy_search_bar_2

迁移时需要进行一些简单的更改:

  • 将所有easy_search_bar替换为easy_search_bar_2
  • 将所有EasySearchBar替换为EasySearchBar2
  • 如果需要,可以迁移至新的泛型设置(EasySearchBar2接受一个泛型参数,并且可能需要提供名为suggestionToString的参数)

基本示例

你可以创建一个带有建议列表的基本搜索栏示例如下:

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

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

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

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

class _MyHomePageState extends State<MyHomePage> {
  String searchValue = '';
  final List<String> _suggestions = [
    '阿富汗',
    '阿尔巴尼亚',
    '阿尔及利亚',
    '澳大利亚',
    '巴西',
    '德国',
    '马达加斯加',
    '莫桑比克',
    '葡萄牙',
    '赞比亚',
  ];

  Future<List<String>> _fetchSuggestions(String searchValue) async {
    await Future.delayed(const Duration(milliseconds: 750));

    return _suggestions
        .where(
          (element) => element.toLowerCase().contains(searchValue.toLowerCase()),
        )
        .toList();
  }

  [@override](/user/override)
  Widget build(BuildContext context) => MaterialApp(
        title: '示例',
        theme: ThemeData(primarySwatch: Colors.orange),
        home: Scaffold(
          appBar: EasySearchBar2(
            title: const Text('示例'),
            onSearch: (value) => setState(() => searchValue = value),
            actions: [
              IconButton(icon: const Icon(Icons.person), onPressed: () {}),
            ],
            asyncSuggestions: (value) async => _fetchSuggestions(value),
          ),
          drawer: Drawer(
            child: ListView(
              padding: EdgeInsets.zero,
              children: [
                const DrawerHeader(
                  decoration: BoxDecoration(
                    color: Colors.blue,
                  ),
                  child: Text('抽屉头部'),
                ),
                ListTile(
                  title: const Text('项目1'),
                  onTap: () => Navigator.pop(context),
                ),
                ListTile(
                  title: const Text('项目2'),
                  onTap: () => Navigator.pop(context),
                ),
              ],
            ),
          ),
          body: Center(child: Text('值: $searchValue')),
        ),
      );
}

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

1 回复

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


当然,下面是一个关于如何使用Flutter插件easy_search_bar_2的示例代码。这个插件可以帮助你快速集成一个功能强大的搜索栏到你的Flutter应用中。

首先,确保你的pubspec.yaml文件中已经添加了easy_search_bar_2依赖:

dependencies:
  flutter:
    sdk: flutter
  easy_search_bar_2: ^最新版本号  # 请替换为实际的最新版本号

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

以下是一个简单的示例,展示如何在Flutter中使用easy_search_bar_2插件:

import 'package:flutter/material.dart';
import 'package:easy_search_bar_2/easy_search_bar.dart';

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<String> items = List.generate(100, (i) => "Item ${i + 1}");
  String? searchQuery = "";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Easy Search Bar Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            EasySearchBar2(
              hintText: 'Search...',
              onChanged: (query) {
                setState(() {
                  searchQuery = query;
                });

                // 可以在这里添加过滤逻辑,比如根据query更新显示的列表
                // filteredItems = items.where((item) => item.contains(query)).toList();
              },
              leading: Icon(Icons.search),
              trailing: IconButton(
                icon: Icon(Icons.clear),
                onPressed: () {
                  setState(() {
                    searchQuery = "";
                    // 如果有过滤后的列表,可以重置回原始列表
                    // filteredItems = [...items];
                  });
                },
              ),
            ),
            SizedBox(height: 16),
            Expanded(
              child: ListView.builder(
                itemCount: items.length,
                itemBuilder: (context, index) => Padding(
                  padding: const EdgeInsets.symmetric(vertical: 8.0),
                  child: Text(
                    searchQuery == null || searchQuery!.isEmpty || 
                    items[index].contains(searchQuery!)
                        ? items[index]
                        : '',
                    style: TextStyle(decoration: searchQuery != null && 
                    !searchQuery!.isEmpty && 
                    !items[index].contains(searchQuery!) 
                        ? TextDecoration.lineThrough 
                        : TextDecoration.none),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中,我们创建了一个简单的Flutter应用,包含一个搜索栏和一个列表。搜索栏使用EasySearchBar2插件,当用户在搜索栏中输入文本时,onChanged回调会被触发,从而更新searchQuery状态。你可以根据searchQuery的值来过滤列表项(在示例中,只是简单地通过文本包含关系来显示或隐藏列表项)。

注意:

  • EasySearchBar2onChanged回调返回用户输入的搜索查询。
  • leading属性用于设置搜索栏左侧的图标(这里使用了一个搜索图标)。
  • trailing属性用于设置搜索栏右侧的图标(这里使用了一个清除图标,用于清空搜索查询)。

你可以根据需要进一步自定义和扩展这个示例,比如添加更多的过滤逻辑、动画效果等。

回到顶部