Flutter DropdownButton无法显示当前选中值问题求助

核心问题分析 #

1. 子组件直接修改父组件参数：自定义Dropdown里直接赋值widget.dropDownValue = newValue!，违反了Flutter中Widget不可变的原则，导致父组件状态与子组件显示不同步。
2. 选中值显示逻辑不一致：selectedItemBuilder使用子组件自己维护的selectedValue，但实际选中值是父组件传递的dropDownValue，两者不匹配导致显示空白。
3. FutureBuilder使用不当：如果geoDataFuture是在build方法内创建的，每次UI刷新都会重新执行Future，干扰状态更新逻辑。

分步修复 #

1. 重构自定义Dropdown组件

移除子组件自身的selectedValue，完全依赖父组件传递的参数和回调更新状态：

class _MyCustomDropdownstate extends State<MyCustomDropdown> {
  @override
  Widget build(BuildContext context) {
    // 直接使用父组件传递的选中值，为空时显示hint
    final currentValue = widget.dropDownValue;

    return IgnorePointer(
      ignoring: widget.disableThisFilter,
      child: DropdownButtonHideUnderline(
        child: DropdownButton<String>(
          value: currentValue?.isEmpty ?? true ? null : currentValue,
          hint: Text(widget.hintText, style: ...),
          onChanged: widget.disableThisFilter
              ? null
              : (String? newValue) {
                  // 通过回调通知父组件更新状态，而非直接修改widget
                  widget.dropDownCallback(newValue!);
                },
          selectedItemBuilder: (BuildContext context) {
            return widget.dropDownList.map((String item) {
              return Align(
                alignment: Alignment.centerLeft,
                child: Text(
                  currentValue ?? widget.hintText, // 用父组件的选中值显示
                  style: ...
                ),
              );
            }).toList();
          },
          items: widget.dropDownList.map<DropdownMenuItem<String>>((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value, style: ...),
            );
          }).toList(),
        ),
      ),
    );
  }
}

2. 修正父组件的FutureBuilder与状态初始化

• 将geoDataFuture移到initState中初始化，避免重复执行：

late Future geoDataFuture;

@override
void initState() {
  super.initState();
  // 仅在初始化时执行一次数据请求
  geoDataFuture = loadGeoData();
  // 初始化历史筛选状态
  if (widget.currentGeoFilters.geoType == "X") {
    setState(() {
      geoTypeValue = widget.currentGeoFilters.geoType;
      myCustomDropdownDisabled = false;
    });
  }
}

• 调整FutureBuilder的回调逻辑，确保状态同步：

FutureBuilder(
  future: geoDataFuture,
  builder: (context, snapshot) {
    if (snapshot.connectionState != ConnectionState.done) {
      return const Center(child: CircularProgressIndicator());
    } else {
      return MyCustomDropdown(
        hintText: geoDropDownHintText,
        dropDownList: listOfGeoTypes,
        dropDownValue: geoTypeValue,
        dropDownCallback: (newValue) {
          // 父组件内部更新选中状态
          setState(() {
            geoTypeValue = newValue;
          });
        },
        disableThisFilter: myCustomDropdownDisabled,
      );
    }
  },
)

为什么这样修复？ #

• Flutter中Widget是不可变对象，子组件只能通过回调通知父组件修改状态，才能保证UI与数据同步。
• selectedItemBuilder必须使用真实的选中值（父组件传递的dropDownValue），否则会出现"值已正确设置但显示空白"的矛盾现象。
• FutureBuilder的Future放在initState中，避免每次build都重新发起请求，防止状态被意外重置。

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