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的save
、validate
、reset
等方法,一般通过如下方法设置:
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<bool>
,返回false
表示当前路由不会返回;为true
,则会返回到上一个路由。此属性通常用于拦截返回按钮。
onChanged
:当子表单控件发生变化时回调。
- Windows8异步编程的注意事项
- Spring(一)Spring的第一滴血
- Flume(一)Flume原理解析
- 我所理解的Remoting (2) :远程对象的生命周期管理[下篇]
- struts2(六)之ognl表达式与ActionContext、ValueStack
- Windows8异步编程的注意事项
- CSS魔法堂:深入理解line-height和vertical-align
- Gradle 10分钟上手指南
- gradle项目中profile的实现
- 欧盟推出“数字经济税收制度”优化了税收制度,却影响区块链行业
- CSS魔法堂:你一定误解过的Normal flow
- ASP.NET输出JSON格式数据
- haproxy 新手上路
- 区块链是如何保护交易隐私的?eprint这篇论文告诉你答案
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 全平台轻量开源verilog仿真工具iverilog+GTKWave使用教程
- R语言时间序列和ARIMA模型预测拖拉机销售的制造案例研究
- Windows10下安装linux子系统学习笔记
- 项目实践 | 从零开始学习Deep SORT+YOLO V3进行多目标跟踪(附注释项目代码)
- [OHIF-Viewers]医疗数字阅片-医学影像-Module: Panel-自定义面板-中-es6-Object.defineProperty()定义属性
- (数据科学学习手札90)Python+Kepler.gl轻松制作时间轮播地图
- WEB前端安全自查和加固
- 硬核!IDEA 中使用 Git 完整入门教程!
- 神器你值得拥有——CoolFormat代码一键自动格式化工具,支持Verilog
- 一个简单现实案例挑战 PowerBI 水平测试 - 深度解析
- [译]使用DOT语言和GraphvizOnline来可视化你的ASP.NETCore3.0终结点01
- 探索 React 内核:深入 Fiber 架构和协调算法
- [经验]使用Keil MDK+Jlink-OB下载失败的解决办法
- ESP8266两种工作模式数据传输测试
- 『真香警告』这33个超级好用的CSS选择器,你可能见都没见过。