FormField控件是单一表单字段,这个控件维护表单字段的当前状态,以便更新和验证错误能在UI中可见。TextField控件就是在FormField中包装了一个Input控件(后面的文章讲解),FormField维护输入的当前值,使您不需要自己管理它,更容易一次保存,重置或验证多个字段。
import 'package:flutter/material.dart';
class MyApp extends StatefulWidget {
@override
_MyApp createState() => new _MyApp();
}
class _MyApp extends State<MyApp> {
String _lastName;
String _firstName;
GlobalKey<FormState> _formKey = new GlobalKey<FormState>();
void _showMessage(String name) {
showDialog<Null>(
context: context,
child: new AlertDialog(
content: new Text(name),
actions: <Widget>[
new FlatButton(
onPressed: () {
Navigator.pop(context);
},
child: new Text('确定')
)
]
)
);
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('表单输入')
),
// Form:用于将多个表单控件组合在一起的容器
body: new Form(
key: _formKey,
child: new Column(
children: <Widget> [
// TextFieldd:包含输入的表单控件,每个表单字段都应该在FormField控件中
new TextField(
labelText: '姓氏',
// onSaved:当通过Form.save()保存表单时调用的方法
onSaved: (InputValue value) {
_lastName = value.text;
}
),
new TextField(
labelText: '名字',
onSaved: (InputValue value) {
_firstName = value.text;
}
),
new Row(
children: <Widget> [
new RaisedButton(
child: new Text('重置'),
onPressed: () {
// reset():将此Form下的每个TextField重置为初始状态
_formKey.currentState.reset();
_showMessage('姓名信息已经重置');
}
),
new RaisedButton(
child: new Text('提交'),
onPressed: () {
// save():保存Form下的每个TextField
_formKey.currentState.save();
_showMessage('你的姓名是'+_lastName+_firstName);
}
)
]
)
]
)
)
);
}
}
void main() {
runApp(new MaterialApp(
title: 'Flutter Demo',
home: new MyApp()
));
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持得得之家。
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!