Flutter多值下拉选择插件multivalued_drop_down的使用

特性

• 多选功能：允许用户从下拉菜单中选择多个项目。
• 可定制外观：提供装饰和文本样式选项以匹配应用的设计风格。
• 事件回调：提供点击和更改回调以处理用户交互。
• 状态管理：内部维护状态，并在选择更改时动态更新UI。

开始使用

添加依赖

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

dependencies:
  multivalued_drop_down: ^0.0.1

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

flutter pub add multivalued_drop_down

导入包：

import 'package:dropdown_button2/multivalued_drop_down.dart';

示例代码

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

import 'package:flutter/material.dart';
import 'package:dropdown_button2/multivalued_drop_down.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('CustomMultiValuedDropDown 示例'),
        ),
        body: MultiValueDropdownExample(),
      ),
    );
  }
}

class MultiValueDropdownExample extends StatefulWidget {
  [@override](/user/override)
  _MultiValueDropdownExampleState createState() => _MultiValueDropdownExampleState();
}

class _MultiValueDropdownExampleState extends State<MultiValueDropdownExample> {
  // 定义选中的列表
  List<String> selectedItems = [];

  // 定义下拉菜单的选项列表
  List<String> dropdownItems = [
    '选项1',
    '选项2',
    '选项3',
    '选项4',
    '选项5',
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: CustomMultiValuedDropDown(
          // 当前选中的列表
          selectedList: selectedItems,
          // 下拉菜单的选项列表
          dropDownList: dropdownItems,
          // 提示文本（当未选择任何选项时显示）
          hintText: "请选择选项",
          // 点击回调
          onTap: () {
            print("下拉框被点击");
          },
          // 更改回调
          onChanged: (value) {
            setState(() {
              print("选中值: $value");
            });
          },
          // 下拉框容器的装饰
          dropDownBoxDecoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(8.0),
            boxShadow: [
              BoxShadow(
                color: Colors.grey.withOpacity(0.5),
                spreadRadius: 2,
                blurRadius: 5,
              ),
            ],
          ),
          // 文本样式
          textStyle: TextStyle(
            color: Colors.black,
            fontSize: 16,
          ),
        ),
      ),
    );
  }
}