Flutter下拉框联动：根据第一个下拉值动态更新第二个下拉选项

你的代码无法实现联动的核心原因是状态变量定义在showOverlay方法的局部作用域中，setState仅会触发_HomeState的build方法，但弹窗内的局部变量不会被持久化，每次重新调用showOverlay时都会重置，导致修改后的状态无法同步到UI。

修正步骤及代码 #

1. 将弹窗所需的状态变量移到_HomeState类的成员变量中，确保状态可被持久化和监听
2. 切换下拉选项时重置第二个下拉框的选中值，避免出现选项不存在的错误
3. 移除showOverlay内的局部状态变量，直接使用成员变量

修正后的完整代码：

class Home extends StatefulWidget {
  EventDao dao;
  Home(this.dao,{Key? key}) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  // 把状态变量移到State成员中
  String? selectedTypeItem = "Seleziona una tipologia";
  String? selectedCatItem = "Seleziona una categoria";
  final _formKey = GlobalKey<FormState>();
  var isDropDownCatVisible = true;
  // 假设event是你的实体类实例，需提前初始化
  Event event = Event();

  @override
  Widget build(BuildContext context) {
    double height= MediaQuery.of(context).size.height;
    return  Scaffold(
      body: Placeholder(),
      floatingActionButton: FloatingActionButton(
        child:Icon(Icons.add),
        onPressed: () {
          showDialog(
            context: context,
            builder: (BuildContext context) {
              return showOverlay();
            });
        },),
    );
  }

  Widget showOverlay(){
    return AlertDialog(
      content: Stack(
        children: <Widget>[
          Form(
            key: _formKey,
            child: Column(
              mainAxisSize: MainAxisSize.min, // 避免弹窗高度溢出
              children: <Widget>[
                DropdownButtonFormField<String>(
                  onSaved: (value)=>event.eventType=value!,
                  value: selectedTypeItem,
                  items: EventType.eventType.map((item)=>
                      DropdownMenuItem<String>(value: item, child: Text(item))).toList(),
                  onChanged: (item){
                    setState((){
                      selectedTypeItem = item;
                      // 切换类型时重置分类选中值
                      selectedCatItem = "Seleziona una categoria";
                      if(selectedTypeItem=="Uscita"){
                        isDropDownCatVisible=true;
                      } else if (selectedTypeItem=="Entrata"){
                        isDropDownCatVisible=false;
                      }
                    });
                  }
                ),
                SizedBox(height: 16), // 添加间距优化布局
                DropdownButtonFormField<String>(
                  onSaved: (value)=>event.eventCat=value!,
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    labelText:'Categoria Evento'
                  ),
                  value: selectedCatItem,
                  items: getItems(isDropDownCatVisible)?.map((item)=>
                      DropdownMenuItem<String>(value: item, child: Text(item))).toList(),
                  onChanged: (item)=>setState(() => selectedCatItem = item)
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  List<String>? getItems(bool isDropDownCatVisible) {
    if(isDropDownCatVisible) {
      return LIST1; // 对应EventCategory.eventOutCat
    }
    return LIST2; // 对应EventCategory.eventInCat
  }
}

// 补充你提到的实体类示例
class Event {
  String? eventType;
  String? eventCat;
}

class EventType {
  static List<String> eventType = ["Seleziona una tipologia", "Uscita", "Entrata"];
}

class EventCategory {
  static List<String> eventOutCat = ["Cibo", "Trasporti", "Svago"]; // LIST1
  static List<String> eventInCat = ["Stipendio", "Bonus", "Regali"]; // LIST2
}

关键修改说明 #

• 状态变量提升：将selectedTypeItem、selectedCatItem、isDropDownCatVisible等变量从showOverlay局部作用域移到_HomeState成员，确保setState能正确触发UI更新
• 选中值重置：切换第一个下拉框选项时，重置第二个下拉框的选中值为默认提示文本，避免因旧选中值不在新选项列表中导致的异常
• 布局优化：添加mainAxisSize: MainAxisSize.min防止弹窗高度溢出，增加间距提升视觉体验

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