在 Flutter 开发中，DropDownButton 是用于实现下拉选择功能的常用组件。然而，许多开发者，尤其是初学者，常常遇到一个棘手的问题：选择下拉项后，按钮上并未显示选中的值，而是依然显示提示文本（hint）或保持空白。这一现象的普遍性促使社区多次讨论，本文将深入剖析其根本原因，并提供系统性的解决方案。

问题现象：选择后为何“无动于衷”？

假设你写了以下代码：

String? selectedValue;
// ... 在 build 中
DropDownButton<String>(
  value: selectedValue,
  hint: Text('请选择'),
  items: ['选项A', '选项B']
    .map((e) => DropdownMenuItem(value: e, child: Text(e)))
    .toList(),
  onChanged: (newValue) {
    // 此处通常需要 setState
  },
)

当你点击并选择“选项A”后，下拉菜单关闭，但按钮上依然显示“请选择”或空白。对于首次接触 Flutter 的开发者来说，这往往令人困惑。

核心原因：未正确管理状态

Flutter 采用响应式编程模型，UI 的更新依赖于状态变化。DropDownButton 的 value 参数决定了当前显示的内容。如果 onChanged 回调中没有更新 value 所绑定的状态变量，则组件不会重新构建，自然无法显示新值。

简单来说：你选择了新值，但 Flutter 并不知道“新值”已经生效。

典型错误场景

  1. 忘记调用 setState：
    在 onChanged 中直接赋值 selectedValue = newValue; 而不执行 setState(() {})，导致 UI 不刷新。

  2. 在 StatelessWidget 中使用：
    StatelessWidget 不允许修改状态，但开发者错误地将 selectedValue 作为局部变量，自然无法持久化。

  3. 不在 onChanged 中重新赋值：
    有些开发者以为只要 items 变了，value 会自动更新，这是误解。

深度诊断：从源码角度理解

查看 Flutter 源码中 DropDownButton 的实现会发现，其 _DropDownButtonState 在 build 时会根据 widget.value 的当前值从 items 中查找匹配项，并显示其 child。若 widget.value 为 null 或不在 items 中，则会显示 hint 或空。

因此，当 onChanged 触发后，如果没有通过 setState 更新 widget.value 所指向的状态，下一次 build 时 value 依然为原值，UI 自然保持不变。

解决方案：三步修复法

第一步：确保使用 StatefulWidget

将包含 DropDownButton 的组件继承自 StatefulWidget，并在对应的 State 类中声明变量：

class MyDropdownPage extends StatefulWidget {
  @override
  _MyDropdownPageState createState() => _MyDropdownPageState();
}

class _MyDropdownPageState extends State<MyDropdownPage> {
  String? selectedValue; // 关键状态变量
  // ...
}

第二步：在 onChanged 中正确更新状态

onChanged: (String? newValue) {
  setState(() {
    selectedValue = newValue;
  });
}

第三步：确保 value 与 items 一致

DropDownButton 的 value 必须属于 items 列表中的某个 value，否则即使 selectedValue 被赋值，也无法匹配到对应项，导致显示 hint。如果初始值为 null，可先设置 hint，等用户选择后自然匹配。

进阶问题与边缘情况

1. 使用 DropDownButtonFormField

DropDownButtonFormField 是 Form 组件，内部自动管理状态，但仍需通过 onChanged 刷新外部变量。不过它的显示机制与 DropDownButton 类似，同样需要确保 value 在 items 中。

2. 本地化与性能陷阱

频繁调用 setState 不会造成性能瓶颈，但当列表极大时应考虑拆分 Widget。另外，value 类型必须与 DropdownMenuItem 的泛型完全一致，否则无法匹配。

3. 空安全与可选值

在空安全环境下，若 selectedValue 声明为 String?，则 value 参数可接受 null。但依然建议在 onChanged 中提供非空判断，避免逻辑混乱。

结语

“DropDownButton not showing the selected value” 本质是 Flutter 状态管理基础设施的典型应用错误。只要遵循“用 StatefulWidget 管理状态，并在 onChanged 中通过 setState 更新 value”这一原则，即可彻底解决。同时，养成阅读官方文档和源码的习惯，能帮助开发者从根本上理解框架设计哲学，远离类似陷阱。

对于刚入门的 Flutter 开发者，建议将本文总结为一个 check list：

  • [ ] 该组件是否位于 StatefulWidget 中？
  • [ ] onChanged 里是否调用了 setState 并更新变量？
  • [ ] value 是否属于 items 中的某个值？

逐一核对后，问题即可迎刃而解。