android表单设计,Flutter质感设计之表单输入

FormField控件是单一表单字段，这个控件维护表单字段的当前状态，以便更新和验证错误能在UI中可见。TextField控件就是在FormField中包装了一个Input控件(后面的文章讲解)，FormField维护输入的当前值，使您不需要自己管理它，更容易一次保存，重置或验证多个字段。

import 'package:flutter/material.dart';

class MyApp extends StatefulWidget {

@override

_MyApp createState() => new _MyApp();

}

class _MyApp extends State {

String _lastName;

String _firstName;

GlobalKey _formKey = new GlobalKey();

void _showMessage(String name) {

showDialog(

context: context,

child: new AlertDialog(

content: new Text(name),

actions: [

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: [

// 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: [

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()

));

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。