一个发送验证码的需求:包括限制文本框输入长度和只允许输入数字
按惯例 先上图:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
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 ), ), ), ), ], ), ); } } |
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。
原文链接:https://blog.csdn.net/ulddfhv/article/details/93435111