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

autocomplete_textfield_ns 是一个用于Flutter应用的自动补全文本输入框插件。它支持自定义数据类型的建议，并提供了灵活的过滤和排序功能。

插件简介

该插件允许开发者创建一个带有自动完成功能的文本输入框，用户在输入时会根据提供的数据列表显示匹配项。这在需要快速选择或查找特定条目时非常有用。

使用方法

基本设置

首先，确保你已经在pubspec.yaml文件中添加了autocomplete_textfield_ns依赖：

dependencies:
  flutter:
    sdk: flutter
  autocomplete_textfield_ns: ^1.0.0 # 确保版本号正确

然后运行 flutter pub get 来安装这个包。

示例代码

以下是一个完整的示例，展示了如何使用autocomplete_textfield_ns来实现简单的和复杂的自动补全文本输入框。

主入口

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

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

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

主页面

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  State<StatefulWidget> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Widget> pages = [FirstPage(), SecondPage()];
  int selectedIndex = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.looks_one), label: "Simple Use"),
          BottomNavigationBarItem(icon: Icon(Icons.looks_two), label: "Complex Use"),
        ],
        onTap: (index) => setState(() {
          selectedIndex = index;
        }),
        currentIndex: selectedIndex,
      ),
      body: pages[selectedIndex],
    );
  }
}

简单用法页面

class FirstPage extends StatefulWidget {
  [@override](/user/override)
  _FirstPageState createState() => _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {
  List<String> added = [];
  String currentText = "";
  GlobalKey<AutoCompleteTextFieldState<String>> key = GlobalKey();

  late SimpleAutoCompleteTextField textField;

  List<String> suggestions = [
    "Apple", "Armidillo", "Actual", "Actuary", "America", "Argentina", "Australia", "Antarctica",
    // 更多选项...
  ];

  _FirstPageState() {
    textField = SimpleAutoCompleteTextField(
      key: key,
      decoration: InputDecoration(errorText: "Beans", hintText: "Type something"),
      controller: TextEditingController(),
      suggestions: suggestions,
      textChanged: (text) => currentText = text,
      clearOnSubmit: true,
      textSubmitted: (text) => setState(() {
        if (text != "") {
          added.add(text);
        }
      }),
    );
  }

  bool showWhichErrorText = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    Column body = Column(children: [
      ListTile(
          title: textField,
          trailing: IconButton(
              icon: Icon(Icons.add),
              onPressed: () {
                textField.triggerSubmitted();
                showWhichErrorText = !showWhichErrorText;
                textField.updateDecoration(
                    decoration: InputDecoration(
                        errorText: showWhichErrorText ? "Beans" : "Tomatoes"));
              })),
    ]);

    body.children.addAll(added.map((item) {
      return ListTile(title: Text(item));
    }));

    return Scaffold(
        resizeToAvoidBottomInset: false,
        appBar: AppBar(
            title: Text('AutoComplete TextField Demo Simple'),
            actions: [
              IconButton(
                  icon: Icon(Icons.edit),
                  onPressed: () => showDialog(
                      builder: (_) {
                        String text = "";

                        return AlertDialog(
                            title: Text("Change Suggestions"),
                            content: TextField(onChanged: (_text) => text = _text),
                            actions: [
                              TextButton(
                                  onPressed: () {
                                    if (text != "") {
                                      suggestions.add(text);
                                      textField.updateSuggestions(suggestions);
                                    }
                                    Navigator.pop(context);
                                  },
                                  child: Text("Add")),
                            ]);
                      },
                      context: context))
            ]),
        body: body);
  }
}

复杂用法页面

class ArbitrarySuggestionType {
  num stars;
  String name, imgURL;

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

class SecondPage extends StatefulWidget {
  [@override](/user/override)
  State<StatefulWidget> createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage> {
  List<ArbitrarySuggestionType> suggestions = [
    ArbitrarySuggestionType(4.7, "Minamishima", "url_to_image"),
    // 更多项...
  ];

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

  late AutoCompleteTextField<ArbitrarySuggestionType> textField;

  var selected = ArbitrarySuggestionType(5.0, "Anchovy", "url_to_image");

  _SecondPageState() {
    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](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      appBar: AppBar(title: Text('AutoComplete TextField Demo Complex')),
      body: Column(children: [
        Padding(padding: EdgeInsets.all(16.0), child: Container(child: textField)),
        Padding(
            padding: EdgeInsets.fromLTRB(0.0, 64.0, 0.0, 0.0),
            child: Card(
                child: Column(children: [
              ListTile(
                  title: Text(selected.name),
                  trailing: Text("Rating: ${selected.stars}/5")),
              Container(
                  child: Image(image: NetworkImage(selected.imgURL)),
                  width: 400.0,
                  height: 300.0)
            ]))),
      ]),
    );
  }
}