Flutter可搜索底部弹窗插件searchable_bottom_sheet的使用

Flutter可搜索底部弹窗插件searchable_bottom_sheet的使用

简介

无缝地从用户友好的底部弹窗中浏览并选择一个精心组织的列表。

关键特性

  • 基于模型的搜索：定义单一模型，包处理其余部分以实现无缝搜索。
  • 高度可定制的UI：轻松修改底部弹窗的设计，包括颜色、文本样式和布局。
  • 优化的搜索功能：为大型列表提供闪电般的搜索性能，确保流畅的用户体验。
  • 动态列表处理：根据搜索输入自动更新显示的列表。
  • 多搜索关键字：使用多个搜索关键字进行搜索。

演示

搜索底部弹窗演示

开始使用

  1. 安装包：在你的pubspec.yaml文件中添加以下行：
    dependencies:
  searchable_bottom_sheet: ^x.x.x
  2. 导入包：在你的Dart代码中导入必要的小部件：
    import 'package:searchable_bottom_sheet/searchable_bottom_sheet.dart';

使用方法

示例代码

// 在主页面中添加一个按钮，点击时打开搜索底部弹窗
class Demo extends StatefulWidget {
  const Demo({super.key});

  @override
  State<Demo> createState() => _DemoState();
}

class _DemoState extends State<Demo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            SearchableBottomSheet.show<FruitListModel>(
              context: context,
              items: fruitList,
              onItemSelected: (selectedFruit) {
                debugPrint("Selected Fruit: ${selectedFruit.fruitName}");
              },
              searchKey: (fruit) => [fruit.fruitName],
              useSafeArea: true,
              itemBuilder: (fruit) => ListTile(
                title: Text(fruit.fruitName),
              ),
            );
          },
          child: Text('Open Bottom Sheet'),
        ),
      ),
    );
  }
}

可搜索底部弹窗

SearchableBottomSheet.show<FruitListModel>(
  context: context,
  items: fruitList,
  onItemSelected: (selectedFruit) {
    debugPrint("Selected Fruit: ${selectedFruit.fruitName}");
  },
  searchKey: (fruit) => [fruit.fruitName],
  useSafeArea: true,
  itemBuilder: (fruit) => ListTile(
    title: Text(fruit.fruitName),
  ),
);

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

1 回复

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


searchable_bottom_sheet 是一个 Flutter 插件，用于创建一个可搜索的底部弹窗。它允许用户在弹窗中输入搜索词，并动态过滤显示的内容。这个插件非常适合需要从大量选项中进行选择的场景。

使用步骤

  1. 添加依赖
    首先，在 pubspec.yaml 文件中添加 searchable_bottom_sheet 插件的依赖：

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

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

  2. 导入插件
    在你的 Dart 文件中导入插件：

    import 'package:searchable_bottom_sheet/searchable_bottom_sheet.dart';

  3. 使用 SearchableBottomSheet
    你可以使用 SearchableBottomSheet 组件来创建一个可搜索的底部弹窗。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Searchable Bottom Sheet Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              showSearchableBottomSheet(
                context,
                items: List.generate(20, (index) => 'Item $index'),
                onItemSelected: (item) {
                  print('Selected item: $item');
                },
              );
            },
            child: Text('Open Searchable Bottom Sheet'),
          ),
        ),
      ),
    );
  }
}

    在这个示例中，点击按钮会打开一个可搜索的底部弹窗，弹窗中包含 20 个选项。用户可以通过输入搜索词来过滤这些选项，并且选择某个选项后会打印出选中的内容。

  4. 自定义选项
    你可以通过 itemBuilder 参数来自定义每个选项的显示方式。例如：

    showSearchableBottomSheet(
  context,
  items: List.generate(20, (index) => 'Item $index'),
  onItemSelected: (item) {
    print('Selected item: $item');
  },
  itemBuilder: (context, item, isSelected) {
    return ListTile(
      title: Text(item),
      leading: isSelected ? Icon(Icons.check) : null,
    );
  },
);
回到顶部