Flutter Autocomplete组件无法清除文本及替换控制器失效求助

问题本质 #

Autocomplete组件内部维护了独立的TextEditingController，你自定义的_animalController和它没有绑定关系，因此调用_animalController.clear()只会清空自己的控制器值，不会影响组件显示；若直接替换为自定义控制器，默认的optionsBuilder依赖内部控制器状态，导致筛选逻辑失效。

方案一：双向绑定内部控制器与自定义控制器 #

通过监听器同步两个控制器的状态，既保留Autocomplete内部逻辑，又实现自定义控制器的可控性：

1. 在State类中添加内部控制器引用

TextEditingController? _internalAutocompleteController;

2. 实现控制器同步方法

void _syncControllers() {
  final internalController = _internalAutocompleteController;
  if (internalController == null) return;

  // 临时移除监听器避免循环触发
  internalController.removeListener(_syncControllers);
  _animalController.removeListener(_syncControllers);

  if (internalController.text != _animalController.text) {
    // 双向同步内容
    if (internalController.text.isNotEmpty) {
      _animalController.text = internalController.text;
    } else {
      internalController.text = _animalController.text;
    }
  }

  // 重新添加监听器
  internalController.addListener(_syncControllers);
  _animalController.addListener(_syncControllers);
}

3. 修改fieldViewBuilder绑定控制器

fieldViewBuilder: (BuildContext context, TextEditingController textEditingController, FocusNode focusNode, VoidCallback onFieldSubmitted) {
  if (_internalAutocompleteController != textEditingController) {
    // 清理旧监听器
    _internalAutocompleteController?.removeListener(_syncControllers);
    _animalController.removeListener(_syncControllers);

    // 保存内部控制器引用并初始同步
    _internalAutocompleteController = textEditingController;
    textEditingController.value = _animalController.value;

    // 添加同步监听器
    textEditingController.addListener(_syncControllers);
    _animalController.addListener(_syncControllers);
  }

  return TextField(
    controller: textEditingController,
    focusNode: focusNode,
    decoration: const InputDecoration(
      labelText: 'Search Animal',
      border: OutlineInputBorder(),
    ),
  );
},

4. 在dispose中清理监听器

@override
void dispose() {
  _internalAutocompleteController?.removeListener(_syncControllers);
  _animalController.removeListener(_syncControllers);
  _animalController.dispose();
  super.dispose();
}

此方案下，调用_animalController.clear()会同步清空内部控制器，Autocomplete显示文本随之更新，optionsBuilder逻辑不受影响。

方案二：直接使用自定义控制器，修改筛选逻辑依赖 #

简化实现，让Autocomplete的TextField直接使用自定义控制器，同时调整optionsBuilder依赖该控制器的文本：

1. 修改fieldViewBuilder使用自定义控制器

fieldViewBuilder: (BuildContext context, TextEditingController textEditingController, FocusNode focusNode, VoidCallback onFieldSubmitted) {
  return TextField(
    controller: _animalController,
    focusNode: focusNode,
    decoration: const InputDecoration(
      labelText: 'Search Animal',
      border: OutlineInputBorder(),
    ),
    // 确保提交事件触发Autocomplete逻辑
    onSubmitted: (_) => onFieldSubmitted(),
  );
},

2. 调整optionsBuilder依赖自定义控制器文本

optionsBuilder: (TextEditingValue textEditingValue) {
  final query = _animalController.text.toLowerCase();
  if (query.isEmpty) {
    return const Iterable<String>.empty();
  }
  return animalSuggestions.where((option) {
    return option.toLowerCase().contains(query);
  });
},

3. 保留原有onSelected逻辑

onSelected: (String selection) {
  _animalController.text = selection;
},

此方案更简洁，调用_animalController.clear()会直接清空TextField显示文本，optionsBuilder因查询文本为空自动隐藏建议列表。

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