Flutter开发（十八）—— 表单

表单，页面中负责数据采集功能的控件。

在原生Android中EditText输入框，是重要的数据采集控件。而Flutter中TextField就是与EditText对应的重要的输入框控件，并且TextField属性和效果要比EditText强大不少。比如自带边框，输入动画等。

常用属性（具体的参考官方文档或查看源码）：

child autocorrect autofocus enabled inputFormatters keyboardType text maxLines maxLength maxLengthEnforced obscureText onChanged newValue onSubmitted value style color amberAccentgreen textAlign center decoration labelText icon location_city border helperText hintText prefixIcon games prefixText

以下为演示代码：

在main.dart中配置主题和根路由页面 FormPage.dart:

context debugShowCheckedModeBanner initialRoute routes context theme primaryColor deepPurple

根路由页面（FormPage.dart）中显示垂直布局Column，在其中放置两个TextField （在demo文件夹有 TextFieldDemo.dart 和 TextFieldDemo2.dart）。

context appBar title centerTitle body data primaryColor white70 child context colorcontextprimaryColor padding child mainAxisAlignment start children height

其中，TextFieldDemo.dart页面演示TextField的常用属性：

_TextFieldDemoState _TextFieldDemoState context decoration icon person size color deepPurple labelText hintText border borderRadius helperText helperStyle fontSize color red suffixText onChanged value onSubmitted value onEditingComplete

在 TextFieldDemo2.dart 中使用另一种监听值输入的方式（TextEditingController），这个方式可以设定初始值：

_TextFieldDemo2State _TextFieldDemo2State editingController editingControllertext editingController editingController context decoration icon person_add border controller editingController

演示效果：

上边的是TextFieldDemo.dart，下边的是TextFieldDemo2.dart。

Flutter中的Form组件和html中的的作用类似，都是起到了一个容器的作用。里面可以包含多个TextFormField，便于多个输入框的统一管理和操作。

以下以用户注册为场景进行演示：

1、main.dart与前文中代码一样，只是作为根路由的引入；

2、FormPage.dart与前文基本一样，只是加入了RegisterForm.dart，而注释了其他展示控件；

context appBar title centerTitle body data primaryColor white70 child context colorcontextprimaryColor padding child mainAxisAlignment start children

3、RegisterFrom.dart注册页面代码逻辑。

其中展示了：

①、Form 与 TextFormField纵向布局的用法；

②、obscureText使输入内容变为小黑点展示；

③、validator 进行输入内容验证；

④、autovalidate 进行自动验证，并扩展为初始默认不自动验证，当提交验证不通过时，才开启自动验证功能。

_RegisterFromState _RegisterFromState registerKey username password bool autovalidate context key registerKey child children decoration labelText helperText onSaved value username value validator validatorUsername autovalidate autovalidate obscureText decoration labelText helperText onSaved value password value validator validatorPassword autovalidate autovalidate height width infinity child color contextaccentColor child style color white elevation onPressed submitFrom registerKeycurrentState registerKeycurrentState context content autovalidate value valueisEmpty value valueisEmpty

效果展示：

ZhouSa.com