Flutter如何实现select autocomplete功能

在Flutter中如何实现类似select autocomplete的功能？我需要在用户输入时显示匹配的下拉选项，并能选择其中的项。目前尝试过使用Autocomplete组件，但不太清楚如何与select功能结合，比如如何在下拉列表中显示选项并支持选择。是否有推荐的插件或实现方案？最好能提供简单的代码示例说明核心实现步骤。

2 回复

Flutter中实现select autocomplete可使用Autocomplete组件（Flutter 2.5+）或第三方库如flutter_typeahead。前者内置基础功能，后者支持更多自定义选项和异步数据加载。

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


在Flutter中实现select autocomplete功能，可以使用以下几种方式：

1. 使用 Autocomplete 组件（推荐）

Flutter 2.0+ 内置了 Autocomplete 组件：

import 'package:flutter/material.dart';

class AutoCompleteExample extends StatelessWidget {
  final List<String> options = [
    '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 options.where((String option) {
          return option.toLowerCase().contains(textEditingValue.text.toLowerCase());
        });
      },
      onSelected: (String selection) {
        print('选择了: $selection');
      },
    );
  }
}

2. 使用 SearchDelegate 实现搜索选择

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

  @override
  List<Widget> buildActions(BuildContext context) {
    return [
      IconButton(
        icon: Icon(Icons.clear),
        onPressed: () {
          query = '';
        },
      ),
    ];
  }

  @override
  Widget buildLeading(BuildContext context) {
    return IconButton(
      icon: Icon(Icons.arrow_back),
      onPressed: () {
        close(context, '');
      },
    );
  }

  @override
  Widget buildResults(BuildContext context) {
    final results = fruits.where((fruit) => 
        fruit.toLowerCase().contains(query.toLowerCase()));
    
    return ListView.builder(
      itemCount: results.length,
      itemBuilder: (context, index) {
        final fruit = results.elementAt(index);
        return ListTile(
          title: Text(fruit),
          onTap: () {
            close(context, fruit);
          },
        );
      },
    );
  }

  @override
  Widget buildSuggestions(BuildContext context) {
    final suggestions = fruits.where((fruit) => 
        fruit.toLowerCase().contains(query.toLowerCase()));
    
    return ListView.builder(
      itemCount: suggestions.length,
      itemBuilder: (context, index) {
        final fruit = suggestions.elementAt(index);
        return ListTile(
          title: Text(fruit),
          onTap: () {
            query = fruit;
            showResults(context);
          },
        );
      },
    );
  }
}

// 使用方式
IconButton(
  icon: Icon(Icons.search),
  onPressed: () {
    showSearch(
      context: context,
      delegate: FruitSearchDelegate(),
    ).then((selectedValue) {
      if (selectedValue != null && selectedValue.isNotEmpty) {
        print('选择了: $selectedValue');
      }
    });
  },
)

3. 使用第三方包 flutter_typeahead

在 pubspec.yaml 中添加依赖：

dependencies:
  flutter_typeahead: ^4.1.2

使用示例：

import 'package:flutter_typeahead/flutter_typeahead.dart';

TypeAheadField<String>(
  textFieldConfiguration: TextFieldConfiguration(
    decoration: InputDecoration(
      labelText: '选择水果',
      border: OutlineInputBorder(),
    ),
  ),
  suggestionsCallback: (pattern) async {
    return fruits.where((fruit) => 
        fruit.toLowerCase().contains(pattern.toLowerCase()));
  },
  itemBuilder: (context, suggestion) {
    return ListTile(
      title: Text(suggestion),
    );
  },
  onSuggestionSelected: (suggestion) {
    print('选择了: $suggestion');
  },
)

主要特点对比

  • Autocomplete: Flutter 原生，简单易用
  • SearchDelegate: 功能强大，适合复杂搜索场景
  • flutter_typeahead: 功能丰富，定制性强

根据你的具体需求选择合适的实现方式。

回到顶部