前言

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

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

TextField, FormField

基本屬性

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

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

輸入處理

其實對于一個輸入框，我們最關心的無非就是監聽輸入的內容，然后輸入完成后，輸入框中的內容是什么，文檔中寫的很清楚，textfiled控件有三個回調函數

在這里我們只需要關注onChanged和onSubmitted即可。

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

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

• validator,如果開啟autovalidate: true,那么將會自動檢驗輸入的值,如果沒有則會在表單提交的時候檢驗 該函數只允許返回驗證失敗的錯誤信息以及驗證通過時返回null。
• onSaved, 當調用FormState.save方法的時候調用。
• onFieldSubmitted, 與onSubmitted一樣,則是在輸入結束,點擊完成的時候觸發。

編輯控制

無論是在TextField還是TextFormField中,都有一個重要的屬性controller,該屬性可用來對輸入框內容進行控制。
先創建一個控制對象：

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

為輸入框初始化值以及注冊一個監聽事件：

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

觸發一個監聽事件：

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

Form

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

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 ? "密碼長度錯誤" : null; }, onSaved: (val) { _password = val; }, ), ], ), ), ), ), ); 

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

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

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

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

在_forSubmitted中我們使用key的currentState屬性來獲取表單的實例對象

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

對于表單對象來說,其有一些非常實用的方法比如: reset 重置表單內容 validate, 調用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 ? "密碼長度錯誤" : null; }, onSaved: (val) { _password = val; }, ), ], ), ), ), ), ); } } 

本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得，所有資料僅供用戶學習參考，本站不擁有所有權，如您認為本網頁中由涉嫌抄襲的內容，請及時與我們聯系，并提供相關證據，工作人員會在5工作日內聯系您，一經查實，本站立刻刪除侵權內容。本文鏈接:http://www.juherenli.com/17597.html