Flutter搜索下拉选择插件simple_search_dropdown的使用

simple_search_dropdown 是一个提供搜索栏、支持单选和多选的下拉菜单插件。以下是该插件的基本用法和示例代码。

导入插件

首先，需要在你的 pubspec.yaml 文件中添加依赖，并在 Dart 文件中导入：

import 'package:simple_search_dropdown/simple_search_dropdown.dart';

基本功能介绍

• 不同样式：可以自定义颜色、文本样式、图标等。
• 多选和单选：支持单选和多选。
• 添加和删除模式：可以通过函数添加或删除列表中的项目。
• 紧凑简单：占用屏幕空间小。

使用方法

单选下拉菜单

以下是一个单选下拉菜单的示例：

SearchDropDown(
    listItems: listitems,
    onDeleteItem: removeItem, 
    onAddItem: addItem,
    addMode: true,
    deleteMode: true,
    updateSelectedItem: updateSelectedItem,
),

多选下拉菜单

以下是一个多选下拉菜单的示例：

MultipleSearchDropDown(
    listItems: listitems,
    onDeleteItem: removeItem, 
    onAddItem: addItem,
    addMode: true,
    deleteMode: true,
    selectedItems: selectedMultipleItems,
    updateSelectedItems: updateSelectedItems,
),

重置下拉菜单到未选中状态

通过创建一个 GlobalKey 并将其分配给下拉菜单，可以实现重置功能：

final GlobalKey<SearchDropDownState> singleSearchKey = GlobalKey();

void clearSingleSelection() {
    singleSearchKey.currentState?.clearSelection();
}

TextButton(
    onPressed: clearSingleSelection,
    child: const Text('Clear Single Selection'),
),

完整示例 Demo

以下是一个完整的示例代码，展示了如何使用 simple_search_dropdown 插件：

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey<SearchDropDownState> singleSearchKey = GlobalKey();
  ValueItem? selectedSingleItem;

  void removeItem(ValueItem item) {
    // 实现删除逻辑
  }

  void addItem(ValueItem item) {
    // 实现添加逻辑
  }

  void updateSelectedItem(ValueItem? newSelectedItem) {
    setState(() {
      selectedSingleItem = newSelectedItem;
    });
  }

  void clearSingleSelection() {
    singleSearchKey.currentState?.resetSelection();
  }

  @override
  Widget build(BuildContext context) {
    List<ValueItem> listitems = [
      ValueItem(label: 'Item 1', value: 'item1'),
      ValueItem(label: 'Item 2', value: 'item2'),
      ValueItem(label: 'Item 3', value: 'item3'),
    ];

    return Scaffold(
      appBar: AppBar(
        title: const Text('Simple Search Dropdown Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            SearchDropDown(
              key: singleSearchKey,
              listItems: listitems,
              onDeleteItem: removeItem,
              onAddItem: addItem,
              updateSelectedItem: updateSelectedItem,
              selectedItem: listitems[0],
              searchBarSettings: SimpleSearchbarSettings(showKeyboardOnTap: true),
            ),
            const SizedBox(height: 20),
            TextButton(
              onPressed: clearSingleSelection,
              child: const Text('Clear Selection'),
            ),
            const SizedBox(height: 20),
            if (selectedSingleItem != null)
              Text('Selected Item: ${selectedSingleItem!.label}'),
          ],
        ),
      ),
    );
  }
}

class ValueItem<T> {
  final String label;
  final T value;

  ValueItem({required this.label, required this.value});
}

以上代码展示了一个简单的单选下拉菜单，用户可以选择一项并清空选择。你可以根据需求进一步扩展和完善此示例。