Flutter ListView.builder中DropdownButton点击不弹出菜单问题求助

问题核心原因 #

• DropdownButton 未实现必填的onChanged回调，无该回调的下拉按钮默认处于禁用状态，点击不会触发任何响应
• 未给每个独立的下拉按钮维护对应的选中状态值，多个下拉共用同一个未初始化的valuechoose变量逻辑错误
• 未设置isExpanded: true，下拉按钮在横向容器内容易出现布局溢出，同时可能导致点击热区异常
• 当前下拉选项逻辑错误，你定义的dropdownlist是选项列表，但代码里错误把作为提示语的europeanCountries当成了选项源

修正后代码 #

你只需要修改_LIstOfItemState部分的代码即可：

class _LIstOfItemState extends State<LIstOfItem> {
  // 存储每个下拉框的选中值，初始为null显示hint提示
  List<String?> selectedValues = [];

  @override
  void initState() {
    super.initState();
    // 按照下拉数量初始化选中值列表
    selectedValues = List.filled(widget.europeanCountries.length, null);
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      scrollDirection: Axis.horizontal,
      itemCount: widget.europeanCountries.length,
      itemBuilder: (context, index) {
        return Container(
          width: 210,
          decoration: BoxDecoration(
            border: Border.all(
              color: Colors.white,
              width: .5,
            ),
            borderRadius: BorderRadius.all(Radius.circular(15)),
          ),
          padding: const EdgeInsets.symmetric(horizontal: 9.0),
          margin: const EdgeInsets.symmetric(horizontal: 9.0, vertical: 20),
          child: DropdownButton(
            isExpanded: true, // 适配容器宽度避免溢出
            underline: SizedBox(), // 去掉默认下划线适配你的边框样式
            dropdownColor: Colors.green,
            value: selectedValues[index],
            hint: Text(widget.europeanCountries[index],
                style: TextStyle(color: Colors.white)),
            // 改用你定义的dropdownlist作为选项源，如果你确实要使用europeanCountries作为选项可以改回来
            items: widget.dropdownlist.map((valitem) {
              return DropdownMenuItem(
                child: Text(
                  valitem,
                  style: TextStyle(color: Colors.white),
                ),
                value: valitem,
              );
            }).toList(),
            // 实现onChanged回调更新选中状态
            onChanged: (newVal) {
              setState(() {
                selectedValues[index] = newVal as String?;
              });
            },
          ),
          alignment: Alignment.center,
        );
      },
    );
  }
}

父组件中冗余的valuechoose变量可以直接删除，现在所有下拉的选中状态都在子组件的selectedValues列表中独立维护。

修复后效果和你原有界面风格一致，点击即可正常弹出选项菜单：

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