Flutter：使用ValueNotifier更新文本，解决DropdownFormField选中值无法显示问题

根因说明 #

ValueNotifier本身仅负责持有数据和通知监听者，没有被ValueListenableBuilder监听的UI不会自动响应数据变化，不更新问题90%以上是展示选中值的部分没有加ValueListenableBuilder包裹，或者DropdownFormField没有绑定ValueNotifier的当前值。

实现步骤 #

1. 定义ValueNotifier #

根据你的下拉选项数据类型初始化，示例为字符串类型：

// 存储选中的下拉值，初始值可设为默认选项或null
final ValueNotifier<String?> selectedDropValue = ValueNotifier(null);

2. 绑定DropdownFormField配置 #

value属性绑定selectedDropValue.value，onChanged回调直接更新ValueNotifier的值即可，无需调用setState：

DropdownFormField<String>(
  // 必须绑定当前ValueNotifier持有的值，否则下拉选中态也会不同步
  value: selectedDropValue.value,
  decoration: const InputDecoration(label: Text('请选择选项')),
  items: const [
    DropdownMenuItem(value: '选项A', child: Text('选项A')),
    DropdownMenuItem(value: '选项B', child: Text('选项B')),
    DropdownMenuItem(value: '选项C', child: Text('选项C')),
  ],
  onChanged: (newValue) {
    selectedDropValue.value = newValue;
  },
)

3. 包裹展示选中值的UI #

所有需要响应选中值变化的UI组件，都需要用ValueListenableBuilder包裹，它会自动监听ValueNotifier的变化触发局部重绘：

ValueListenableBuilder<String?>(
  // 绑定要监听的ValueNotifier
  valueListenable: selectedDropValue,
  builder: (context, currentValue, child) {
    return Text('当前选中值：${currentValue ?? '未选择任何选项'}');
  },
)

注意事项 #

• 不需要把整个页面都套在ValueListenableBuilder里，只包裹需要更新的局部组件即可，性能优于setState全页面重绘
• 如果ValueNotifier持有自定义类对象，修改对象内部属性不会触发更新，要么重新赋值整个对象，要么手动调用notifyListeners()
• 页面销毁时调用selectedDropValue.dispose()释放资源，避免内存泄漏

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