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),
              ),
            ),
          )
        ],
      ),
    );
  }
}

以上爲頁面代碼: