添加自定义TextField的fieldViewBuilder后Flutter Autocomplete不显示

问题出在你自定义的fieldViewBuilder实现上——你直接返回了一个const InputField()，但没有把Autocomplete组件提供的textEditingController、focusNode、onFieldSubmitted这几个关键参数传递给自定义输入框。

Autocomplete依赖这些参数监听输入内容变化、焦点状态，从而触发optionsBuilder加载并展示补全选项。如果不传递这些参数，Autocomplete无法感知输入框的状态变化，自然不会显示自动补全列表。

修复步骤： #

1. 修改自定义InputField组件，让它支持接收必要的参数：

class InputField extends StatelessWidget {
  final TextEditingController controller;
  final FocusNode focusNode;
  final void Function(String)? onFieldSubmitted;

  const InputField({
    super.key,
    required this.controller,
    required this.focusNode,
    this.onFieldSubmitted,
  });

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: controller,
      focusNode: focusNode,
      onSubmitted: onFieldSubmitted,
      // 保留你原来的输入框样式、配置
    );
  }
}

2. 更新Autocomplete的fieldViewBuilder，把参数传递给InputField：

Autocomplete<Suggestion>(
  displayStringForOption: _displayStringForOption,
  optionsBuilder: (TextEditingValue textEditingValue) async {
    if (textEditingValue.text == '') {
      return const Iterable<Suggestion>.empty();
    }
    await model.handleSuggestion(textEditingValue.text);

    return model.suggestions.where((Suggestion option) {
      return option.description
          .toLowerCase()
          .contains(textEditingValue.text.toLowerCase());
    });
  },
  onSelected: (Suggestion selection) {
    debugPrint('You just selected ${_displayStringForOption(selection)}');
  },
  fieldViewBuilder: (context, textEditingController, focusNode, onFieldSubmitted) =>
      InputField(
        controller: textEditingController,
        focusNode: focusNode,
        onFieldSubmitted: onFieldSubmitted,
      ),
)

这样修改后，Autocomplete就能正常监听输入框的变化，自动补全列表会按预期显示。

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