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自動(dòng)化工具,要的朋友可以參考下2016-04-04
Android中實(shí)現(xiàn)可滑動(dòng)的Tab的3種方式
這篇文章主要介紹了Android中實(shí)現(xiàn)可滑動(dòng)的Tab的3種方式,需要的朋友可以參考下2014-02-02
Android 中View.onDraw(Canvas canvas)的使用方法
這篇文章主要介紹了Android 中View.onDraw(Canvas canvas)的使用方法的相關(guān)資料,希望通過本文能幫助到大家,需要的朋友可以參考下2017-09-09
android應(yīng)用開發(fā)之spinner控件的簡單使用
Android的控件有很多種,其中就有一個(gè)Spinner的控件,這個(gè)控件其實(shí)就是一個(gè)下拉顯示列表。本文通過腳本之家平臺(tái)給大家介紹android應(yīng)用開發(fā)之spinner控件的簡單使用,感興趣的朋友可以參考下2015-11-11
利用 kotlin 的方式自定義回調(diào)事件(kotlin函數(shù)參數(shù))
這篇文章主要介紹了利用 kotlin 的方式自定義回調(diào)事件(kotlin函數(shù)參數(shù)),具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-03-03
Android面向切面基于AOP實(shí)現(xiàn)登錄攔截的場景示例
這篇文章主要為大家介紹了Android面向切面基于AOP實(shí)現(xiàn)登錄攔截的場景示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08
Android 個(gè)人理財(cái)工具二:使用SQLite實(shí)現(xiàn)啟動(dòng)時(shí)初始化數(shù)據(jù)
本文主要介紹 Android 使用SQLite實(shí)現(xiàn)啟動(dòng)時(shí)初始化數(shù)據(jù),這里對SQLite 的數(shù)據(jù)庫進(jìn)行詳解,附有示例代碼,有興趣的小伙伴可以參考下2016-08-08
Android 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

