Flutter多选下拉插件dropdown_multi_select的使用

当然，以下是一个关于如何在Flutter中使用dropdown_multi_select插件来实现多选下拉功能的代码示例。dropdown_multi_select是一个流行的Flutter插件，用于创建具有多选功能的下拉列表。

首先，确保你的pubspec.yaml文件中已经添加了dropdown_multi_select依赖：

dependencies:
  flutter:
    sdk: flutter
  dropdown_multi_select: ^x.y.z  # 请替换为最新版本号

然后，运行flutter pub get来安装依赖。

接下来是一个完整的Flutter应用程序示例，展示了如何使用dropdown_multi_select：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter MultiSelect Dropdown Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 定义一个列表来存储多选下拉框的选项
  final List<String> _items = [
    'Apple',
    'Banana',
    'Cherry',
    'Date',
    'Elderberry',
    'Fig',
    'Grape',
  ];

  // 定义一个列表来存储选中的值
  List<String> _selectedItems = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MultiSelect Dropdown Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              'Selected Items:',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 10),
            // 显示选中的值
            Wrap(
              children: _selectedItems.map((item) => Chip(
                label: Text(item),
                backgroundColor: Colors.blue.shade200,
              )).toList(),
            ),
            SizedBox(height: 20),
            // 多选下拉框
            DropdownMultiSelect(
              values: _items,
              selectedValues: _selectedItems,
              label: 'Select Fruits',
              onChange: (List<String> newValue) {
                setState(() {
                  _selectedItems = newValue;
                });
              },
              hint: 'Pick your favorite fruits',
              selectedItemsTextStyle: TextStyle(color: Colors.black),
              itemCount: _items.length,
              showSearchBox: true,
              searchInactiveIcon: Icon(Icons.search),
              searchActiveIcon: Icon(Icons.clear),
              searchStyle: TextStyle(color: Colors.black),
              searchBoxDecoration: InputDecoration(
                prefixIcon: Icon(Icons.search),
                border: OutlineInputBorder(),
                filled: true,
                hintText: 'Search...',
                fillColor: Colors.grey[200]!,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

代码解释：

1. 依赖导入：确保在pubspec.yaml中添加了dropdown_multi_select依赖。
2. 数据定义：在_MyHomePageState类中定义了一个字符串列表_items作为多选下拉框的选项，以及一个列表_selectedItems来存储选中的值。
3. UI构建：
   • 使用Column布局来排列文本和下拉框。
   • 使用Wrap和Chip小部件来显示选中的值。
   • 使用DropdownMultiSelect小部件来创建多选下拉框，并配置相关属性，如values、selectedValues、label、onChange等。
   • onChange回调用于更新选中的值。

运行这个应用程序，你将看到一个多选下拉框，可以选择多个水果，并且选中的水果会显示在下拉框下方的Chip小部件中。