flutter中怎么实现发送验证码功能
创始人
2024-12-22 01:02:30
0次

一个发送验证码的需求:包括限制文本框输入长度和只允许输入数字

class MyBody extends StatefulWidget { @override _MyBodyState createState() => _MyBodyState();} class _MyBodyState extends State { 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: [   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: [     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),    ),   ),   ),  ],  ), ); }}

相关内容

热门资讯

空调连续工作多久需要停机休息 空调连续工作的时间取决于多个因素,包括空调的型号、功率、使用环境和维护情况等。一般来说,空调可以连续...
空调哪个符号是除湿的 空调除湿功能通常用一个水滴形状的符号表示。不同品牌和型号的空调遥控器可能会有所差异,但一般来说,除湿...
格力空调多长时间加一次氟利昂 1、一般情况下,空调对氟利昂的使用量是非常小的,所以在空调使用了四年左右的时候再考虑加也没问题。2、...
空调用多长时间需要加氟一次 一般情况下是五年。当出现以下这几种情况时,空调才需要加氟。1、空调的室内机和室外机各有两个接口,当接...
格调生活·C标思享荟:卡萨帝在... 9月12日的郑州龙湖金融岛,夜风轻拂,灯光璀璨。“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑...
品牌价值破千亿、高端份额持续领... 9月12日,“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑州站”在郑州龙湖金融岛举办。2026...
空调主板坏了修800还是换新的 空调主板坏了是修还是换新,需要考虑多个因素,以下是一些建议:1. 维修成本:如果维修费用较低,比如 ...
空调开多久需要休息多长时间 问题:空调开多久需要休息多长时间回答:1、在使用空调的过程中,一般空调开7~8个小时左右需要休息2~...
中央空调多长时间清洗一次 1、一般空调开机前清洗一次即可,空调开机中间时段再清洗一次,空调关机时清洗一次,这样比较合理。2、空...
中央空调氟利昂多久加一次 看空调制热和制冷程度,很多人的观点认为氟利昂必须一年放一次,其实这个观点是错误的,理解上面有点偏差,...