【Flutter】表单提交

每天进步一点。

最近有空的时候，学习一下Flutter，偶尔记录一下学习内容，记录下遇到的问题。

下面是一个简单的表单验证。

import 'package:flutter/material.dart';

class FormRoute extends StatefulWidget {
  final String _title;

  FormRoute(this._title);

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return FormRouteState();
  }
}

class FormRouteState extends State<FormRoute> {
  FocusNode focusNode = FocusNode();
  FocusNode _uNameNode = FocusNode();
  FocusNode _pwdNode = FocusNode();
  TextEditingController _uNameController = TextEditingController();
  TextEditingController _pwdController = TextEditingController();
  GlobalKey _formKey = new GlobalKey<FormState>();

  FormRouteState();

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    focusNode.addListener(() {
      print(focusNode.hasFocus);
      setState(() {});
    });
    return Scaffold(
      appBar: AppBar(
        title: Text(widget._title),
      ),
      body: Form(
          key: _formKey,
          autovalidate: false,
//          onWillPop: () {}, 这种话似乎是推出新界面的 ，所以在搞表单的时候，不要瞎写，不然返回键可能用不了
          onChanged: () {},
          child: Column(children: <Widget>[
            Padding(
              padding: EdgeInsets.symmetric(vertical: 20, horizontal: 20),
              child: Text("用户登录"),
            ),
            Container(
              child: TextFormField(
                controller: _uNameController,
                validator: (str) {
                  return str.trim().length > 0 ? null : "用户名不能为空";
                },
                focusNode: _uNameNode,
                autofocus: true,
                decoration: InputDecoration(
                    labelText: "用户名", hintText: "请输入用户名", prefixIcon: Icon(Icons.person), border: InputBorder.none),
              ),
              decoration: BoxDecoration(
                  border: Border(
                      bottom: BorderSide(color: _uNameNode.hasFocus ? Colors.red[200] : Colors.grey[300], width: 0.5))),
            ),
            Container(
              child: TextFormField(
                controller: _pwdController,
                focusNode: _pwdNode,
                autofocus: false,
                obscureText: true,
                decoration: InputDecoration(
                  border: InputBorder.none,
                  labelText: "密码",
                  hintText: "请输入用户名",
                  prefixIcon: Icon(Icons.lock),
                ),
                validator: (str) {
                  return str.trim().length > 5 ? null : "密码不能小于六位";
                },
              ),
              decoration: BoxDecoration(
                  border: Border(
                      bottom: BorderSide(color: _pwdNode.hasFocus ? Colors.red[200] : Colors.grey[300], width: 0.5))),
            ),
            Padding(
              padding: EdgeInsets.only(top: 20, left: 30, right: 30),
              child: Row(
                children: <Widget>[
                  Expanded(
                    child: RaisedButton(
                      onPressed: () {
                        if ((_formKey.currentState as FormState).validate()) {
                          print("用户名是：" +_uNameController.text +"密码是："+_pwdController.text);
                        }
                      },
                      child: Text("登录"),
                      color: Theme.of(context).primaryColor,
                      textColor: Colors.white,
                    ),
                  )
                ],
              ),
            ),
            Theme(
              data: Theme.of(context).copyWith(
                  hintColor: Colors.grey[200], //定义下划线的颜色
                  inputDecorationTheme: InputDecorationTheme(
                      labelStyle: TextStyle(
                        color: Colors.grey[500],
                      ), //Label的字体样式,
                      hintStyle: TextStyle(
                        color: Colors.grey[300],
                      ), //提示文本的字体样式,
                      border: InputBorder.none)),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[],
              ),
            ),
          ])),
    );
  }
}

遇到的几个问题：

1：写完表单后，在这个界面按返回键报错

原因：在Form这个widget中，有一个的参数，如果给这个参数传入了一个空的函数，就会报错。上文中的代码中有注释。具体这个参数是干啥用的，目前还不知道。

2：_uNameController.text报错，提示为_uNameController为空。

原因：从Java转过来的毛病。

TextEditingController _uNameController,_pwdController = TextEditingController();

这么写的话，_uNameController好像就没被初始化了。