首页 > 系统 > Android > 正文

Flutter质感设计之表单输入

2019-10-21 21:40:25
字体:
来源:转载
供稿:网友

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

Flutter,质感设计,表单输入

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持VEVB武林网。


注:相关教程知识阅读请移步到Android开发频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表