如何在Flutter中实现带自动补全和搜索功能的列表UI

你原本的手动实现思路是可行的，不过有几个更成熟且可定制性更高的方案，比原生Autocomplete灵活，也比完全手写节省冗余代码：

• 方案1：自定义封装原生Autocomplete组件
  原生Autocomplete难改样式是因为默认的选项视图封装度太高，你可以通过重写optionsViewBuilder参数完全自定义下拉列表的样式，不管是选中态、分割线、高亮匹配文字还是自定义布局都能实现，不需要完全放弃这个组件。核心代码示例：

Autocomplete<String>(
  optionsBuilder: (TextEditingValue textEditingValue) {
    if (textEditingValue.text == '') {
      return const Iterable<String>.empty();
    }
    return yourSourceList.where((String option) {
      return option.toLowerCase().contains(textEditingValue.text.toLowerCase());
    });
  },
  optionsViewBuilder: (context, onSelected, options) {
    // 此处可完全自定义下拉列表样式，支持卡片式、带图标、匹配字符高亮等效果
    return Align(
      alignment: Alignment.topLeft,
      child: Material(
        elevation: 4,
        child: ListView.builder(
          padding: EdgeInsets.zero,
          shrinkWrap: true,
          itemCount: options.length,
          itemBuilder: (BuildContext context, int index) {
            final String option = options.elementAt(index);
            return InkWell(
              onTap: () => onSelected(option),
              child: Padding(
                padding: const EdgeInsets.all(16),
                child: Text(option),
              ),
            );
          },
        ),
      ),
    );
  },
)

该方案的优势是自带输入框状态管理、选中回填、焦点处理逻辑，不需要手动处理TextField焦点、点击外部收起列表等交互逻辑。

• 方案2：使用成熟第三方组件库
  如果需要更复杂的效果比如选中高亮匹配字符、分组展示、异步搜索防抖，推荐用flutter_typeahead库，已经封装好了所有基础逻辑，只需要配置参数就能实现完全自定义的样式：
  • 自带防抖处理，不需要手动写延时逻辑避免频繁触发过滤
  • 支持异步请求后端接口获取联想结果
  • 支持自定义空状态、加载状态、下拉列表的每一项布局
    首先在pubspec.yaml中添加依赖flutter_typeahead: ^最新版本号，核心代码示例：

TypeAheadField<String>(
  textFieldConfiguration: TextFieldConfiguration(
    controller: _typeAheadController,
    decoration: const InputDecoration(
      hintText: '搜索内容'
    ),
  ),
  suggestionsCallback: (pattern) async {
    // 同步过滤本地列表或者异步请求接口都可以
    return yourSourceList.where((e) => e.toLowerCase().contains(pattern.toLowerCase())).toList();
  },
  itemBuilder: (context, suggestion) {
    // 自定义每一项的UI
    return ListTile(
      title: Text(suggestion),
    );
  },
  onSuggestionSelected: (suggestion) {
    _typeAheadController.text = suggestion;
  },
)

• 如果你确实要完全手写TextField+ListView的方案，建议补充两个优化点：
  • 加防抖逻辑：输入变化后延迟300ms再执行过滤逻辑，避免用户快速输入时频繁触发重绘
  • 加焦点监听：点击输入框外区域自动收起下拉列表，避免列表遮挡其他内容
  • 过滤逻辑可以提前把源列表转成全小写缓存，不用每次过滤都重复转小写，提升长列表下的性能

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