flutter實(shí)現(xiàn)發(fā)送驗(yàn)證碼功能
一個(gè)發(fā)送驗(yàn)證碼的需求:包括限制文本框輸入長度和只允許輸入數(shù)字
按慣例 先上圖:
class MyBody extends StatefulWidget { @override _MyBodyState createState() => _MyBodyState(); } class _MyBodyState extends State<MyBody> { bool isButtonEnable=true; //按鈕狀態(tài) 是否可點(diǎn)擊 String buttonText='發(fā)送驗(yàn)證碼'; //初始文本 int count=60; //初始倒計(jì)時(shí)時(shí)間 Timer timer; //倒計(jì)時(shí)的計(jì)時(shí)器 TextEditingController mController=TextEditingController(); void _buttonClickListen(){ setState(() { if(isButtonEnable){ //當(dāng)按鈕可點(diǎn)擊時(shí) isButtonEnable=false; //按鈕狀態(tài)標(biāo)記 _initTimer(); return null; //返回null按鈕禁止點(diǎn)擊 }else{ //當(dāng)按鈕不可點(diǎn)擊時(shí) // debugPrint('false'); return null; //返回null按鈕禁止點(diǎn)擊 } }); } void _initTimer(){ timer = new Timer.periodic(Duration(seconds: 1), (Timer timer) { count--; setState(() { if(count==0){ timer.cancel(); //倒計(jì)時(shí)結(jié)束取消定時(shí)器 isButtonEnable=true; //按鈕可點(diǎn)擊 count=60; //重置時(shí)間 buttonText='發(fā)送驗(yàn)證碼'; //重置按鈕文本 }else{ buttonText='重新發(fā)送($count)'; //更新文本內(nèi)容 } }); }); } @override void dispose() { timer?.cancel(); //銷毀計(jì)時(shí)器 timer=null; super.dispose(); } @override Widget build(BuildContext context) { return Container( child: Column( // mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Container( color: Colors.white, padding: EdgeInsets.only(left: 10,right: 10), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, // crossAxisAlignment: CrossAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.baseline, textBaseline: TextBaseline.ideographic, children: <Widget>[ Text('驗(yàn)證碼',style: TextStyle(fontSize: 13,color: Color(0xff333333)),), Expanded( child: Padding(padding: EdgeInsets.only(left: 15,right: 15,top: 15), child: TextFormField( maxLines: 1, onSaved: (value) { }, controller: mController, textAlign: TextAlign.left, inputFormatters: [WhitelistingTextInputFormatter.digitsOnly,LengthLimitingTextInputFormatter(6)], decoration: InputDecoration( hintText: ('填寫驗(yàn)證碼'), contentPadding: EdgeInsets.only(top: -5,bottom: 0), hintStyle: TextStyle( color: Color(0xff999999), fontSize: 13, ), alignLabelWithHint: true, border: OutlineInputBorder(borderSide: BorderSide.none), ), ),), ), Container( width: 120, child: FlatButton( disabledColor: Colors.grey.withOpacity(0.1), //按鈕禁用時(shí)的顏色 disabledTextColor: Colors.white, //按鈕禁用時(shí)的文本顏色 textColor:isButtonEnable?Colors.white:Colors.black.withOpacity(0.2), //文本顏色 color: isButtonEnable?Color(0xff44c5fe):Colors.grey.withOpacity(0.1), //按鈕的顏色 splashColor: isButtonEnable?Colors.white.withOpacity(0.1):Colors.transparent, shape: StadiumBorder(side: BorderSide.none), onPressed: (){ setState(() { _buttonClickListen(); });}, // child: Text('重新發(fā)送 (${secondSy})'), child: Text('$buttonText',style: TextStyle(fontSize: 13,),), ), ), ], ), ), Container( width: double.infinity, height: 45, margin: EdgeInsets.only(top: 50,left: 10,right: 10), child: RaisedButton( onPressed: () { debugPrint('${mController.text}'); }, shape: StadiumBorder(side: BorderSide.none), color: Color(0xff44c5fe), child: Text( '下一步', style: TextStyle(color: Colors.white,fontSize: 15), ), ), ), ], ), ); } }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android應(yīng)用程序的編譯流程及使用Ant編譯項(xiàng)目的攻略
這篇文章主要介紹了Android應(yīng)用程序的編譯流程及使用Ant編譯項(xiàng)目的攻略,Ant是集編譯測試部署于一體的Java自動化工具,要的朋友可以參考下2016-04-04Android中實(shí)現(xiàn)可滑動的Tab的3種方式
這篇文章主要介紹了Android中實(shí)現(xiàn)可滑動的Tab的3種方式,需要的朋友可以參考下2014-02-02Android 中View.onDraw(Canvas canvas)的使用方法
這篇文章主要介紹了Android 中View.onDraw(Canvas canvas)的使用方法的相關(guān)資料,希望通過本文能幫助到大家,需要的朋友可以參考下2017-09-09android應(yīng)用開發(fā)之spinner控件的簡單使用
Android的控件有很多種,其中就有一個(gè)Spinner的控件,這個(gè)控件其實(shí)就是一個(gè)下拉顯示列表。本文通過腳本之家平臺給大家介紹android應(yīng)用開發(fā)之spinner控件的簡單使用,感興趣的朋友可以參考下2015-11-11利用 kotlin 的方式自定義回調(diào)事件(kotlin函數(shù)參數(shù))
這篇文章主要介紹了利用 kotlin 的方式自定義回調(diào)事件(kotlin函數(shù)參數(shù)),具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-03-03Android面向切面基于AOP實(shí)現(xiàn)登錄攔截的場景示例
這篇文章主要為大家介紹了Android面向切面基于AOP實(shí)現(xiàn)登錄攔截的場景示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08Android 個(gè)人理財(cái)工具二:使用SQLite實(shí)現(xiàn)啟動時(shí)初始化數(shù)據(jù)
本文主要介紹 Android 使用SQLite實(shí)現(xiàn)啟動時(shí)初始化數(shù)據(jù),這里對SQLite 的數(shù)據(jù)庫進(jìn)行詳解,附有示例代碼,有興趣的小伙伴可以參考下2016-08-08Android Studio+MAT實(shí)戰(zhàn)內(nèi)存泄漏
這篇文章主要介紹了Android Studio+MAT實(shí)戰(zhàn)內(nèi)存泄漏的相關(guān)技術(shù)內(nèi)容,并在需要注意的地方做了提示,需要參考學(xué)習(xí)下吧。2017-12-12