Flutter自动完成表单字段插件simple_autocomplete_formfield的使用
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);
}
})
]),
),
),
));
}
代码解释
-
定义数据模型:
Person
类用于表示人员信息,包含姓名和地址。
-
主应用入口:
main
函数启动应用,并设置MyApp
为根组件。
-
表单状态管理:
_MyHomePageState
类管理表单的状态,包括选中的字母和人员。formKey
用于表单的全局管理。autovalidate
控制是否自动验证表单。
-
自动完成字段:
SimpleAutocompleteFormField<Person>
用于选择人员,通过onSearch
和itemFromString
方法提供搜索和匹配逻辑。SimpleAutocompleteFormField<String>
用于选择字母,通过onSearch
和itemFromString
方法提供搜索和匹配逻辑。
-
提交按钮:
- 点击提交按钮时,会验证表单并显示相应的提示信息。
通过以上示例,您可以了解如何在 Flutter 应用中使用 SimpleAutocompleteFormField
插件来实现自动完成功能。希望这对您有所帮助!
更多关于Flutter自动完成表单字段插件simple_autocomplete_formfield的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于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),
),
);
}
}
代码解释:
-
依赖导入:首先导入必要的包,包括
flutter/material.dart
和simple_autocomplete_formfield
。 -
主应用:定义一个
MyApp
类作为主应用入口,并在其中设置MaterialApp和主页面MyHomePage
。 -
主页面:
MyHomePage
是一个有状态的Widget,用于管理自动完成表单字段的状态。 -
建议列表:在
_MyHomePageState
类中定义一个字符串列表suggestions
,这些字符串将作为自动完成的建议。 -
自动完成表单字段:使用
SimpleAutocompleteFormField
来创建自动完成表单字段。通过suggestions
属性传递建议列表,通过onSelected
回调处理用户选择,通过itemBuilder
自定义每个建议项的UI,通过noSuggestionsFoundBuilder
自定义没有找到建议时的UI。 -
浮动按钮:添加一个浮动按钮,当用户点击时显示一个SnackBar,显示用户选择的值。
这个示例展示了如何使用simple_autocomplete_formfield
插件在Flutter应用中实现一个带有自动完成功能的表单字段。你可以根据自己的需求进一步自定义和扩展这个示例。