Flutter多级联动下拉选择插件multi_dropdown的使用

简介

multi_dropdown 是一个功能强大且可高度定制的Flutter插件，用于管理并搜索下拉列表中的多个项目。你可以根据需要自定义下拉框样式，并通过控制器以编程方式控制下拉框。

安装

在 pubspec.yaml 文件中添加依赖：

dependencies:
  multi_dropdown: ^3.0.0 # 根据实际版本号进行修改

然后执行 flutter pub get 命令来安装包。

使用方法

引入包

在 Dart 文件顶部引入 multi_dropdown 包：

import 'package:multi_dropdown/multi_dropdown.dart';

创建 MultiDropdown 组件

以下是一个完整的示例代码，展示了如何创建和配置 MultiDropdown<User> 组件。在这个例子中，我们定义了一个简单的用户模型 User，并用它作为下拉选项的值类型。

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Multiselect dropdown demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: const MyHomePage(),
    );
  }
}

class User {
  final String name;
  final int id;

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

  @override
  String toString() {
    return 'User(name: $name, id: $id)';
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  final _formKey = GlobalKey<FormState>();

  final controller = MultiSelectController<User>();

  @override
  Widget build(BuildContext context) {
    var items = [
      DropdownItem(label: 'Nepal', value: User(name: 'Nepal', id: 1)),
      DropdownItem(label: 'Australia', value: User(name: 'Australia', id: 6)),
      DropdownItem(label: 'India', value: User(name: 'India', id: 2)),
      DropdownItem(label: 'China', value: User(name: 'China', id: 3)),
      DropdownItem(label: 'USA', value: User(name: 'USA', id: 4)),
      DropdownItem(label: 'UK', value: User(name: 'UK', id: 5)),
      DropdownItem(label: 'Germany', value: User(name: 'Germany', id: 7)),
      DropdownItem(label: 'France', value: User(name: 'France', id: 8)),
    ];

    return Scaffold(
      appBar: AppBar(
        title: const Text('MultiDropdown Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Form(
          key: _formKey,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              MultiDropdown<User>(
                items: items,
                controller: controller,
                enabled: true,
                searchEnabled: true,
                chipDecoration: const ChipDecoration(
                  backgroundColor: Colors.yellow,
                  wrap: true,
                  runSpacing: 2,
                  spacing: 10,
                ),
                fieldDecoration: FieldDecoration(
                  hintText: 'Countries',
                  hintStyle: const TextStyle(color: Colors.black87),
                  prefixIcon: const Icon(Icons.flag),
                  showClearIcon: false,
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(12),
                    borderSide: const BorderSide(color: Colors.grey),
                  ),
                  focusedBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(12),
                    borderSide: const BorderSide(
                      color: Colors.black87,
                    ),
                  ),
                ),
                dropdownDecoration: const DropdownDecoration(
                  marginTop: 2,
                  maxHeight: 500,
                  header: Padding(
                    padding: EdgeInsets.all(8),
                    child: Text(
                      'Select countries from the list',
                      textAlign: TextAlign.start,
                      style: TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),
                dropdownItemDecoration: DropdownItemDecoration(
                  selectedIcon: const Icon(Icons.check_box, color: Colors.green),
                  disabledIcon: const Icon(Icons.lock, color: Colors.grey),
                ),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please select a country';
                  }
                  return null;
                },
                onSelectionChange: (selectedItems) {
                  debugPrint("OnSelectionChange: $selectedItems");
                },
              ),
              const SizedBox(height: 12),
              Wrap(
                spacing: 8,
                children: [
                  ElevatedButton(
                    onPressed: () {
                      if (_formKey.currentState?.validate() ?? false) {
                        final selectedItems = controller.selectedItems;
                        debugPrint(selectedItems.toString());
                      }
                    },
                    child: const Text('Submit'),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      controller.selectAll();
                    },
                    child: const Text('Select All'),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      controller.clearAll();
                    },
                    child: const Text('Unselect All'),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      controller.addItems([
                        DropdownItem(
                            label: 'France',
                            value: User(name: 'France', id: 8)),
                      ]);
                    },
                    child: const Text('Add Items'),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      controller.selectWhere((element) =>
                          element.value.id == 1 ||
                          element.value.id == 2 ||
                          element.value.id == 3);
                    },
                    child: const Text('Select Where'),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      controller.selectAtIndex(0);
                    },
                    child: const Text('Select At Index'),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      controller.openDropdown();
                    },
                    child: const Text('Open/Close dropdown'),
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

参数说明

MultiDropdown

DropdownItem

ChipDecoration

FieldDecoration

DropdownDecoration

SearchFieldDecoration

DropdownItemDecoration

控制器（Controller）

MultiSelectController<T> 提供了对下拉框的选择、取消选择、清空选择等操作的支持。以下是常用的控制器方法：

• clearAll()：清空所有选择。
• selectWhere(bool Function(DropdownItem<T>) predicate)：根据条件选择项。
• setItems(List<DropdownItem<T>> options)：设置下拉项。
• addItem(DropdownItem<T> option)：添加单项。
• addItems(List<DropdownItem<T>> options)：添加多项。
• disableWhere(bool Function(DropdownItem<T>) predicate)：根据条件禁用项。
• selectAll()：全选。
• selectAtIndex(int index)：选择指定索引项。
• deselectWhere(bool Function(DropdownItem<T>) predicate)：根据条件取消选择项。
• items：获取所有项。
• selectedItems：获取已选项。
• disabledItems：获取禁用项。
• openDropdown()：打开下拉菜单。
• closeDropdown()：关闭下拉菜单。

通过以上内容，你应该能够轻松地将 multi_dropdown 插件集成到你的 Flutter 应用中，并实现多级联动下拉选择功能。如果你有任何问题或需要进一步的帮助，请随时查阅官方文档或访问 GitHub 仓库获取更多信息。