flutter发送验证码功能
程序员文章站
2022-09-05 20:55:57
一个发送验证码的需求:包括限制文本框输入长度和只允许输入数字
按惯例 先上图:
class mybody extends statefulwidget {...
一个发送验证码的需求:包括限制文本框输入长度和只允许输入数字
按惯例 先上图:
class mybody extends statefulwidget { @override _mybodystate createstate() => _mybodystate(); } class _mybodystate extends state<mybody> { bool isbuttonenable=true; //按钮状态 是否可点击 string buttontext='发送验证码'; //初始文本 int count=60; //初始倒计时时间 timer timer; //倒计时的计时器 texteditingcontroller mcontroller=texteditingcontroller(); void _buttonclicklisten(){ setstate(() { if(isbuttonenable){ //当按钮可点击时 isbuttonenable=false; //按钮状态标记 _inittimer(); return null; //返回null按钮禁止点击 }else{ //当按钮不可点击时 // debugprint('false'); return null; //返回null按钮禁止点击 } }); } void _inittimer(){ timer = new timer.periodic(duration(seconds: 1), (timer timer) { count--; setstate(() { if(count==0){ timer.cancel(); //倒计时结束取消定时器 isbuttonenable=true; //按钮可点击 count=60; //重置时间 buttontext='发送验证码'; //重置按钮文本 }else{ buttontext='重新发送($count)'; //更新文本内容 } }); }); } @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('重新发送 (${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), ), ), ), ], ), ); } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 小米mix4如何快速显示健康码 背部轻敲显示健康码设置教程
下一篇: 有故事的家庭