前言

最近在利用flutter制作校園軟件，需要制作一個(gè)登錄界面，所以要用到Flutter中的一些表單控件，今天就來總結(jié)下flutter中的一些表單控件。
本文參考：

• 《Flutter 基礎(chǔ)組件-表單》
• FormState class
• Form Class
• TextField class
• TextFormField

TextField, FormField

基本屬性

先從最基礎(chǔ)的講起，對(duì)于TextField就是android中的edittext，就是一個(gè)輸入框（ TextField class），這個(gè)輸入框常用的屬性如下：

child: new TextField( autocorrect: false, // 是否自動(dòng)校正 autofocus: false, //自動(dòng)獲取焦點(diǎn) enabled: true, // 是否啟用 inputFormatters: [], //對(duì)輸入的文字進(jìn)行限制和校驗(yàn) keyboardType: TextInputType.text, //獲取焦點(diǎn)時(shí),啟用的鍵盤類型 maxLines: 2, // 輸入框最大的顯示行數(shù) maxLength: 3, //允許輸入的字符長度/ maxLengthEnforced: false, //是否允許輸入的字符長度超過限定的字符長度 obscureText: true, // 是否隱藏輸入的內(nèi)容 onChanged: (newValue) { // print(newValue); // 當(dāng)輸入內(nèi)容變更時(shí),如何處理 }, onSubmitted: (value) { // print("whar"); // 當(dāng)用戶確定已經(jīng)完成編輯時(shí)觸發(fā) }, style: new TextStyle( color: new Color(Colors.amberAccent.green)), // 設(shè)置字體樣式 textAlign: TextAlign.center, //輸入的內(nèi)容在水平方向如何顯示 decoration: new InputDecoration( labelText: "城市", icon: new Icon(Icons.location_city), border: new OutlineInputBorder(), // 邊框樣式 helperText: 'required', hintText: '請(qǐng)選擇你要投保的城市', prefixIcon: new Icon(Icons.android), prefixText: 'Hello'), ), 

輸入處理

其實(shí)對(duì)于一個(gè)輸入框，我們最關(guān)心的無非就是監(jiān)聽輸入的內(nèi)容，然后輸入完成后，輸入框中的內(nèi)容是什么，文檔中寫的很清楚，textfiled控件有三個(gè)回調(diào)函數(shù)

在這里我們只需要關(guān)注onChanged和onSubmitted即可。

child: new TextField( controller: _controller, decoration: new InputDecoration(labelText: 'Your Name'), onChanged: (val) { print(val); }, onSubmitted: (String v) { print(v); }, ), 

顧名思義: onChanged事件,在輸入內(nèi)容發(fā)生變化的時(shí)候觸發(fā)，onSubmitted事件,則是在輸入結(jié)束,點(diǎn)擊完成的時(shí)候觸發(fā)。
然而在TextFormField中沒有這兩個(gè)事件,取而代之的是validator,onSaved,onFieldSubmitted 他們都接受三個(gè)函數(shù),并且將其值作為參數(shù)傳遞到函數(shù)里面

• validator,如果開啟autovalidate: true,那么將會(huì)自動(dòng)檢驗(yàn)輸入的值,如果沒有則會(huì)在表單提交的時(shí)候檢驗(yàn) 該函數(shù)只允許返回驗(yàn)證失敗的錯(cuò)誤信息以及驗(yàn)證通過時(shí)返回null。
• onSaved, 當(dāng)調(diào)用FormState.save方法的時(shí)候調(diào)用。
• onFieldSubmitted, 與onSubmitted一樣,則是在輸入結(jié)束,點(diǎn)擊完成的時(shí)候觸發(fā)。

編輯控制

無論是在TextField還是TextFormField中,都有一個(gè)重要的屬性controller,該屬性可用來對(duì)輸入框內(nèi)容進(jìn)行控制。
先創(chuàng)建一個(gè)控制對(duì)象：

 TextEditingController _controller = new TextEditingController();TextEditingController _formFieldController = new TextEditingController(); 

為輸入框初始化值以及注冊(cè)一個(gè)監(jiān)聽事件：

 @override void initState() { // TODO: implement initState super.initState(); _controller.value = new TextEditingValue(text: 'Hello'); _formFieldController.addListener(() { print('listener'); }); } 

觸發(fā)一個(gè)監(jiān)聽事件：

 void _textFieldAction() { // print(_formFieldController.selection); // print(_formFieldController.text); //獲取輸入內(nèi)容 print(_formFieldController.hasListeners); //判斷是否注冊(cè)監(jiān)聽事件 _formFieldController.notifyListeners(); //觸發(fā)監(jiān)聽事件 } 

Form

Flutter中的Form組件和html中的<form></form>的作用類似，都是起到了一個(gè)容器的作用，里面包含了TextFormField的一個(gè)列表 下面通過一個(gè)例子說明表單的一些特性

1. 布局

@override Widget build(BuildContext context) { // TODO: implement build return new MaterialApp( title: 'Flutter data', home: new Scaffold( appBar: new AppBar( title: new Text('Flutter Form'), ), floatingActionButton: new FloatingActionButton( onPressed: _forSubmitted, child: new Text('提交'), ), body: new Container( padding: const EdgeInsets.all(16.0), child: new Form( key: _formKey, child: new Column( children: <Widget>[ new TextFormField( decoration: new InputDecoration( labelText: 'Your Name', ), onSaved: (val) { _name = val; }, ), new TextFormField( decoration: new InputDecoration( labelText: 'Password', ), obscureText: true, validator: (val) { return val.length < 4 ? "密碼長度錯(cuò)誤" : null; }, onSaved: (val) { _password = val; }, ), ], ), ), ), ), ); 

以上,我們使用一個(gè)Form包裹著兩個(gè)TextFormField組件,在這里為了簡(jiǎn)便,我們只設(shè)置了一些必要的元素,先暫時(shí)忽略TextFormField中的事件
為了獲取表單的實(shí)例,我們需要設(shè)置一個(gè)全局類型的key,通過這個(gè)key的屬性,來獲取表單對(duì)象。

GlobalKey<FormState> _formKey = new GlobalKey<FormState>(); String _name; String _password; 

同時(shí)也設(shè)置了_name,_password兩個(gè)變量來存儲(chǔ)用戶的輸入值,在TextFormField組件的onSaved方法中,將輸入框的值賦值到設(shè)定的變量中
我們通過FloatingActionButton來觸發(fā)表單提交事件，

floatingActionButton: new FloatingActionButton( onPressed: _forSubmitted, child: new Text('提交'), ), 

在_forSubmitted中我們使用key的currentState屬性來獲取表單的實(shí)例對(duì)象

 void _forSubmitted() { var _form = _formKey.currentState;if (_form.validate()) { _form.save(); print(_name); print(_password); } } 

對(duì)于表單對(duì)象來說,其有一些非常實(shí)用的方法比如: reset 重置表單內(nèi)容 validate, 調(diào)用TextFormField的validator方法 save, 表單保存。

完整代碼

import 'package:flutter/material.dart';void main() => runApp(new HomePage());class HomePage extends StatefulWidget { @override _HomePageState createState() => new _HomePageState(); }class _HomePageState extends State<HomePage> { GlobalKey<FormState> _formKey = new GlobalKey<FormState>();String _name;String _password;void _forSubmitted() { var _form = _formKey.currentState;if (_form.validate()) { _form.save(); print(_name); print(_password); } }@override Widget build(BuildContext context) { // TODO: implement build return new MaterialApp( title: 'Flutter data', home: new Scaffold( appBar: new AppBar( title: new Text('Flutter Form'), ), floatingActionButton: new FloatingActionButton( onPressed: _forSubmitted, child: new Text('提交'), ), body: new Container( padding: const EdgeInsets.all(16.0), child: new Form( key: _formKey, child: new Column( children: <Widget>[ new TextFormField( decoration: new InputDecoration( labelText: 'Your Name', ), onSaved: (val) { _name = val; }, ), new TextFormField( decoration: new InputDecoration( labelText: 'Password', ), obscureText: true, validator: (val) { return val.length < 4 ? "密碼長度錯(cuò)誤" : null; }, onSaved: (val) { _password = val; }, ), ], ), ), ), ), ); } } 

本頁內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁中由涉嫌抄襲的內(nèi)容，請(qǐng)及時(shí)與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會(huì)在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://m.jstctz.cn/17597.html