Flutter Autocomplete组件获取后端接口结果后未调用optionsViewBuilder问题排查

嘿，咱们来看看为啥你的自动提示浮层在API获取数据后不显示！我在代码里发现了两个关键问题：

1. _fetchResults 里的 setState 使用错误 #

你把异步函数直接传给了 setState 的回调，这是不对的——setState 接受的是 VoidCallback（无返回值的同步函数），异步逻辑放在里面会导致状态更新时机混乱，可能数据已经拿到了，但UI没有正确同步。

2. Autocomplete 的 optionsBuilder 不会自动响应 _options 变化 #

Autocomplete 的 optionsBuilder 是跟着输入框的 TextEditingValue 变化触发的。当你通过API拿到数据更新 _options 时，输入框的文本并没有改变，所以 optionsBuilder 不会重新执行，浮层自然不会刷新。只有当你删除字符时，TextEditingValue 发生变化，optionsBuilder 才会重新读取更新后的 _options，这时候浮层才会显示。

具体修复步骤 #

第一步：修正 _fetchResults 的 setState 写法

把异步逻辑从 setState 回调里移出来，先获取数据，再更新状态：

Future<void> _fetchResults(String text) async {
  // 先异步获取API数据
  final fetchedOptions = await Api.fetchSuggestions(text);
  // 再更新状态
  setState(() {
    _options = fetchedOptions;
  });
  // 手动触发自动提示浮层刷新
  _refreshOptionsOverlay();
}

第二步：保存输入框控制器，触发浮层刷新

在你的状态类里添加一个变量保存输入框的控制器，然后新增一个方法触发 optionsBuilder 重新执行：

class _AutoCompleteInputState extends State<AutoCompleteInput> {
  final _debouncer = Debouncer(milliseconds: 500);
  List<AutoCompleteItem> _options = [];
  bool _isLoading = false;
  // 新增：保存输入框控制器引用
  TextEditingController? _inputController;

  // 新增：触发optionsBuilder重新执行的方法
  void _refreshOptionsOverlay() {
    if (_inputController != null) {
      // 通过重新设置选位来触发TextEditingValue的通知
      // 这样Autocomplete会重新调用optionsBuilder
      _inputController!.selection = TextSelection.fromPosition(
        TextPosition(offset: _inputController!.text.length),
      );
    }
  }

  // ... 其他原有代码
}

然后在 fieldViewBuilder 里给这个控制器变量赋值：

fieldViewBuilder: (
  BuildContext context,
  TextEditingController fieldTextEditingController,
  FocusNode fieldFocusNode,
  VoidCallback onFieldSubmitted,
) {
  // 保存控制器引用
  _inputController = fieldTextEditingController;
  return TextFormField(
    // ... 原有代码保持不变
  );
},

第三步：优化 optionsBuilder（可选，更严谨）

如果你的API没有对返回结果做输入文本的过滤，可以在 optionsBuilder 里加一层过滤，确保只显示和当前输入匹配的结果：

Iterable<AutoCompleteItem> _optionsBuilder(TextEditingValue textEditingValue) {
  final inputText = textEditingValue.text.toLowerCase();
  if (inputText.isEmpty) {
    return const Iterable<AutoCompleteItem>.empty();
  }
  // 过滤出包含输入文本的选项
  return _options.where((item) => item.value.toLowerCase().contains(inputText));
}

这样修改后，当API返回数据并更新 _options 后，我们手动触发了 TextEditingValue 的通知，optionsBuilder 会重新执行，自动提示浮层就会正确显示最新的结果啦！

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