如何基于另一个下拉框的值修改Flutter DropDown的初始值

你的问题核心在于两个下拉框是独立的StatefulWidget，各自维护自身状态，导致第一个下拉框的选中事件无法直接触发第二个下拉框更新初始值。解决思路是将共享状态提升到父组件，通过父组件统一管理状态，再通过参数传递和回调实现跨组件联动。

修改步骤： #

• 把两个下拉框的选中值、选项列表统一放到父组件MyHomePage的状态中
• 子组件改为无状态组件，通过构造函数接收选中值和回调函数
• 在第一个下拉框的onChanged回调中，直接更新第二个下拉框的选中值

修改后的完整代码 #

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 统一管理两个下拉框的选项列表
  final List<String> dropdownItems = ["first", "second", "third", "last"];
  // 第一个下拉框的选中值
  String firstDropdownValue = "";
  // 第二个下拉框的选中值
  String secondDropdownValue = "";

  @override
  void initState() {
    super.initState();
    // 初始化默认值
    firstDropdownValue = dropdownItems.first;
    secondDropdownValue = dropdownItems.last;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Expanded(
            child: MyFirstDropDown(
              value: firstDropdownValue,
              items: dropdownItems,
              onChanged: (newValue) {
                setState(() {
                  firstDropdownValue = newValue!;
                  // 联动更新第二个下拉框的选中值
                  secondDropdownValue = newValue;
                });
              },
            ),
          ),
          Expanded(
            child: MySecondDropDown(
              value: secondDropdownValue,
              items: dropdownItems,
              onChanged: (newValue) {
                setState(() {
                  secondDropdownValue = newValue!;
                });
              },
            ),
          ),
        ],
      ),
    );
  }
}

// 改为无状态组件，接收父组件传递的参数
class MyFirstDropDown extends StatelessWidget {
  final String value;
  final List<String> items;
  final Function(String?) onChanged;

  const MyFirstDropDown({
    super.key,
    required this.value,
    required this.items,
    required this.onChanged,
  });

  @override
  Widget build(BuildContext context) {
    return DropdownButton<String>(
      value: value,
      icon: const Icon(Icons.keyboard_arrow_down),
      items: items.map((item) {
        return DropdownMenuItem<String>(
          value: item,
          child: Text(item),
        );
      }).toList(),
      onChanged: onChanged,
    );
  }
}

// 改为无状态组件，接收父组件传递的参数
class MySecondDropDown extends StatelessWidget {
  final String value;
  final List<String> items;
  final Function(String?) onChanged;

  const MySecondDropDown({
    super.key,
    required this.value,
    required this.items,
    required this.onChanged,
  });

  @override
  Widget build(BuildContext context) {
    return DropdownButton<String>(
      value: value,
      icon: const Icon(Icons.keyboard_arrow_down),
      items: items.map((item) {
        return DropdownMenuItem<String>(
          value: item,
          child: Text(item),
        );
      }).toList(),
      onChanged: onChanged,
    );
  }
}

说明： #

• 父组件_MyHomePageState作为状态的唯一管理者，所有状态变更通过setState触发UI更新
• 第一个下拉框选择新选项时，会同步更新第二个下拉框的选中值，实现联动效果
• 子组件仅负责渲染和传递用户交互，不再维护自身状态，符合Flutter状态管理的最佳实践

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