Flutter DropdownButton选中值未即时更新需关闭对话框才生效

开发者阿泽

2026-8-30

问题根因

下拉项选中后无法即时刷新、必须关闭对话框才更新的核心原因有两个：

当DropdownButton放在Dialog/AlertDialog弹窗内时，直接调用外层页面的setState只会触发外层页面重绘，不会刷新弹窗内部的UI
你在DropdownButton的onChanged和DropdownMenuItem的onTap里重复写了状态更新逻辑，两次setState触发时序冲突，也会导致UI更新异常

修复步骤

删除所有DropdownMenuItem上的onTap回调，DropdownButton自带的onChanged已经会在选中选项时自动触发，不需要重复在子项上监听点击事件
弹窗内容用StatefulBuilder包裹，拿到弹窗独立的状态刷新方法，选中项时同时触发弹窗内部状态刷新，即可实现选中后即时更新UI

修复后代码

// 弹窗实现代码
showDialog(
  context: context,
  builder: (dialogContext) {
    return StatefulBuilder(
      builder: (context, setDialogState) {
        return AlertDialog(
          content: DropdownButton<String>(
            value: _event,
            hint: const Text('Course Name'),
            borderRadius: BorderRadius.circular(10),
            isExpanded: true,
            onChanged: (newValue) {
              // 先更新弹窗内部状态，即时刷新下拉显示
              setDialogState(() {
                _event = newValue;
                _eventid.text = _event!;
              });
              // 同步更新外层页面状态，保证页面拿到最新值
              setState(() {
                _event = newValue;
                _eventid.text = _event!;
              });
            },
            items: dropdownlist.map((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
          ),
        );
      },
    );
  },
);