Flutter自动补全插件autocomplete_plus的使用

Flutter 包 AutoCompletePlus 是一个功能强大的自动补全插件，能够为文本输入框提供实时的选项建议。本文将通过完整的示例代码展示如何在 Flutter 中使用 autocomplete_plus 插件。

1. 添加依赖

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

dependencies:
  autocomplete_plus: ^0.0.8 # 确保使用最新版本

然后运行以下命令安装依赖：

flutter pub get

2. 示例代码

以下是完整的示例代码，展示了如何使用 autocomplete_plus 插件实现不同类型的自动补全功能。

示例代码

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.indigo,
      ),
      home: const MyHomePage(),
    );
  }
}

class UserModel {
  final String name;

  UserModel(this.name);
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  MyHomePageState createState() => MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  final _users = [
    UserModel('leonardo'),
    UserModel('leonardo Serrano'),
    UserModel('flutter'),
    UserModel('framework'),
    UserModel('dart'),
  ];

  final _words = [
    'framework',
    'leonardo serrano',
    'flutter',
    'dart',
    "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('autocomplete_plus'),
      ),
      resizeToAvoidBottomInset: true,
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 24.0),
        child: SingleChildScrollView(
          physics: const AlwaysScrollableScrollPhysics(),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              const Text('Fade and Floating (UserModel)'),
              const SizedBox(height: 16),
              AutoCompletePlus<UserModel>.fadeAndFloating(
                optionsBuilder: (textEditingValue) =>
                    textEditingValue.text.isEmpty
                        ? []
                        : _users.where(
                            (element) =>
                                element.name.startsWith(textEditingValue.text),
                          ),
                onSelected: (option) {
                  print('Selected: ${option.name}');
                },
                fieldDecoration: const InputDecoration(
                  border: OutlineInputBorder(),
                ),
                displayStringForOption: (option) => option.name,
                fadeTextStyle: const TextStyle(color: Colors.grey),
                fieldViewBuilder: (
                  context,
                  controller,
                  focusNode,
                  onFieldSubmitted,
                  decoration,
                  maxLine,
                  minLine,
                ) {
                  return TextFormField(
                    controller: controller,
                    focusNode: focusNode,
                    onFieldSubmitted: (value) => onFieldSubmitted(),
                    decoration: decoration,
                  );
                },
              ),
              const SizedBox(height: 16),
              const Divider(),
              const Text('Floating (String)'),
              const SizedBox(height: 16),
              AutoCompletePlus<String>.floating(
                optionsBuilder: (textEditingValue) =>
                    textEditingValue.text.isEmpty
                        ? []
                        : _words.where(
                            (element) =>
                                element.startsWith(textEditingValue.text),
                          ),
                fieldDecoration: const InputDecoration(
                  border: OutlineInputBorder(),
                ),
              ),
              const SizedBox(height: 16),
              const Divider(),
              const Text('Fade (String)'),
              const SizedBox(height: 16),
              AutoCompletePlus<String>.fade(
                optionsBuilder: (textEditingValue) =>
                    textEditingValue.text.isEmpty
                        ? []
                        : _words.where(
                            (element) =>
                                element.startsWith(textEditingValue.text),
                          ),
                fieldDecoration: const InputDecoration(
                  border: OutlineInputBorder(),
                ),
                fadeTextStyle: const TextStyle(color: Colors.grey),
              ),
              const SizedBox(height: 16),
              const Divider(),
              const Text('Fade and Floating Personalized (UserModel)'),
              const SizedBox(height: 16),
              AutoCompletePlus<UserModel>.fadeAndFloating(
                optionsBuilder: (textEditingValue) =>
                    textEditingValue.text.isEmpty
                        ? []
                        : _users.where(
                            (element) =>
                                element.name.startsWith(textEditingValue.text),
                          ),
                onSelected: (option) {
                  print('Selected: ${option.name}');
                },
                fieldDecoration: const InputDecoration(
                  border: OutlineInputBorder(),
                ),
                optionsBoxDecorations: BoxDecoration(
                  border: Border.all(),
                  color: Colors.blueGrey,
                  borderRadius: BorderRadius.circular(10),
                ),
                displayStringForOption: (option) => option.name,
                fadeTextStyle: const TextStyle(color: Colors.grey),
                optionsViewOpenDirection: OptionsViewOpenDirection.up,
                fieldViewBuilder: (
                  context,
                  controller,
                  focusNode,
                  onFieldSubmitted,
                  decoration,
                  maxLine,
                  minLine,
                ) {
                  return TextFormField(
                    controller: controller,
                    focusNode: focusNode,
                    onFieldSubmitted: (value) => onFieldSubmitted(),
                    decoration: decoration,
                  );
                },
              ),
              const SizedBox(height: 16),
              const Divider(),
              const Text('Fade Big (String) BETA - do not use!'),
              const SizedBox(height: 16),
              AutoCompletePlus<String>.fade(
                optionsBuilder: (textEditingValue) =>
                    textEditingValue.text.isEmpty
                        ? []
                        : _words.where(
                            (element) =>
                                element.startsWith(textEditingValue.text),
                          ),
                fieldDecoration: const InputDecoration(
                  border: OutlineInputBorder(),
                ),
                fadeTextStyle: const TextStyle(color: Colors.grey),
                maxLines: 10,
              ),
              const SizedBox(height: 16),
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter自动补全插件autocomplete_plus的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter自动补全插件autocomplete_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


autocomplete_plus 是一个用于 Flutter 的自动补全插件，它可以帮助你在输入框中实现自动补全功能。以下是如何使用 autocomplete_plus 的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 autocomplete_plus 依赖：

dependencies:
  flutter:
    sdk: flutter
  autocomplete_plus: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入包

在你的 Dart 文件中导入 autocomplete_plus 包：

import 'package:autocomplete_plus/autocomplete_plus.dart';

3. 使用 AutocompletePlus 组件

AutocompletePlus 是一个小部件，它允许你轻松地实现自动补全功能。你需要提供一个 optionsBuilder 函数来生成补全选项，以及一个 onSelected 回调来处理用户选择。

以下是一个简单的示例：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Autocomplete Plus Example'),
        ),
        body: Center(
          child: AutocompletePlus<String>(
            optionsBuilder: (TextEditingValue textEditingValue) {
              if (textEditingValue.text == '') {
                return const Iterable<String>.empty();
              }
              return ['Apple', 'Banana', 'Cherry', 'Date', 'Fig', 'Grape']
                  .where((String option) {
                return option.contains(textEditingValue.text.toLowerCase());
              });
            },
            onSelected: (String selection) {
              print('You just selected $selection');
            },
          ),
        ),
      ),
    );
  }
}

