Flutter如何实现倒计时组件

Flutter中如何实现一个自定义的倒计时组件？我需要一个能够在应用程序中显示剩余时间并实时更新的解决方案。有没有推荐的方法或者现成的包可以使用？最好能支持暂停、继续和重置功能，并且样式可以自定义。另外，倒计时结束时能否触发回调事件？如果组件能适配不同屏幕尺寸就更好了。

2 回复

使用Timer.periodic或CountdownTimer实现。

  1. 创建Timer对象，每秒更新剩余时间。
  2. 在setState中更新UI，显示倒计时。
  3. 结束时取消定时器，避免内存泄漏。
    示例代码可参考官方Timer类文档。

更多关于Flutter如何实现倒计时组件的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现倒计时组件，可以使用Timer.periodic或CountdownTimer。以下是两种常用方法：

方法一：使用Timer.periodic（推荐）

import 'dart:async';
import 'package:flutter/material.dart';

class CountdownWidget extends StatefulWidget {
  final int seconds;

  const CountdownWidget({Key? key, required this.seconds}) : super(key: key);

  @override
  _CountdownWidgetState createState() => _CountdownWidgetState();
}

class _CountdownWidgetState extends State<CountdownWidget> {
  late int _remainingSeconds;
  late Timer _timer;

  @override
  void initState() {
    super.initState();
    _remainingSeconds = widget.seconds;
    _startTimer();
  }

  void _startTimer() {
    _timer = Timer.periodic(const Duration(seconds: 1), (timer) {
      setState(() {
        if (_remainingSeconds > 0) {
          _remainingSeconds--;
        } else {
          _timer.cancel();
          // 倒计时结束处理
          print('Countdown finished!');
        }
      });
    });
  }

  @override
  void dispose() {
    _timer.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Text(
      '$_remainingSeconds秒',
      style: const TextStyle(fontSize: 24),
    );
  }
}

// 使用示例
CountdownWidget(seconds: 60) // 60秒倒计时

方法二：使用CountdownTimer（需要quiver包）

  1. 在pubspec.yaml添加依赖：
dependencies:
  quiver: ^3.2.1
  1. 实现代码：
import 'package:quiver/async.dart';
import 'package:flutter/material.dart';

class CountdownTimerWidget extends StatefulWidget {
  final int seconds;

  const CountdownTimerWidget({Key? key, required this.seconds}) : super(key: key);

  @override
  _CountdownTimerWidgetState createState() => _CountdownTimerWidgetState();
}

class _CountdownTimerWidgetState extends State<CountdownTimerWidget> {
  StreamSubscription<int>? _subscription;
  int _remainingSeconds = 0;

  @override
  void initState() {
    super.initState();
    _startTimer();
  }

  void _startTimer() {
    _remainingSeconds = widget.seconds;
    _subscription = CountdownTimer(
      Duration(seconds: widget.seconds),
      const Duration(seconds: 1),
    ).listen((data) {
      setState(() => _remainingSeconds = widget.seconds - data);
    }, onDone: () {
      print('Countdown finished!');
      _subscription?.cancel();
    });
  }

  @override
  void dispose() {
    _subscription?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Text('$_remainingSeconds秒');
  }
}

关键说明：

  1. Timer.periodic：Flutter内置，无需额外依赖
  2. 状态管理：使用setState更新剩余时间
  3. 资源释放：务必在dispose中取消定时器
  4. 格式化时间：可通过Duration实现更复杂的时间显示

可根据需求添加暂停、重置等功能，通过控制Timer的启停即可实现。

回到顶部