一個發(fā)送驗證碼的需求:包括限制文本框輸入長度和只允許輸入數(shù)字
創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司一直秉承“誠信做人,踏實做事”的原則,不欺瞞客戶,是我們最起碼的底線! 以服務(wù)為基礎(chǔ),以質(zhì)量求生存,以技術(shù)求發(fā)展,成交一個客戶多一個朋友!專注中小微企業(yè)官網(wǎng)定制,成都網(wǎng)站建設(shè)、做網(wǎng)站,塑造企業(yè)網(wǎng)絡(luò)形象打造互聯(lián)網(wǎng)企業(yè)效應(yīng)。
按慣例 先上圖:
class MyBody extends StatefulWidget { @override _MyBodyState createState() => _MyBodyState(); } class _MyBodyState extends State<MyBody> { bool isButtonEnable=true; //按鈕狀態(tài) 是否可點擊 String buttonText='發(fā)送驗證碼'; //初始文本 int count=60; //初始倒計時時間 Timer timer; //倒計時的計時器 TextEditingController mController=TextEditingController(); void _buttonClickListen(){ setState(() { if(isButtonEnable){ //當(dāng)按鈕可點擊時 isButtonEnable=false; //按鈕狀態(tài)標記 _initTimer(); return null; //返回null按鈕禁止點擊 }else{ //當(dāng)按鈕不可點擊時 // debugPrint('false'); return null; //返回null按鈕禁止點擊 } }); } void _initTimer(){ timer = new Timer.periodic(Duration(seconds: 1), (Timer timer) { count--; setState(() { if(count==0){ timer.cancel(); //倒計時結(jié)束取消定時器 isButtonEnable=true; //按鈕可點擊 count=60; //重置時間 buttonText='發(fā)送驗證碼'; //重置按鈕文本 }else{ buttonText='重新發(fā)送($count)'; //更新文本內(nèi)容 } }); }); } @override void dispose() { timer?.cancel(); //銷毀計時器 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('驗證碼',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: ('填寫驗證碼'), 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), //按鈕禁用時的顏色 disabledTextColor: Colors.white, //按鈕禁用時的文本顏色 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í)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
分享標題:flutter發(fā)送驗證碼功能
本文URL:http://muchs.cn/article40/gepjeo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供關(guān)鍵詞優(yōu)化、虛擬主機、移動網(wǎng)站建設(shè)、網(wǎng)站改版、網(wǎng)站內(nèi)鏈、網(wǎng)站設(shè)計
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)