4. 自定义外观

你可以通过 fieldViewBuilder 和 optionsViewBuilder 来自定义输入框和选项列表的外观。

AutocompletePlus<String>(
  optionsBuilder: (TextEditingValue textEditingValue) {
    if (textEditingValue.text == '') {
      return const Iterable<String>.empty();
    }
    return ['Apple', 'Banana', 'Cherry', 'Date', 'Fig', 'Grape']
        .where((String option) {
      return option.contains(textEditingValue.text.toLowerCase());
    });
  },
  onSelected: (String selection) {
    print('You just selected $selection');
  },
  fieldViewBuilder: (BuildContext context,
      TextEditingController textEditingController,
      FocusNode focusNode,
      VoidCallback onFieldSubmitted) {
    return TextField(
      controller: textEditingController,
      focusNode: focusNode,
      decoration: InputDecoration(
        hintText: 'Search for a fruit',
        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.all(8.0),
            itemCount: options.length,
            itemBuilder: (BuildContext context, int index) {
              final String option = options.elementAt(index);
              return GestureDetector(
                onTap: () {
                  onSelected(option);
                },
                child: ListTile(
                  title: Text(option),
                ),
              );
            },
          ),
        ),
      ),
    );
  },
)

5. 处理复杂数据

如果你需要处理更复杂的数据类型，你可以使用 AutocompletePlus 的泛型功能。例如，处理一个包含多个字段的对象：

class Fruit {
  final String name;
  final String color;

  Fruit(this.name, this.color);
}

AutocompletePlus<Fruit>(
  optionsBuilder: (TextEditingValue textEditingValue) {
    if (textEditingValue.text == '') {
      return const Iterable<Fruit>.empty();
    }
    return [
      Fruit('Apple', 'Red'),
      Fruit('Banana', 'Yellow'),
      Fruit('Cherry', 'Red'),
      Fruit('Date', 'Brown'),
      Fruit('Fig', 'Purple'),
      Fruit('Grape', 'Green'),
    ].where((Fruit fruit) {
      return fruit.name.contains(textEditingValue.text.toLowerCase());
    });
  },
  onSelected: (Fruit selection) {
    print('You just selected ${selection.name} (${selection.color})');
  },
  displayStringForOption: (Fruit option) => option.name,
)
回到顶部