Flutter DropdownButton选中值更新后界面未同步显示问题

你将DropdownButton组件提前固化存储到了titleWidget状态变量中，仅在initState的异步数据库回调里构建过一次Dropdown实例。后续调用setState修改dropdownValue时，只会触发build方法重新执行，但build方法直接复用了旧的Dropdown实例，该实例绑定的还是初始化时的旧dropdownValue，所以选中状态不会在界面更新。

不要把组件直接作为状态存储，将下拉选项数据源提取为独立状态，所有组件构建逻辑放在build方法中动态生成，修改后的代码如下：

class _ComparisonScreenState extends State<ComparisonScreen> {
  List<String>? contradictionHeaders; // 存储下拉选项列表
  String dropdownValue = 'Contradiction 1'; 

  @override
  void initState() {
    super.initState();
    // 异步请求仅用来更新数据源
    databaseObject.getContradictions().then((contradictions) {
      setState(() {
        contradictionHeaders = contradictions.header;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    // 动态构建标题组件
    Widget titleWidget = contradictionHeaders == null 
        ? const Text('Loading...')
        : DropdownButton<String>(
            isExpanded: true,
            items: contradictionHeaders!.map((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: ListTile(
                  title: Text(value),
                  subtitle: Text(value),
                ),
              );
            }).toList(),
            value: dropdownValue,
            icon: const Icon(Icons.arrow_downward),
            iconSize: 24,
            style: const TextStyle(color: Colors.white),
            underline: Container(
              height: 2,
              color: Colors.white70,
            ),
            onChanged: (String? newValue) {
              setState(() {
                dropdownValue = newValue!;
              });
            },
          );

    return Scaffold(
      drawer: const CommonDrawer(currentScreen: 'ComparisonScreen'),
      appBar: AppBar(
        actions: const [
          Padding(
            padding: EdgeInsets.only(right: 20),
            child: Icon(Icons.settings),
          ),
        ],
        title: titleWidget,
      ),
      body: Container(),
    );
  }
}

核心修改点 #

• 移除了预先存储组件的titleWidget状态，新增contradictionHeaders状态仅存储下拉选项原始数据
• 标题组件的构建逻辑全部移到build方法中，每次setState触发重绘时，都会用最新的dropdownValue生成新的Dropdown实例，选中状态会自动同步更新
• 初始化加载逻辑通过判断数据源是否为空实现，职责拆分更清晰，避免组件状态固化问题

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