DropdownButtonFormField重建时未更新选中值的问题解决咨询

问题原因 #

DropdownButtonFormField 是 FormField 的子类，会维护自身内部状态跟踪选中值。直接传入 value 属性时，该值仅在组件首次初始化时生效；后续组件重建时，若外部 selectedValue 发生变化，组件不会自动同步新值——因为内部状态优先级高于外部传入的 value，导致出现"未正确读取外部选中值"的现象。

解决方案 #

方案1：主动同步外部值到组件内部状态 #

通过 GlobalKey 获取组件状态，在外部值变化时手动通知组件更新内部状态，确保内外值一致。

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: HomeRoute(),
    ),
  );
}

class HomeRoute extends StatefulWidget {
  const HomeRoute({super.key});

  @override
  State<HomeRoute> createState() => _HomeRouteState();
}

class _HomeRouteState extends State<HomeRoute> {
  String selectedValue = '1';
  final _dropdownKey = GlobalKey<DropdownButtonFormFieldState<String>>();

  @override
  void didUpdateWidget(covariant HomeRoute oldWidget) {
    super.didUpdateWidget(oldWidget);
    // 外部值变化时同步到组件内部状态
    if (selectedValue != oldWidget.selectedValue) {
      _dropdownKey.currentState?.didChange(selectedValue);
    }
  }

  @override
  Widget build(BuildContext context) {
    print('Building with selected value : $selectedValue');
    return Scaffold(
      appBar: AppBar(title: const Text('Title'),),
      body: Column(
        children: [
          DropdownButtonFormField<String>(
            key: _dropdownKey,
            value: selectedValue,
            onChanged: (value) {
              setState(() {
                selectedValue = value!;
              });
            },
            items: [
              for(int i = 0; i < 10; i++)
                DropdownMenuItem<String>(value: '$i', child: Text('$i'),),
            ],
          ),
          // 测试按钮：手动修改selectedValue触发重建
          ElevatedButton(
            onPressed: () {
              setState(() {
                selectedValue = '5';
              });
            },
            child: const Text('设置选中值为5'),
          )
        ],
      ),
    );
  }
}

方案2：用ValueNotifier统一管理状态 #

通过 ValueNotifier 维护选中值，结合 ValueListenableBuilder 确保组件始终响应值的变化，彻底避免内外状态不一致。

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: HomeRoute(),
    ),
  );
}

class HomeRoute extends StatefulWidget {
  const HomeRoute({super.key});

  @override
  State<HomeRoute> createState() => _HomeRouteState();
}

class _HomeRouteState extends State<HomeRoute> {
  final ValueNotifier<String> selectedValueNotifier = ValueNotifier('1');

  @override
  void dispose() {
    selectedValueNotifier.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Title'),),
      body: Column(
        children: [
          ValueListenableBuilder<String>(
            valueListenable: selectedValueNotifier,
            builder: (context, value, child) {
              print('Building with selected value : $value');
              return DropdownButtonFormField<String>(
                value: value,
                onChanged: (newValue) {
                  selectedValueNotifier.value = newValue!;
                },
                items: [
                  for(int i = 0; i < 10; i++)
                    DropdownMenuItem<String>(value: '$i', child: Text('$i'),),
                ],
              );
            },
          ),
          ElevatedButton(
            onPressed: () {
              selectedValueNotifier.value = '7';
            },
            child: const Text('设置选中值为7'),
          )
        ],
      ),
    );
  }
}

方案3：结合Form组件管理状态（表单场景适用） #

若组件在Form中使用，可通过FormState同步、保存状态，确保外部值与组件内部状态一致。

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: HomeRoute(),
    ),
  );
}

class HomeRoute extends StatefulWidget {
  const HomeRoute({super.key});

  @override
  State<HomeRoute> createState() => _HomeRouteState();
}

class _HomeRouteState extends State<HomeRoute> {
  String selectedValue = '1';
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    print('Building with selected value : $selectedValue');
    return Scaffold(
      appBar: AppBar(title: const Text('Title'),),
      body: Form(
        key: _formKey,
        child: Column(
          children: [
            DropdownButtonFormField<String>(
              initialValue: selectedValue,
              onSaved: (value) {
                selectedValue = value!;
              },
              validator: (value) {
                if (value == null) return '请选择一项';
                return null;
              },
              onChanged: (value) {
                // 手动触发表单验证同步状态
                _formKey.currentState?.validate();
              },
              items: [
                for(int i = 0; i < 10; i++)
                  DropdownMenuItem<String>(value: '$i', child: Text('$i'),),
              ],
            ),
            ElevatedButton(
              onPressed: () {
                if (_formKey.currentState!.validate()) {
                  _formKey.currentState!.save();
                  print('保存的选中值：$selectedValue');
                }
              },
              child: const Text('保存表单'),
            ),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  selectedValue = '3';
                });
                // 重置表单同步新初始值
                _formKey.currentState?.reset();
              },
              child: const Text('设置选中值为3'),
            )
          ],
        ),
      ),
    );
  }
}

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