Flutter多选下拉插件multiselect_dropdown_flutter的使用

描述

这是一个简单的多选下拉菜单，具有全选和搜索功能。你可以使用一个简单的列表或是一个映射列表。

功能特性

• 使用MultiSelectDropdown处理映射列表。
• 使用MultiSelectDropdown.simpleList处理简单列表。

开始使用

添加依赖

在你的pubspec.yaml文件中添加multiselect_dropdown_flutter作为依赖：

dependencies:
  multiselect_dropdown_flutter: ^最新版本号

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

导入包

在需要使用的Dart文件顶部导入这个包：

import 'package:multiselect_dropdown_flutter/multiselect_dropdown_flutter.dart';

使用示例

下面提供了一个完整的示例代码，演示了如何在Flutter应用中使用multiselect_dropdown_flutter插件。

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

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'MultiSelect Dropdown demo',
      home: MultiSelectExample(),
    );
  }
}

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

  final List myList2 = const ['Dog', 'Cat', 'Mouse', 'Rabbit'];

  final List myList = const [
    {'id': 'dog', 'label': 'Dog'},
    {'id': 'cat', 'label': 'Cat'},
    {'id': 'mouse', 'label': 'Mouse'},
    {'id': 'rabbit', 'label': 'Rabbit'},
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('MultiSelect Dropdown Example')),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: [
            MultiSelectDropdown(
              list: myList,
              initiallySelected: const [],
              onChange: (newList) {
                // your logic for handling selected items
                print(newList);
              },
              numberOfItemsLabelToShow: 2, // label to be shown for 2 items
              whenEmpty: 'Choose from the list', // text to show when selected list is empty
            ),
            const SizedBox(height: 20),
            MultiSelectDropdown.simpleList(
              list: myList2,
              initiallySelected: const [],
              onChange: (newList) {
                // your logic for handling selected items
                print(newList);
              },
              includeSearch: true,
              includeSelectAll: true,
              isLarge: true, // Modal size will be a little large
              width: 150, // Must be a definite number
              boxDecoration: BoxDecoration(
                borderRadius: BorderRadius.circular(15),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在这个例子中，我们创建了两个MultiSelectDropdown实例：一个用于处理映射列表，另一个用于处理简单列表。每个下拉菜单都配置了不同的参数以展示其灵活性。例如，第一个下拉菜单指定了显示项数量和空状态文本；而第二个下拉菜单则启用了搜索和全选功能，并设置了较大的模态框尺寸及自定义装饰。

参数说明

以下是MultiSelectDropdown及其子类simpleList方法的主要参数解释：

如果您发现这个包有用，请不要吝啬您的点赞支持，同时也可以在GitHub上提出问题或功能请求，以便作者能够持续改进和完善它。