Flutter实现简单的登录页面功能

学习Flutter日常记录,使用Form表单提交,

表单是包含表单元素的区域,表单元素允许用户输入内容,如文本域、下拉列表、单选框、复选框等,常见的场景就是登录、注册、输入信息等.表单离有两个最重要的组件,一个是Form组件,用于提交整个表单,另一个是TextFormField组件,用于用户输入

再来看看TextFormField组件的属性,如下所示:

 

对于输入框,我们最关心的是输入内容是否合法,比如邮箱地址是否正确,电话号码是否为数字等等,用户输入完成,需要获取用户输入的内容.

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

//全局key用来获取From表单组件
  GlobalKey<FormState> loginKey = GlobalKey<FormState>();

接下来编写一个简单的登陆界面,其中有用户名输入框,密码输入框,登录按钮,会进行一个判断,当用户名为空提示输入,密码不输入提示为空,同时密码少于六位,提示错误“密码不得少于六位”,完整代码如下:

import 'package:flutter/material.dart';

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

class LoginPageState extends State<LoginPage> {
  String username;
  String password;

  //全局key用来获取From表单组件
  GlobalKey<FormState> loginKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Form表单提交'),
      ),
      body: Column(
        children: <Widget>[
          Container(
            padding: EdgeInsets.all(16.0),
            child: Form(
              key: loginKey,
              child: Column(
                children: <Widget>[
                  TextFormField(
                    decoration: InputDecoration(labelText: '请输入用户名'),
                    onSaved: (value) {
                      username = value;
                    },
                    onFieldSubmitted: (value) {},
                  ),
                  TextFormField(
                    decoration: InputDecoration(labelText: '请输入密码'),
                    obscureText: true,
                    validator: (value) {
                      return value.length < 6 ? '密码长度不够六位' : null;
                    },
                    onSaved: (value) {
                      password = value;
                    },
                  )
                ],
              ),
            ),
          ),
          SizedBox(
            width: 340.0,
            height: 42.0,
            child: RaisedButton(
              onPressed: () {
                var loginForm = loginKey.currentState;
                print(loginForm);
                if(loginForm.validate()){
                  loginForm.save();
                  print("username:"+username + 'password:'+password);
                }
              },
              child: Text(
                '登录',
                style: TextStyle(fontSize: 18.0),
              ),
            ),
          )
        ],
      ),
    );
  }
}

以上为页面代码: