Flutter中实现下拉菜单多选功能并存储选中项至列表的方法

当然可以！Flutter原生的DropdownButton确实只支持单选，但我们可以通过自定义弹窗结合PopupMenuButton来实现多选功能，同时轻松把选中的选项存储到列表里。下面我给你一个完整的实现示例，应该能覆盖你想要的效果：

核心实现思路 #

• 用PopupMenuButton作为下拉触发按钮，点击后弹出带复选框的选项列表
• 用一个List变量维护选中的选项，比如List<String> _selectedItems = [];
• 每个选项对应CheckboxListTile，点击时更新选中状态和列表
• 在触发按钮上动态展示当前选中的项（用逗号分隔，未选中时显示提示文本）

完整代码示例 #

import 'package:flutter/material.dart';

class MultiSelectDropdown extends StatefulWidget {
  const MultiSelectDropdown({super.key});

  @override
  State<MultiSelectDropdown> createState() => _MultiSelectDropdownState();
}

class _MultiSelectDropdownState extends State<MultiSelectDropdown> {
  // 存储选中的选项列表
  final List<String> _selectedItems = [];
  // 所有可选的下拉选项
  final List<String> _options = ['选项1', '选项2', '选项3'];

  // 切换单个选项的选中状态
  void _toggleItemSelection(String item) {
    setState(() {
      if (_selectedItems.contains(item)) {
        _selectedItems.remove(item);
      } else {
        _selectedItems.add(item);
      }
    });
  }

  // 构建下拉弹窗内的多选列表
  Widget _buildMultiSelectList() {
    return SizedBox(
      width: 220,
      child: ListView.builder(
        shrinkWrap: true,
        itemCount: _options.length,
        itemBuilder: (context, index) {
          final currentItem = _options[index];
          return CheckboxListTile(
            title: Text(currentItem),
            value: _selectedItems.contains(currentItem),
            onChanged: (_) => _toggleItemSelection(currentItem),
            controlAffinity: ListTileControlAffinity.leading,
            contentPadding: const EdgeInsets.symmetric(horizontal: 12),
          );
        },
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    // 按钮上显示的文本：选中项拼接或提示语
    String buttonText = _selectedItems.isEmpty 
        ? '请选择选项' 
        : _selectedItems.join(', ');

    return PopupMenuButton(
      // 自定义下拉触发按钮的样式
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
        decoration: BoxDecoration(
          border: Border.all(color: Colors.grey.shade300),
          borderRadius: BorderRadius.circular(6),
        ),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              buttonText,
              style: const TextStyle(fontSize: 14),
            ),
            const SizedBox(width: 8),
            const Icon(Icons.arrow_drop_down, color: Colors.grey),
          ],
        ),
      ),
      // 构建下拉菜单内容
      itemBuilder: (context) => [
        PopupMenuItem(
          enabled: false, // 禁用默认点击关闭行为，让复选框操作更流畅
          child: _buildMultiSelectList(),
        ),
      ],
    );
  }
}

// 使用示例
void main() {
  runApp(const MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('Flutter多选下拉示例')),
      body: Center(child: MultiSelectDropdown()),
    ),
  ));
}

关键细节说明 #

• _selectedItems会实时存储你选中的所有选项，你可以在需要的地方直接使用这个列表（比如提交表单、展示选中结果等）
• 如果你需要更复杂的功能，比如全选/反选、选项搜索过滤，只需要在_buildMultiSelectList里添加对应的逻辑即可（比如顶部加一个全选的CheckboxListTile，或者添加搜索输入框）
• 按钮样式、弹窗宽度等都可以根据你的UI需求自由调整

内容的提问来源于stack exchange，提问作者Mark12