Flutter如何实现自动补全功能

在Flutter中实现自动补全功能时，如何绑定输入框与下拉建议列表？当用户输入文字时，如何动态过滤数据并显示匹配项？点击建议项后如何自动填充到输入框？是否需要依赖第三方包，还是用原生组件即可？希望有详细的代码示例说明交互逻辑。

2 回复

Flutter中实现自动补全功能可使用Autocomplete组件（Flutter 2.5+），或第三方库如flutter_typeahead。
步骤：

  1. 提供数据源（如字符串列表）。
  2. 监听用户输入，匹配并显示建议列表。
  3. 处理选择事件，更新输入框内容。
    示例代码简单，需结合具体场景调整。

更多关于Flutter如何实现自动补全功能的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现自动补全功能，主要有以下几种方式：

1. 使用 Autocomplete 组件（推荐）

Flutter 2.5+ 提供了内置的 Autocomplete 组件：

import 'package:flutter/material.dart';

class AutoCompleteExample extends StatelessWidget {
  final List<String> suggestions = [
    'Apple', 'Banana', 'Cherry', 'Date', 'Elderberry',
    'Fig', 'Grape', 'Honeydew', 'Kiwi', 'Lemon'
  ];

  @override
  Widget build(BuildContext context) {
    return Autocomplete<String>(
      optionsBuilder: (TextEditingValue textEditingValue) {
        if (textEditingValue.text == '') {
          return const Iterable<String>.empty();
        }
        return suggestions.where((String option) {
          return option.toLowerCase().contains(textEditingValue.text.toLowerCase());
        });
      },
      onSelected: (String selection) {
        print('选择了: $selection');
      },
    );
  }
}

2. 使用 RawAutocomplete 自定义样式

如果需要更多自定义控制，可以使用 RawAutocomplete：

RawAutocomplete<String>(
  optionsBuilder: (TextEditingValue textEditingValue) {
    return suggestions.where((option) => 
      option.toLowerCase().contains(textEditingValue.text.toLowerCase())
    );
  },
  fieldViewBuilder: (BuildContext context, 
      TextEditingController textEditingController, 
      FocusNode focusNode, 
      VoidCallback onFieldSubmitted) {
    return TextFormField(
      controller: textEditingController,
      focusNode: focusNode,
      decoration: InputDecoration(
        hintText: '输入水果名称',
        border: OutlineInputBorder(),
      ),
    );
  },
  optionsViewBuilder: (BuildContext context,
      AutocompleteOnSelected<String> onSelected, 
      Iterable<String> options) {
    return Align(
      alignment: Alignment.topLeft,
      child: Material(
        elevation: 4.0,
        child: SizedBox(
          height: 200.0,
          child: ListView.builder(
            padding: EdgeInsets.zero,
            itemCount: options.length,
            itemBuilder: (BuildContext context, int index) {
              final String option = options.elementAt(index);
              return ListTile(
                title: Text(option),
                onTap: () {
                  onSelected(option);
                },
              );
            },
          ),
        ),
      ),
    );
  },
)

3. 使用第三方包

也可以使用第三方包如 flutter_typeahead：

dependencies:
  flutter_typeahead: ^4.1.0

TypeAheadField(
  textFieldConfiguration: TextFieldConfiguration(
    decoration: InputDecoration(hintText: '搜索...'),
  ),
  suggestionsCallback: (pattern) async {
    return suggestions.where((item) => 
      item.toLowerCase().contains(pattern.toLowerCase())
    ).toList();
  },
  itemBuilder: (context, suggestion) {
    return ListTile(
      title: Text(suggestion),
    );
  },
  onSuggestionSelected: (suggestion) {
    print('选择了: $suggestion');
  },
)

主要特点

  • Autocomplete: Flutter 官方组件，简单易用
  • RawAutocomplete: 提供完全自定义能力
  • 第三方包: 更多功能和自定义选项

选择哪种方式取决于你的具体需求，对于大多数场景，使用内置的 Autocomplete 组件即可满足需求。

回到顶部