Flutter实战：开源鸿蒙定时器与秒表组件

定时器是移动应用中常见的功能组件，广泛应用于运动健身、烹饪计时、学习专注等场景。在Flutter鸿蒙开发中，我们可以利用Dart语言的Timer类实现高性能的定时器功能，无需依赖原生API，实现真正的跨平台一致性。倒计时功能（支持暂停、继续、停止）秒表功能（支持计时、暂停、重置）时间格式化显示idle, // 空闲状态running, // 运行中paused, // 已暂停finished, /

keeen11111

99人浏览 · 2026-04-26 23:29:44

keeen11111 · 2026-04-26 23:29:44 发布

本文详细介绍如何在Flutter鸿蒙应用中实现倒计时和秒表功能，通过纯Dart实现跨平台定时器组件。

Flutter 三方库 cached_network_image 的鸿蒙化适配与实战指南
欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

一、前言

定时器是移动应用中常见的功能组件，广泛应用于运动健身、烹饪计时、学习专注等场景。在Flutter鸿蒙开发中，我们可以利用Dart语言的Timer类实现高性能的定时器功能，无需依赖原生API，实现真正的跨平台一致性。

本文将介绍如何实现：

倒计时功能（支持暂停、继续、停止）
秒表功能（支持计时、暂停、重置）
时间格式化显示

二、定时器核心实现

2.1 状态枚举定义

首先定义定时器的状态枚举：

enum TimerState {
  idle,      // 空闲状态
  running,   // 运行中
  paused,    // 已暂停
  finished,  // 已完成
}

2.2 倒计时实现

倒计时类使用Timer.periodic实现每秒触发：

class CountdownTimer {
  final int totalSeconds;
  int remainingSeconds;
  TimerState state = TimerState.idle;
  Timer? _timer;
  Function(int)? onTick;
  Function()? onFinish;

  CountdownTimer({
    required this.totalSeconds,
    this.onTick,
    this.onFinish,
  }) : remainingSeconds = totalSeconds;

  void start() {
    if (state == TimerState.running) return;
    state = TimerState.running;
    _timer = Timer.periodic(const Duration(seconds: 1), (timer) {
      if (remainingSeconds > 0) {
        remainingSeconds--;
        onTick?.call(remainingSeconds);
        if (remainingSeconds == 0) {
          stop();
          state = TimerState.finished;
          onFinish?.call();
        }
      }
    });
  }

  void pause() {
    if (state != TimerState.running) return;
    _timer?.cancel();
    state = TimerState.paused;
  }

  void resume() {
    if (state != TimerState.paused) return;
    start();
  }

  void stop() {
    _timer?.cancel();
    _timer = null;
    state = TimerState.idle;
  }

  void reset() {
    stop();
    remainingSeconds = totalSeconds;
    state = TimerState.idle;
  }

  void dispose() {
    stop();
  }
}

2.3 秒表实现

秒表类同样使用Timer.periodic，但逻辑更简单：

class StopwatchTimer {
  int elapsedSeconds = 0;
  TimerState state = TimerState.idle;
  Timer? _timer;
  Function(int)? onTick;

  void start() {
    if (state == TimerState.running) return;
    state = TimerState.running;
    _timer = Timer.periodic(const Duration(seconds: 1), (timer) {
      elapsedSeconds++;
      onTick?.call(elapsedSeconds);
    });
  }

  void pause() {
    if (state != TimerState.running) return;
    _timer?.cancel();
    state = TimerState.paused;
  }

  void resume() {
    if (state != TimerState.paused) return;
    start();
  }

  void reset() {
    _timer?.cancel();
    _timer = null;
    elapsedSeconds = 0;
    state = TimerState.idle;
  }

  void dispose() {
    _timer?.cancel();
    _timer = null;
  }

  String get formattedTime {
    final hours = elapsedSeconds ~/ 3600;
    final minutes = (elapsedSeconds % 3600) ~/ 60;
    final seconds = elapsedSeconds % 60;
    if (hours > 0) {
      return '${hours.toString().padLeft(2, '0')}:${minutes.toString().padLeft(2, '0')}:${seconds.toString().padLeft(2, '0')}';
    }
    return '${minutes.toString().padLeft(2, '0')}:${seconds.toString().padLeft(2, '0')}';
  }
}

三、UI界面实现

3.1 倒计时界面

class TimerPage extends StatefulWidget {
  const TimerPage({super.key});

  @override
  State<TimerPage> createState() => _TimerPageState();
}

class _TimerPageState extends State<TimerPage> {
  CountdownTimer? _countdownTimer;
  int _countdownMinutes = 5;
  int _countdownSeconds = 0;

  void _startCountdown() {
    _countdownTimer?.dispose();
    final totalSeconds = _countdownMinutes * 60 + _countdownSeconds;
    if (totalSeconds <= 0) return;

    _countdownTimer = CountdownTimer(
      totalSeconds: totalSeconds,
      onTick: (_) => setState(() {}),
      onFinish: () {
        setState(() {});
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(content: Text('倒计时结束！')),
        );
      },
    );
    _countdownTimer!.start();
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    // 构建UI...
  }
}

3.2 时间选择器

使用DropdownButton实现分钟和秒数选择：

Row(
  children: [
    Expanded(
      child: Column(
        children: [
          const Text('分钟'),
          DropdownButton<int>(
            value: _countdownMinutes,
            isExpanded: true,
            items: List.generate(60, (i) => 
              DropdownMenuItem(value: i, child: Text('$i'))),
            onChanged: (v) => setState(() => _countdownMinutes = v ?? 0),
          ),
        ],
      ),
    ),
    const SizedBox(width: 16),
    Expanded(
      child: Column(
        children: [
          const Text('秒'),
          DropdownButton<int>(
            value: _countdownSeconds,
            isExpanded: true,
            items: List.generate(60, (i) => 
              DropdownMenuItem(value: i, child: Text('$i'))),
            onChanged: (v) => setState(() => _countdownSeconds = v ?? 0),
          ),
        ],
      ),
    ),
  ],
)

四、关键实现要点

4.1 资源释放

在dispose方法中正确释放Timer资源：

@override
void dispose() {
  _countdownTimer?.dispose();
  _stopwatchTimer?.dispose();
  super.dispose();
}

4.2 状态管理

使用setState触发UI更新，确保倒计时显示实时更新：

_timer = Timer.periodic(const Duration(seconds: 1), (timer) {
  remainingSeconds--;
  onTick?.call(remainingSeconds);  // 触发setState
});

4.3 时间格式化

统一的时间格式化方法：

static String formatTime(int seconds) {
  final hours = seconds ~/ 3600;
  final minutes = (seconds % 3600) ~/ 60;
  final secs = seconds % 60;
  if (hours > 0) {
    return '${hours.toString().padLeft(2, '0')}:${minutes.toString().padLeft(2, '0')}:${secs.toString().padLeft(2, '0')}';
  }
  return '${minutes.toString().padLeft(2, '0')}:${secs.toString().padLeft(2, '0')}';
}