Flutter自定义带搜索功能的下拉菜单插件customedropdownlistwithsearch的使用

在Flutter中，custom_dropdown_search 插件提供了一个可定制的带有搜索功能的下拉菜单组件。该插件支持多种功能，例如暗模式主题、自定义项目类型等。

特性

• 可定制的下拉搜索小部件
• 支持深色和浅色主题模式
• 轻松集成到任何Flutter应用中
• 可以与各种项目类型（字符串、模型等）一起使用

安装

要使用此插件，首先需要将其添加到 pubspec.yaml 文件中：

dependencies:
  custom_dropdown_search: ^0.0.1  # 替换为最新版本号

然后运行以下命令以安装依赖项：

flutter pub get

使用方法

基本用法

以下是一个简单的示例，展示如何使用 custom_dropdown_search 插件创建一个带有搜索功能的下拉菜单：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '自定义下拉搜索示例',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: DropdownSearchExample(),
    );
  }
}

class DropdownSearchExample extends StatefulWidget {
  @override
  _DropdownSearchExampleState createState() => _DropdownSearchExampleState();
}

class _DropdownSearchExampleState extends State<DropdownSearchExample> {
  List<String> employees = [
    "John Doe",
    "Jane Smith",
    "Bob Johnson",
    "Alice White",
    "Charlie Brown",
  ];

  String? selectedEmployee;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("自定义下拉搜索示例"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: CustomDropdownSearch<String>(
          items: employees,   // 下拉菜单的选项列表
          hintText: "选择员工",  // 提示文本
          onChanged: (value) {
            setState(() {
              selectedEmployee = value;  // 更新选中的值
            });
          },
        ),
      ),
    );
  }
}

使用自定义对象（模型）

你还可以使用自定义的数据类型，如模型类。以下是一个使用 Employee 模型的示例：

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

class Employee {
  final String id;
  final String name;

  Employee({required this.id, required this.name});
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '自定义下拉搜索与模型',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: DropdownWithModelExample(),
    );
  }
}

class DropdownWithModelExample extends StatefulWidget {
  @override
  _DropdownWithModelExampleState createState() => _DropdownWithModelExampleState();
}

class _DropdownWithModelExampleState extends State<DropdownWithModelExample> {
  List<Employee> employees = [
    Employee(id: "1", name: "John Doe"),
    Employee(id: "2", name: "Jane Smith"),
    Employee(id: "3", name: "Bob Johnson"),
  ];

  Employee? selectedEmployee;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("模型示例下拉框"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: CustomDropdownSearch<Employee>(
          items: employees,  // 下拉菜单的员工对象列表
          hintText: "选择员工",
          onChanged: (value) {
            setState(() {
              selectedEmployee = value;  // 更新选中的员工对象
            });
          },
        ),
      ),
    );
  }
}

自定义主题

你可以通过更改颜色、文字样式等方式来自定义下拉菜单的外观。以下是如何根据当前主题（深色或浅色模式）来定制下拉菜单的示例：

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

class ThemedDropdownSearch extends StatelessWidget {
  final List<String> items = ["选项1", "选项2", "选项3"];

  @override
  Widget build(BuildContext context) {
    bool isDarkMode = Theme.of(context).brightness == Brightness.dark;

    return Scaffold(
      appBar: AppBar(
        title: Text("自定义主题下拉框"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: CustomDropdownSearch<String>(
          items: items,
          hintText: "选择一个选项",
          onChanged: (value) {},
          // 自定义下拉框的主题
          decoration: CustomDropdownDecoration(
            closedFillColor: isDarkMode ? Colors.grey.shade800 : Colors.white,
            expandedFillColor: isDarkMode ? Colors.grey.shade900 : Colors.white,
            headerStyle: TextStyle(color: isDarkMode ? Colors.white : Colors.black),
            listItemStyle: TextStyle(color: isDarkMode ? Colors.white : Colors.black),
            hintStyle: TextStyle(color: isDarkMode ? Colors.white : Colors.grey),
          ),
        ),
      ),
    );
  }
}

CustomDropdownDecoration 类

CustomDropdownDecoration 类允许你自定义下拉菜单的外观。可用字段包括：

• closedFillColor: 下拉菜单关闭时的背景颜色。
• expandedFillColor: 下拉菜单展开时的背景颜色。
• headerStyle: 头部的文字样式。
• listItemStyle: 列表项的文字样式。
• hintStyle: 提示文字的文字样式。
• noResultFoundStyle: 当未找到搜索结果时的文字样式。

示例定制化

以下是一个自定义样式的示例：

CustomDropdownSearch<String>(
  items: ["选项1", "选项2", "选项3"],
  onChanged: (value) => print("已选择: $value"),
  hintText: "选择一个选项",
  decoration: CustomDropdownDecoration(
    closedFillColor: Colors.blue,
    expandedFillColor: Colors.lightBlue,
    headerStyle: TextStyle(color: Colors.white),
    listItemStyle: TextStyle(color: Colors.black),
  ),
)