1.先看看api文档有没有像安卓CountDownTimer一样的类
地址： https://api.dart.dev/stable/2.4.0/dart-async/Timer-class.html
image.png
ok,既然有api，那就照着葫芦画瓢
2.导入包
import 'dart:async';
3.添加一个倒计时方法
class LoginPageState extends State<LoginPage> {
//定义变量
Timer _timer;
//倒计时数值
var countdownTime = 0;
//倒计时方法
startCountdown() {
countdownTime = 60;
final call = (timer) {
setState(() {
if (countdownTime < 1) {
_timer.cancel();
} else {
countdownTime -= 1;
}
});
};
_timer = Timer.periodic(Duration(seconds: 1), call);
}
咋和官方文档不一样，官方的只是倒计时，而我们需要重复这个倒计时，还是看文档
image.png
Timer.periodic 为创造一个重复的倒计时对象
3.为我们的验证码 Text添加点击方法
image.png
可以看到又多了一层判断countdownTime=0，如果不加这个判断的话，每次点击都会执行开始计时，计时器就会创建多个。
4.为Text赋值
我这里定义了一个方法
String handleCodeText() {
if (countdownTime > 0) {
return "${countdownTime}s后重新获取";
} else
return "获取验证码";
}
当然你也可以用Java中的三目运算符
child: Text(
countdownTime>0?"${countdownTime}s后重新获取":"获取验证码",
style: TextStyle(
color: Color.fromRGBO(21, 201, 187, 1)),
),
5.别忘了在页面关闭时取消掉这个Timer
@override
void dispose() {
super.dispose();
if (_timer != null) {
_timer.cancel();
}
}
6.最后来看一下效果吧，为了方便演示，我把时间调成了5s
timer.gif
