Flutter实现含CheckboxListTile的DropdownButton的报错解决与多选方案

原生DropdownButton是单选组件，有两个强制约束：

• 所有DropdownMenuItem的value属性必须全局唯一
• 当前绑定的value变量值必须恰好匹配列表中某一个DropdownMenuItem的value

你的现有实现存在两个核心问题导致报错和逻辑异常：

1. 所有CheckboxListTile共用同一个isChecked状态变量，选中任意一个复选框都会同步修改所有选项的选中状态，状态逻辑完全混乱
2. DropdownButton默认点击选项就会触发选中并收起下拉面板，你在选项内部嵌套CheckboxListTile后，点击复选框的事件会被拦截，无法触发DropdownButton的选中回调，也不符合单选组件的交互逻辑

如果只需要实现单选功能，临时修复报错可以把选项从CheckboxListTile换成普通的Text组件，修改后的Dropdown部分代码如下：

DropdownButton<String>(
  icon: const Icon(Icons.arrow_circle_down_sharp),
  items: const [
    DropdownMenuItem(
      child: Text('Azaz'),
      value: 'Azaz',
    ),
    DropdownMenuItem(
      child: Text('Sarmada'),
      value: 'Sarmada',
    ),
  ],
  value: checkBoxDropped,
  onChanged: (value) {
    setState(() {
      checkBoxDropped = value!;
    });
  },
)

原生DropdownButton不支持多选，你可以通过自定义弹窗的方式实现带复选框的多选下拉，实现逻辑如下：

1. 定义存储选中项的列表，替换原来的单选字符串变量
2. 用自定义按钮点击事件触发弹出弹窗，弹窗内放带多选框的选项列表
3. 选中后关闭弹窗，同步更新选中项的展示逻辑

完整可运行的实现代码参考：

import 'package:flutter/material.dart';

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

  @override
  _SendingMessagesState createState() => _SendingMessagesState();
}

class _SendingMessagesState extends State<SendingMessages> {
  // 存储所有可选选项
  final List<String> _options = ['Azaz', 'Sarmada'];
  // 存储已选中的选项
  final List<String> _selectedOptions = [];

  // 展示多选下拉弹窗
  void _showMultiSelectDialog() async {
    await showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: const Text('请选择筛选条件'),
          content: SingleChildScrollView(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: _options.map((option) {
                return CheckboxListTile(
                  value: _selectedOptions.contains(option),
                  title: Text(option),
                  onChanged: (checked) {
                    setState(() {
                      if (checked == true) {
                        _selectedOptions.add(option);
                      } else {
                        _selectedOptions.remove(option);
                      }
                    });
                  },
                );
              }).toList(),
            ),
          ),
          actions: [
            TextButton(
              onPressed: () => Navigator.pop(context),
              child: const Text('确定'),
            )
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          'إرسال إشعارات',
          style: TextStyle(fontSize: 24.0),
        ),
        centerTitle: true,
      ),
      body: ListView(
        children: [
          const SizedBox(height: 20),
          Center(
            // 自定义触发按钮替代原生DropdownButton
            child: InkWell(
              onTap: _showMultiSelectDialog,
              child: Container(
                padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.grey),
                  borderRadius: BorderRadius.circular(4),
                ),
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Text(
                      _selectedOptions.isEmpty ? '请选择' : _selectedOptions.join('、'),
                    ),
                    const SizedBox(width: 8),
                    const Icon(Icons.arrow_circle_down_sharp),
                  ],
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}

你可以直接修改_options列表调整可选选项，适配自己的业务需求。

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