Flutter表单

一、Form
表单是一个包含表单元素的区域 。表单元素允许用户输入内容， 比如 : 文本域 、 下拉 列表、单选框、复选框等。 常见的应用场景有: 登录、注册、输入信息等。表单里有两个 重要的组件， 一个是 Form 组件用来做整个表单提交使用的，另一个是 TextFormField 组件用来做用户输入的。
form属性列表属性如下：

form属性列表

TextFromField属性列表如下：

TextFromField属性列表
为了获取表单示例，我们需要设置一个全局类型的key，通过这个 key 的属性，来获取表单对象。需要使用 GlobalKey 来获取， 代码如下所示:

Global Key<FormState> loginKey =new GlobalKey<FormState>();

二、Future
1、Future延时执行

 Future.delayed(Duration(milliseconds: 2000)).then((e) {
        // 延迟之后的操作
        platform.invokeMethod('login',[userName,password]);
      });

2、future异步执行，可用于网络请求。

Future<void> transmitMessage() async {
    final int result = await platform.invokeMethod('transmitMessage',['zhangkai','thanks','for','your']);
  }

三、 Expanded 自动填充剩余的空间
如果是ROW中的三张图片都添加了Expanded，那么他们平分屏幕宽度。如果只有一个添加了Expanded，那么这张图片会独自撑满剩余的空间。

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() => runApp(MyApp());
// 这个 widget 作用这个应用的顶层 widget.
//这个 widget 是无状态的，所以我们继承的是 [StatelessWidget].
//对应的，有状态的 widget 可以继承 [StatefulWidget]
class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    // 我们想使用 material 风格的应用，所以这里用 MaterialApp
    return MaterialApp(  
      // recent 按钮打开最近应用列表的时候，显示的就是这个 title。
      debugShowCheckedModeBanner: false,//移除右上角的测试标识。
      title: 'Welcome to Flutter',
      // 应用的“主页”
      home: LoginPage(),
    );
  }
}

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  //全局 Key 用来获取 Form 表单组件
  GlobalKey<FormState> loginKey = GlobalKey<FormState>();
  static const platform = const MethodChannel("coderwhy.com/battery");

  //用户名
  String userName;

  //密码
  String password;

  void login() {
      //读取当前 Form 状态
    var loginForm = loginKey.currentState;
    //验证 Form表单
    if (loginForm.validate()) {
      loginForm.save();
      print('userName：' + userName + '，password：' + password);
      //整个都会延时执行
      Future.delayed(Duration(milliseconds: 2000)).then((e) {
        // 延迟之后的操作
         platform.invokeMethod('login',[userName,password]);
      });
    }
  }


  // Expanded 自动填充剩余的空间
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Form 表单组件'),
        centerTitle: true,
      ),
      body: Column(
        children: <Widget>[
          Container(
            padding: EdgeInsets.all(16),
            child: Form(
              //设置globalKey，用于后面获取FormState
              key: loginKey,
              //开启自动校验
              autovalidate: true,
              child: Column(
                children: <Widget>[
                  TextFormField(
                    decoration: InputDecoration(
                      labelText: '请输入用户名',
                      hintText: "用户名或邮箱",
                      hintStyle: TextStyle(
                        color: Colors.grey,
                        fontSize: 13,
                      ),
                      prefixIcon: Icon(Icons.person),
                    ),
                    //校验用户
                    validator: (value) {
                      return value.trim().length > 0 ? null : "用户名不能为空";
                    },
                    //当 Form 表单调用保存方法 Save时回调的函数。
                    onSaved: (value) {
                      userName = value;
                    },
                    // 当用户确定已经完成编辑时触发
                    onFieldSubmitted: (value) {},
                  ),

                  TextFormField(
                    decoration: InputDecoration(
                      labelText: '请输入密码',
                      hintText: '你的登录密码',
                      hintStyle: TextStyle(
                        color: Colors.grey,
                        fontSize: 13,
                      ),
                      prefixIcon: Icon(Icons.lock),
                    ),
                    //是否是密码
                    obscureText: true,
                    //校验密码
                    validator: (value) {
                      return value.length < 6 && value.length > 0 ? '密码长度不够 6 位' : null;
                    },
                    onSaved: (value) {
                      password = value;
                    },
                  )
                ],
              ),
              //内容改变的回调
              onChanged: () {
                print("onChanged");
              },
            ),
          ),
          Container(
            padding: EdgeInsets.all(16),
            child: Row(
              children: <Widget>[
                Expanded(
                  child: RaisedButton(
                    padding: EdgeInsets.all(15),
                    child: Text(
                      "登录",
                      style: TextStyle(fontSize: 18),
                    ),
                    textColor: Colors.white,
                    color: Theme.of(context).primaryColor,
                    onPressed: login,
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}