Dart/Flutter如何实现基于前序表单项选择的动态下拉菜单

AI 小北

2026-9-24

问题根因

二级下拉菜单未绑定选中值到状态字段order.deliveryOption，且onChanged回调未触发setState，导致状态变更后组件无法响应刷新。
之前修改Key出现选中项清空，是因为Key的生成规则不合理，若Key随任意状态变更频繁刷新，会导致组件反复重建丢失已有状态；若切换一级选项时未重置二级选中值，也会出现旧值不在新列表中导致的置空异常。

最优实现方案

核心调整点

一级选项切换时同步重置二级选项的值，避免出现选中值和选项列表不匹配的问题
给二级下拉绑定和当前一级选项关联的唯一Key，仅在一级选项变更时才强制重建二级下拉，其他状态更新不会影响二级下拉状态
两个下拉都绑定当前选中值，onChanged回调统一触发setState更新状态

调整后代码

表单部分代码

DropDownInputField(
  inputList: const [
    'Delivery',
    'Pickup',
  ],
  value: order.shippingOption,
  onchanged: (selection) {
    setState(() {
      order.shippingOption = selection;
      // 切换配送方式时重置二级选项
      order.deliveryOption = null;
    });
  },
  name: 'Shipping Option',
),
const SizedBox(
  height: 20,
),
DropDownInputField(
  key: Key('delivery_option_${order.shippingOption}'),
  inputList: retrieveList(order.shippingOption),
  value: order.deliveryOption,
  onchanged: (value) {
    setState(() {
      order.deliveryOption = value;
    });
  },
  name: 'Delivery Options',
),

选项生成函数优化（兼容空值场景）

List<String> retrieveList(String? shippingOption) {
  if (shippingOption == null) return [];
  switch (shippingOption.toLowerCase()) {
    case "delivery":
      return [
        'Standard',
        'Express',
      ];
    case "pickup":
      return [
        'Store 1',
        'Store 2',
      ];
    default:
      return [];
  }
}