Flutter自动完成表单字段插件simple_autocomplete_formfield的使用

发布于 1周前 作者 nodeper 来自 Flutter

Flutter自动完成表单字段插件simple_autocomplete_formfield的使用

SimpleAutocompleteFormField 是一个 Flutter 插件,它包装了一个 TextFormField 并提供了自动完成功能。这个插件非常适合需要在表单中实现自动完成功能的场景。

示例代码

以下是一个完整的示例代码,展示了如何使用 SimpleAutocompleteFormField

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

// 定义一个Person类
class Person {
  Person(this.name, this.address);
  final String name, address;
  @override
  String toString() => name;
}

// 主应用入口
void main() => runApp(MyApp());
const title = 'simple_autocomplete_formfield example';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: title,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 定义一些示例数据
  final people = <Person>[
    Person('Alice', '123 Main'),
    Person('Bob', '456 Main')
  ];
  final letters = 'abcdefghijklmnopqrstuvwxyz'.split('');

  // 用于存储选中的值
  String? selectedLetter;
  Person? selectedPerson;

  // 表单的全局键
  final formKey = GlobalKey<FormState>();

  // 是否自动验证
  bool autovalidate = false;

  @override
  Widget build(BuildContext context) => Scaffold(
      appBar: AppBar(title: Text(title)),
      body: Builder(
        builder: (context) => Padding(
          padding: EdgeInsets.all(8.0),
          child: Form(
            key: formKey,
            autovalidateMode: autovalidate ? AutovalidateMode.always : AutovalidateMode.disabled,
            child: ListView(children: <Widget>[
              SizedBox(height: 16.0),
              Text('Selected person: "$selectedPerson"'),
              Text('Selected letter: "$selectedLetter"'),
              SizedBox(height: 16.0),
              // 用于选择Person的自动完成字段
              SimpleAutocompleteFormField<Person>(
                decoration: InputDecoration(labelText: 'Person', border: OutlineInputBorder()),
                suggestionsHeight: 80.0,
                itemBuilder: (context, person) => Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
                    Text(person!.name, style: TextStyle(fontWeight: FontWeight.bold)),
                    Text(person.address)
                  ]),
                ),
                onSearch: (search) async => people
                    .where((person) =>
                        person.name.toLowerCase().contains(search.toLowerCase()) ||
                        person.address.toLowerCase().contains(search.toLowerCase()))
                    .toList(),
                itemFromString: (string) {
                  final matches = people.where((person) => person.name.toLowerCase() == string.toLowerCase());
                  return matches.isEmpty ? null : matches.first;
                },
                onChanged: (value) => setState(() => selectedPerson = value),
                onSaved: (value) => setState(() => selectedPerson = value),
                validator: (person) => person == null ? 'Invalid person.' : null,
              ),
              SizedBox(height: 16.0),
              // 用于选择字母的自动完成字段
              SimpleAutocompleteFormField<String>(
                decoration: InputDecoration(labelText: 'Letter', border: OutlineInputBorder()),
                maxSuggestions: 10,
                itemBuilder: (context, item) => Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Text(item!),
                ),
                onSearch: (String search) async => search.isEmpty
                    ? letters
                    : letters.where((letter) => search.toLowerCase().contains(letter)).toList(),
                itemFromString: (string) =>
                    letters.singleWhere((letter) => letter == string.toLowerCase(), orElse: () => ''),
                onChanged: (value) => setState(() => selectedLetter = value),
                onSaved: (value) => setState(() => selectedLetter = value),
                validator: (letter) => letter == null ? 'Invalid letter.' : null,
              ),
              SizedBox(height: 16.0),
              ElevatedButton(
                  child: Text('Submit'),
                  onPressed: () {
                    if (formKey.currentState?.validate() ?? false) {
                      formKey.currentState!.save();
                      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Fields valid!')));
                    } else {
                      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Fix errors to continue.')));
                      setState(() => autovalidate = true);
                    }
                  })
            ]),
          ),
        ),
      ));
}

代码解释

  1. 定义数据模型

    • Person 类用于表示人员信息,包含姓名和地址。
  2. 主应用入口

    • main 函数启动应用,并设置 MyApp 为根组件。
  3. 表单状态管理

    • _MyHomePageState 类管理表单的状态,包括选中的字母和人员。
    • formKey 用于表单的全局管理。
    • autovalidate 控制是否自动验证表单。
  4. 自动完成字段

    • SimpleAutocompleteFormField<Person> 用于选择人员,通过 onSearchitemFromString 方法提供搜索和匹配逻辑。
    • SimpleAutocompleteFormField<String> 用于选择字母,通过 onSearchitemFromString 方法提供搜索和匹配逻辑。
  5. 提交按钮

    • 点击提交按钮时,会验证表单并显示相应的提示信息。

通过以上示例,您可以了解如何在 Flutter 应用中使用 SimpleAutocompleteFormField 插件来实现自动完成功能。希望这对您有所帮助!


更多关于Flutter自动完成表单字段插件simple_autocomplete_formfield的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter自动完成表单字段插件simple_autocomplete_formfield的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何在Flutter项目中使用simple_autocomplete_formfield插件来实现自动完成表单字段的示例代码。这个插件可以帮助你创建一个带有自动完成功能的表单字段,非常适合在用户输入时提供建议列表的场景。

首先,确保你已经在pubspec.yaml文件中添加了simple_autocomplete_formfield依赖:

dependencies:
  flutter:
    sdk: flutter
  simple_autocomplete_formfield: ^最新版本号  # 替换为当前最新版本号

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

接下来,在你的Dart文件中使用SimpleAutocompleteFormField。以下是一个完整的示例:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Simple Autocomplete FormField Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

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

  String? selectedValue;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Simple Autocomplete FormField Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: SimpleAutocompleteFormField<String>(
          decoration: InputDecoration(
            labelText: 'Select a fruit',
            border: OutlineInputBorder(),
          ),
          suggestions: suggestions,
          onSelected: (value) {
            setState(() {
              selectedValue = value;
            });
          },
          itemBuilder: (context, suggestion) {
            return ListTile(
              leading: Icon(Icons.label),
              title: Text(suggestion),
            );
          },
          noSuggestionsFoundBuilder: (context) {
            return ListTile(
              title: Text('No suggestions found'),
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Handle button press (e.g., submit the form)
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(
              content: Text('Selected: $selectedValue'),
            ),
          );
        },
        tooltip: 'Submit',
        child: Icon(Icons.check),
      ),
    );
  }
}

代码解释:

  1. 依赖导入:首先导入必要的包,包括flutter/material.dartsimple_autocomplete_formfield

  2. 主应用:定义一个MyApp类作为主应用入口,并在其中设置MaterialApp和主页面MyHomePage

  3. 主页面MyHomePage是一个有状态的Widget,用于管理自动完成表单字段的状态。

  4. 建议列表:在_MyHomePageState类中定义一个字符串列表suggestions,这些字符串将作为自动完成的建议。

  5. 自动完成表单字段:使用SimpleAutocompleteFormField来创建自动完成表单字段。通过suggestions属性传递建议列表,通过onSelected回调处理用户选择,通过itemBuilder自定义每个建议项的UI,通过noSuggestionsFoundBuilder自定义没有找到建议时的UI。

  6. 浮动按钮:添加一个浮动按钮,当用户点击时显示一个SnackBar,显示用户选择的值。

这个示例展示了如何使用simple_autocomplete_formfield插件在Flutter应用中实现一个带有自动完成功能的表单字段。你可以根据自己的需求进一步自定义和扩展这个示例。

回到顶部