Flutter Form表单控件超全总结

注意:无特殊说明,Flutter版本及Dart版本如下:

  • Flutter版本: 1.12.13+hotfix.5
  • Dart版本: 2.7.0

Form、FormField、TextFormField是表单相关控件,类似于H5中form。

FormField

FormField是一个表单控件,此控件包含表单的状态,方便更新UI,通常情况下,我们不会直接使用FormField,而是使用TextFormField。

TextFormField

TextFormField继承自FormField,是一个输入框表单,因此TextFormField中有很多关于TextField的属性,TextFormField的基本用法:

TextFormField(
  onSaved: (value){
    print(‘$value‘);
  },
  autovalidate: false,
  validator: (String value){
    return value.length>=6?null:‘账号最少6个字符‘;
  },
)

TextFormField效果如下:

onSaved是一个可选参数,当Form调用FormState.save时才会回调此方法。

autovalidate参数为是否自动验证,设置为true时,TextField发生变化就会调用validator,设置false时,FormFieldState.validate调用时才会回调validator,如果Form的autovalidate设置为true,TextFormField忽略此参数。

validator验证函数,输入的值不匹配的时候返回的字符串显示在TextField的errorText属性位置,返回null,表示没有错误。

Form

Form组件是一个容器类控件,可以包含多个FormField表单控件,这样的好处是统一管理。

在使用Form的时候需要设置其key,通过key获取当前的FormState,然后可以调用FormState的savevalidatereset等方法,一般通过如下方法设置:

final _formKey = GlobalKey<FormState>();
Form(
    key: _formKey,
    ...
)

获取FormState并调用相关方法:

var _state = _formKey.currentState;
if(_state.validate()){
  _state.save();
}

validate方法为验证表单数据的合法性,此方法会调用每一个FormField的validator回调,此回调需要字符串表示数据验证不通过,将会在改表单下显示返回的字符串,具体可查看下TextFormField介绍。

save方法回调每一个FormField的save方法,通常情况下保存表单数据。

用Form写一个简单的登录功能,代码如下:

var _account = ‘‘;
var _pwd = ‘‘;
final _formKey = GlobalKey<FormState>();
Form(
  key: _formKey,
  child: Column(
    children: <Widget>[
      TextFormField(
        decoration: InputDecoration(hintText: ‘输入账号‘),
        onSaved: (value) {
          _name = value;
        },
        validator: (String value) {
          return value.length >= 6 ? null : ‘账号最少6个字符‘;
        },
      ),
      TextFormField(
        decoration: InputDecoration(hintText: ‘输入密码‘),
        obscureText: true,
        onSaved: (value) {
          _pwd = value;
        },
        validator: (String value) {
          return value.length >= 6 ? null : ‘账号最少6个字符‘;
        },
      ),
      RaisedButton(
        child: Text(‘登录‘),
        onPressed: () {
          var _state = Form.of(context);
          if(_state.validate()){
            _state.save();
            login(_name,_pwd);
          }
        },
      )
    ],
  ),
)

我们希望用户在输入表单时点击返回按钮提示用户"确认退出吗?",用法如下:

Form(
  key: _formKey,
  onWillPop: () async {
    return await showDialog<bool>(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            title: Text(‘提示‘),
            content: Text(‘确认退出吗?‘),
            actions: <Widget>[
              FlatButton(
                child: Text(‘取消‘),
                onPressed: () {
                  Navigator.of(context).pop(false);
                },
              ),
              FlatButton(
                child: Text(‘确认‘),
                onPressed: () {
                  Navigator.of(context).pop(true);
                },
              ),
            ],
          );
        });
  },
  ...
)

效果如下:

onWillPop回调决定Form所在的路由是否可以直接返回,该回调需要返回Future&lt;bool&gt;,返回false表示当前路由不会返回;为true,则会返回到上一个路由。此属性通常用于拦截返回按钮。

onChanged:当子表单控件发生变化时回调。

欢迎加入Flutter的微信交流群(<font color=‘red‘>mqd_zzy</font>),让我们一起学习,一起进步,开始我们的故事,生活不止眼前的苟且,还有诗和《远方》。

当然我也非常希望您关注我个人的公众号,里面有各种福利等着大家哦。

原文地址:https://blog.51cto.com/11206976/2478369

时间: 2024-10-12 06:32:24

Flutter Form表单控件超全总结的相关文章

JSP常用Form表单控件

[easyui]--combobox--赋值和获取选中的值 /初始化下拉选框 $('#communityIdDiv').combobox({ url:basepath+"pushController/queryCommonityName", valueField:'col_ID', textField:'col_Name', panelHeight:80, selectOnNavigation:false, loadFilter:function(data){ var o = [{'c

bootstrap的form表单控件的事例

<html lang="en"> <head> <title>form</title> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width

bootstrap -- 表单控件

若干css样式 .form-control { display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.428571429; color: #555555; vertical-align: middle; background-color: #ffffff; background-image: none; border: 1px solid #cccccc; bor

表单控件使用

表单控件使用 <span style="font-family:Microsoft YaHei;"><!--百度搜索:自信的尘埃 2014/12/29--> <html> <meta charset="UTF-8"/> <head>     <title>表单元素</title> </head> <body>     <form action="

Bootstrap关于表单控件(按扭)

按钮也是表单重要控件之一,制作按钮通常使用下面代码来实现:   ?  input[type=“submit”]   ?  input[type=“button”]   ?  input[type=“reset”]   ?  <button> 这里先让大家看看Bootstrap的按钮长成什么样: 表单控件的大小: 前面看到的表单控件都正常的大小.可以通过设置控件的height,line-height,padding和font-size等属性来实现控件的高度设置.不过Bootstrap框架还提供了

表单控件+下拉列表+文本域

一.表单控件 1.<input type="text" name="user"  size="20默认" /> 2.<input type="password" name="code"  /> 3.<input type="radio" name="sex[]" value="1" />+<input ty

Bootstrap_表单_表单控件

一.输入框input 单行输入框,常见的文本输入框,也就是input的type属性值为text. 在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootstrap框架都是通过input[type=“?”] (其中?号代表type类型,比如说text类型,对应的是input[type=“text”])的形式来定义样式的. 为了让控件在各种表单风格中样式不出错,需要添加类名“.form-control”. <form role=&quo

常用的一些表单控件

表单:用于显示 收集信息,并提交信息到服务器)1.表单元素 <form ></form> 主要属性:action: 当提交表单时,向何处发送表单数据,属性值为一个URL method:使用什么方式将表单数据发送到action属性所规定的页面(get post) enctype:表单数据进行编码的方式 name:表单名称2.表单控件: (1).<input>元素用于收集用户信息,为单标记. 主要属性: type:根据不同的type属性值,可以创建各种类型的输入字段 val

仿苹果电脑任务栏菜单&amp;&amp;拼图小游戏&amp;&amp;模拟表单控件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-