Flutter TypeAheadField下拉项无法实时更新问题求助

问题根源分析 #

1. 提交内容后新增项不显示：saveSearchHistory中修改了_searchHistory但未调用setState，Flutter框架无法感知状态变化，导致UI未重建。
2. 删除项后列表不即时更新：虽removeFromHistory调用了setState，但存在控制器使用不一致问题，且TypeAheadField的建议列表未触发重新加载。
3. 额外隐患：TypeAheadField的builder回调中使用自定义_controller而非组件提供的控制器，造成状态同步异常。

具体修复步骤 #

1. 修复搜索历史保存逻辑，添加状态更新 #

修改saveSearchHistory函数，将_searchHistory的修改操作包裹在setState中，确保UI及时刷新：

saveSearchHistory({required String value}) async {
  setState(() {
    if (_searchHistory.contains(value)) {
      _searchHistory.remove(value);
    }
    _searchHistory.add(value);
  });
  await _prefs.setStringList('searchHistory', _searchHistory);
  // 后续统一使用TypeAheadField提供的控制器，此处需对应调整
}

2. 统一使用TypeAheadField提供的控制器 #

TypeAheadField内部会管理输入控制器，替换自定义的_controller为builder回调提供的controller，避免状态不同步：

@override
Widget build(BuildContext context) {
  return Padding(
    padding: const EdgeInsets.all(8.0),
    child: TypeAheadField(
      hideOnEmpty: true,
      builder: (context, controller, focusNode) {
        return TextField(
          controller: controller, // 替换为TypeAheadField提供的控制器
          focusNode: focusNode,
          autofocus: false,
          style: const TextStyle(
              fontFamily: 'DynaPuff',
              fontWeight: FontWeight.w100,
              color: secondaryColor,
              decoration: TextDecoration.none),
          decoration: InputDecoration(
            labelStyle: const TextStyle(color: secondaryColor),
            enabledBorder: const OutlineInputBorder(
              borderSide: BorderSide(color: thirdColor, width: 1.0),
            ),
            focusedBorder: const OutlineInputBorder(
              borderSide: BorderSide(color: thirdColor, width: 1.0),
            ),
            fillColor: mainBgColor,
            suffixIcon: Visibility(
              visible: textValue.isNotEmpty,
              child: IconButton(
                onPressed: () {
                  controller.clear();
                  setState(() {
                    textValue = '';
                  });
                },
                icon: const Icon(
                  Ionicons.close_outline,
                  color: secondaryColor,
                ),
              ),
            ),
            prefixIcon: const Icon(
              Ionicons.search_outline,
              color: secondaryColor,
            ),
            labelText: 'Search',
          ),
          onSubmitted: (value) {
            textValue = value;
            saveSearchHistory(value: textValue);
          },
          onChanged: (value) {
            setState(() {
              textValue = value;
            });
          },
        );
      },
      itemBuilder: (context, value) {
        return ListTile(
          tileColor: Colors.transparent,
          title: Text(
            value.toString(),
          ),
          trailing: IconButton(
            icon: const Icon(
              Ionicons.close_outline,
              size: 15.0,
            ),
            onPressed: () {
              removeFromHistory(value: value);
            },
          ),
        );
      },
      onSelected: (value) {
        controller.text = value.toString(); // 用组件提供的控制器设置文本
      },
      suggestionsCallback: (pattern) {
        return _searchHistory
            .where((suggestion) =>
                suggestion.toLowerCase().contains(pattern.toLowerCase()))
            .toList();
      },
    ),
  );
}

3. 确认删除操作的状态更新逻辑 #

removeFromHistory的逻辑已正确使用setState，需确保_searchHistory是可变列表（如List<String>），避免不可变集合导致修改无效：

removeFromHistory({required String value}) async {
  setState(() {
    _searchHistory.remove(value);
  });
  await _prefs.setStringList('searchHistory', _searchHistory);
}

修复效果验证 #

• 提交搜索内容后，点击输入框，新增的历史项会立即显示在下拉菜单中。
• 点击历史项后的删除按钮，该项会从下拉菜单中即时消失，无需重新加载页面。

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