Flutter質(zhì)感設(shè)計(jì)之表單輸入
FormField控件是單一表單字段,這個(gè)控件維護(hù)表單字段的當(dāng)前狀態(tài),以便更新和驗(yàn)證錯(cuò)誤能在UI中可見。TextField控件就是在FormField中包裝了一個(gè)Input控件(后面的文章講解),F(xiàn)ormField維護(hù)輸入的當(dāng)前值,使您不需要自己管理它,更容易一次保存,重置或驗(yàn)證多個(gè)字段。
import 'package:flutter/material.dart'; class MyApp extends StatefulWidget { @override _MyApp createState() => new _MyApp(); } class _MyApp extends State<MyApp> { String _lastName; String _firstName; GlobalKey<FormState> _formKey = new GlobalKey<FormState>(); void _showMessage(String name) { showDialog<Null>( context: context, child: new AlertDialog( content: new Text(name), actions: <Widget>[ new FlatButton( onPressed: () { Navigator.pop(context); }, child: new Text('確定') ) ] ) ); } @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text('表單輸入') ), // Form:用于將多個(gè)表單控件組合在一起的容器 body: new Form( key: _formKey, child: new Column( children: <Widget> [ // TextFieldd:包含輸入的表單控件,每個(gè)表單字段都應(yīng)該在FormField控件中 new TextField( labelText: '姓氏', // onSaved:當(dāng)通過Form.save()保存表單時(shí)調(diào)用的方法 onSaved: (InputValue value) { _lastName = value.text; } ), new TextField( labelText: '名字', onSaved: (InputValue value) { _firstName = value.text; } ), new Row( children: <Widget> [ new RaisedButton( child: new Text('重置'), onPressed: () { // reset():將此Form下的每個(gè)TextField重置為初始狀態(tài) _formKey.currentState.reset(); _showMessage('姓名信息已經(jīng)重置'); } ), new RaisedButton( child: new Text('提交'), onPressed: () { // save():保存Form下的每個(gè)TextField _formKey.currentState.save(); _showMessage('你的姓名是'+_lastName+_firstName); } ) ] ) ] ) ) ); } } void main() { runApp(new MaterialApp( title: 'Flutter Demo', home: new MyApp() )); }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫效果(一)
- Flutter Android端啟動(dòng)白屏問題的解決
- flutter實(shí)現(xiàn)仿boss直聘功能
- Flutter中ListView 的使用示例
- Flutter質(zhì)感設(shè)計(jì)之彈出菜單
- Flutter實(shí)現(xiàn)底部導(dǎo)航欄效果
- Flutter質(zhì)感設(shè)計(jì)之持久底部面板
- Flutter質(zhì)感設(shè)計(jì)之底部導(dǎo)航
- Flutter質(zhì)感設(shè)計(jì)之進(jìn)度條
- Flutter中獲取屏幕及Widget的寬高示例代碼
相關(guān)文章
android實(shí)現(xiàn)人臉識(shí)別技術(shù)的示例代碼
本篇文章主要介紹了android人臉識(shí)別技術(shù)的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03Android Gradle依賴管理、去除重復(fù)依賴、忽略的方式
這篇文章主要介紹了Android Gradle依賴管理、去除重復(fù)依賴、忽略的方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-03-03Android SQLite數(shù)據(jù)庫連接實(shí)現(xiàn)登錄功能
這篇文章主要為大家詳細(xì)介紹了Android SQLite數(shù)據(jù)庫連接實(shí)現(xiàn)登錄功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-10-10Android程序打開和對(duì)輸入法的操作(打開/關(guān)閉)
整理了一下Android下對(duì)輸入法的操作:打開輸入法窗口、關(guān)閉出入法窗口、如果輸入法打開則關(guān)閉,如果沒打開則打開、獲取輸入法打開的狀態(tài)2013-05-05Android中TextView實(shí)現(xiàn)超過固定行數(shù)顯示“...展開全部”
這篇文章主要給大家介紹了關(guān)于Android中TextView如何實(shí)現(xiàn)超過固定行數(shù)顯示"...展開全部"的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12gradle tool升級(jí)到3.0注意事項(xiàng)小結(jié)
這篇文章主要介紹了gradle tool升級(jí)到3.0注意事項(xiàng)及修改相關(guān)文件介紹,需要的朋友可以參考下2018-02-02Android實(shí)現(xiàn)屏幕旋轉(zhuǎn)方法總結(jié)
這篇文章主要介紹了Android實(shí)現(xiàn)屏幕旋轉(zhuǎn)方法,實(shí)例總結(jié)了屏幕旋轉(zhuǎn)的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04關(guān)于Android發(fā)送短信獲取送達(dá)報(bào)告的問題(推薦)
最近公司開發(fā)一個(gè)項(xiàng)目,要求app能夠發(fā)送短信并獲取送達(dá)報(bào)告。實(shí)現(xiàn)代碼非常簡(jiǎn)單的,下面小編給大家分享關(guān)于Android發(fā)送短信獲取送達(dá)報(bào)告的問題,感興趣的朋友一起看看吧2017-03-03Android編程之?dāng)?shù)據(jù)庫Sql編程實(shí)例分析
這篇文章主要介紹了Android編程之?dāng)?shù)據(jù)庫Sql編程,實(shí)例分析了Android操作Sqlite數(shù)據(jù)庫的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04