在上一篇文章中,介绍完毕了常用组件中的 TextField 组件,本篇文章将继续介绍常用组件中的表单组件。
在Flutter中,表单(Form)是一个用于数据收集和验证的容器组件。它通常与 TextField
和 FormField
等输入组件结合使用,以创建一个完整的用户输入表单。表单组件的主要作用是对输入数据进行验证和管理。
key
:GlobalKey<FormState>
类型,用于控制和访问表单的状态,如验证表单和保存表单数据。autovalidateMode
:控制表单字段的自动验证模式。例如,可以设置为 AutovalidateMode.always
让表单字段总是自动验证。onWillPop
:当用户尝试离开表单页时触发的回调,可以用于提示保存更改。onChanged
:当表单内任意一个表单字段的内容发生变化时调用的回调函数。import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Form Example'),
),
body: MyCustomForm(),
),
);
}
}
class MyCustomForm extends StatefulWidget {
@override
_MyCustomFormState createState() => _MyCustomFormState();
}
class _MyCustomFormState extends State<MyCustomForm> {
final _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
return Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
TextFormField(
decoration: InputDecoration(
hintText: 'Enter your email',
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter some text';
}
return null;
},
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0),
child: ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(content: Text('Processing Data')));
}
},
child: Text('Submit'),
),
),
],
),
);
}
}
在这个例子中,创建了一个带有 GlobalKey
的表单,它包含一个 TextFormField
用于输入和验证邮箱地址,并有一个提交按钮,当表单验证通过时会显示一个提示。
_formKey
在 Flutter 中通常是作为一个 GlobalKey<FormState>
实例来使用,主要用于管理 Form
组件。它提供了对表单的控制,使得开发者可以在表单外部执行一些操作,如验证表单、保存表单数据、重置表单等。
_formKey.currentState.validate()
可以触发表单中每个 FormField
的验证逻辑。_formKey.currentState.save()
可以调用表单中每个 FormField
的 onSaved
方法。_formKey.currentState.reset()
可以重置表单到初始状态,清除所有 FormField
的内容。原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。