Flutter自动补全文本插件 autocomplete_textfield 的使用

autocomplete_textfield 是一个用于Flutter的自动补全文本输入框插件。它支持任意数据类型的建议列表，并且可以通过自定义过滤器和排序来实现复杂的自动补全功能。

主要特性

• 支持任意数据类型建议
• 提供全局键以调用 clear() 方法清除自动补全文本框
• 可以通过 itemFilter 自定义过滤逻辑，默认情况下区分大小写
• 提供了简单和复杂示例演示如何使用该插件

使用方法

安装插件

首先，在您的 pubspec.yaml 文件中添加依赖：

dependencies:
  autocomplete_textfield: ^1.7.3 # 请根据最新版本号进行替换

然后运行 flutter pub get 来安装依赖。

示例代码

下面提供了两个示例：一个是简单的字符串自动补全，另一个是更复杂的自定义对象自动补全。

简单字符串自动补全

import 'package:flutter/material.dart';
import 'package:autocomplete_textfield/autocomplete_textfield.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Auto Complete TextField Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FirstPage(),
    );
  }
}

class FirstPage extends StatefulWidget {
  @override
  _FirstPageState createState() => _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {
  GlobalKey<AutoCompleteTextFieldState<String>> key = GlobalKey();

  List<String> suggestions = [
    "Apple", "Armidillo", "Actual", "Actuary", "America", "Argentina",
    "Australia", "Antarctica", "Blueberry", "Cheese", "Danish", "Eclair",
    "Fudge", "Granola", "Hazelnut", "Ice Cream", "Jely", "Kiwi Fruit",
    "Lamb", "Macadamia", "Nachos", "Oatmeal", "Palm Oil", "Quail",
    "Rabbit", "Salad", "T-Bone Steak", "Urid Dal", "Vanilla", "Waffles",
    "Yam", "Zest"
  ];

  SimpleAutoCompleteTextField? textField;

  @override
  void initState() {
    super.initState();
    textField = SimpleAutoCompleteTextField(
      key: key,
      decoration: InputDecoration(errorText: "Beans"),
      controller: TextEditingController(text: "Starting Text"),
      suggestions: suggestions,
      textChanged: (text) {},
      clearOnSubmit: true,
      textSubmitted: (text) {},
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Simple AutoComplete TextField')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: textField,
      ),
    );
  }
}

复杂自定义对象自动补全

class ArbitrarySuggestionType {
  num stars;
  String name, imgURL;

  ArbitrarySuggestionType(this.stars, this.name, this.imgURL);
}

class SecondPage extends StatefulWidget {
  @override
  _SecondPageState createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage> {
  List<ArbitrarySuggestionType> suggestions = [
    ArbitrarySuggestionType(4.7, "Minamishima", "https://example.com/image.jpg"),
    // 其他示例数据...
  ];

  GlobalKey<AutoCompleteTextFieldState<ArbitrarySuggestionType>> key =
      GlobalKey();

  AutoCompleteTextField<ArbitrarySuggestionType>? textField;
  ArbitrarySuggestionType? selected;

  @override
  void initState() {
    super.initState();
    textField = AutoCompleteTextField<ArbitrarySuggestionType>(
      decoration: InputDecoration(hintText: "Search Restaurant:", suffixIcon: Icon(Icons.search)),
      itemSubmitted: (item) => setState(() => selected = item),
      key: key,
      suggestions: suggestions,
      itemBuilder: (context, suggestion) => Padding(
        padding: EdgeInsets.all(8.0),
        child: ListTile(
          title: Text(suggestion.name),
          trailing: Text("Stars: ${suggestion.stars}"),
        ),
      ),
      itemSorter: (a, b) => a.stars == b.stars ? 0 : a.stars > b.stars ? -1 : 1,
      itemFilter: (suggestion, input) =>
          suggestion.name.toLowerCase().startsWith(input.toLowerCase()),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Complex AutoComplete TextField')),
      body: Column(
        children: [
          Padding(
            padding: EdgeInsets.all(16.0),
            child: Container(child: textField),
          ),
          if (selected != null)
            Card(
              child: Column(
                children: [
                  ListTile(
                    title: Text(selected!.name),
                    trailing: Text("Rating: ${selected!.stars}/5"),
                  ),
                  Image(image: NetworkImage(selected!.imgURL), width: 400.0, height: 300.0),
                ],
              ),
            ),
        ],
      ),
    );
  }
}

以上就是关于 autocomplete_textfield 插件的基本介绍及其使用示例。希望这些信息能够帮助您更好地理解和使用该插件。如果您有任何问题或需要进一步的帮助，请随时提问！