Flutter 实现倒计时
时间: 2024-03-06 16:51:14 浏览: 144
在 Flutter 中实现倒计时非常简单,你可以使用 `Timer` 类来实现。以下是一个示例代码:
```dart
import 'package:flutter/material.dart';
class CountdownTimer extends StatefulWidget {
final int seconds;
final Function onFinished;
CountdownTimer({required this.seconds, required this.onFinished});
@override
_CountdownTimerState createState() => _CountdownTimerState();
}
class _CountdownTimerState extends State<CountdownTimer> {
late int _secondsLeft;
late Timer _timer;
@override
void initState() {
super.initState();
_secondsLeft = widget.seconds;
_timer = Timer.periodic(Duration(seconds: 1), (timer) {
if (_secondsLeft > 0) {
setState(() {
_secondsLeft--;
});
} else {
widget.onFinished();
_timer.cancel();
}
});
}
@override
Widget build(BuildContext context) {
return Text(
'$_secondsLeft seconds left',
style: TextStyle(fontSize: 20),
);
}
@override
void dispose() {
_timer.cancel();
super.dispose();
}
}
```
在上面的示例中,`CountdownTimer` 是一个自定义的组件,它接受两个参数:`seconds` 表示倒计时的总秒数,`onFinished` 表示倒计时结束时要执行的函数。在 `initState` 方法中,我们创建了一个名为 `_timer` 的 `Timer` 对象,它每隔一秒钟就会执行一次回调函数。在回调函数中,我们判断 `_secondsLeft` 是否大于 0,如果是,就将 `_secondsLeft` 减 1,并通过 `setState` 方法更新 UI;如果不是,就执行 `onFinished` 函数,并取消 `_timer` 对象。
使用该组件非常简单,只需要在需要倒计时的地方添加以下代码:
```dart
CountdownTimer(
seconds: 60,
onFinished: () {
// 倒计时结束时要执行的代码
},
)
```
其中 `seconds` 参数表示要倒计时的总秒数,`onFinished` 参数表示倒计时结束时要执行的函数。
阅读全文