【flutter for open harmony】第三方库Flutter 鸿蒙版 秒表计时 实战指南（适配 1.0.0）✨

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

本文详细介绍如何在Flutter鸿蒙应用中实现秒表计时功能，包括精确计时、计次记录和控制操作。

一、前言

秒表是运动、实验等场景中常用的计时工具，可以精确记录时间。本文将介绍如何在Flutter鸿蒙应用中实现秒表计时功能。

二、效果展示

2.1 功能特性

功能	描述
精确计时	精确到百分之一秒
开始/停止	控制计时状态
重置功能	重置计时器归零
计次记录	记录每次计次时间

三、项目背景与目标

3.1 项目背景

秒表广泛应用于体育运动、科学实验、烹饪计时等场景，是日常生活中实用的计时工具。

3.2 项目目标

• 实现精确计时功能
• 实现开始/停止控制
• 实现重置功能
• 实现计次记录功能

四、技术架构设计

4.1 架构概述

秒表应用使用Flutter的Timer实现定时更新，通过毫秒级计数实现精确计时。

4.2 时间格式

时间格式为 HH:MM:SS.CC（时:分:秒.百分秒）

五、详细实现

5.1 Flutter端实现

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

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

  @override
  State<SimpleStopwatchPage> createState() => _SimpleStopwatchPageState();
}

class _SimpleStopwatchPageState extends State<SimpleStopwatchPage> {
  Timer? _timer;
  int _milliseconds = 0;
  bool _isRunning = false;
  final List<String> _laps = [];

  void _start() {
    setState(() => _isRunning = true);
    _timer = Timer.periodic(const Duration(milliseconds: 10), (timer) {
      setState(() => _milliseconds += 10);
    });
  }

  void _stop() {
    _timer?.cancel();
    setState(() => _isRunning = false);
  }

  void _reset() {
    _timer?.cancel();
    setState(() {
      _milliseconds = 0;
      _isRunning = false;
      _laps.clear();
    });
  }

  void _lap() {
    setState(() {
      _laps.add(_formatTime(_milliseconds));
    });
  }

  String _formatTime(int ms) {
    final hours = (ms ~/ 3600000).toString().padLeft(2, '0');
    final minutes = ((ms % 3600000) ~/ 60000).toString().padLeft(2, '0');
    final seconds = ((ms % 60000) ~/ 1000).toString().padLeft(2, '0');
    final centiseconds = ((ms % 1000) ~/ 10).toString().padLeft(2, '0');
    return '$hours:$minutes:$seconds.$centiseconds';
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('秒表计时'),
        centerTitle: true,
        backgroundColor: Colors.cyan,
        foregroundColor: Colors.white,
      },
      body: Column(
        children: [
          Expanded(
            child: Center(
              child: Text(
                _formatTime(_milliseconds),
                style: const TextStyle(fontSize: 48, fontWeight: FontWeight.bold, color: Colors.cyan),
              ),
            ),
          ),
          if (_laps.isNotEmpty)
            SizedBox(
              height: 150,
              child: ListView.builder(
                itemCount: _laps.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    leading: Text('#${index + 1}'),
                    title: Text(_laps[index]),
                  );
                },
              ),
            ),
          Padding(
            padding: const EdgeInsets.all(24),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                ElevatedButton(
                  onPressed: _reset,
                  style: ElevatedButton.styleFrom(backgroundColor: Colors.grey, foregroundColor: Colors.white),
                  child: const Text('重置'),
                ),
                ElevatedButton(
                  onPressed: _isRunning ? _stop : _start,
                  style: ElevatedButton.styleFrom(
                    backgroundColor: _isRunning ? Colors.red : Colors.green,
                    foregroundColor: Colors.white,
                  ),
                  child: Text(_isRunning ? '停止' : '开始'),
                ),
                if (_isRunning)
                  ElevatedButton(
                    onPressed: _lap,
                    style: ElevatedButton.styleFrom(backgroundColor: Colors.cyan, foregroundColor: Colors.white),
                    child: const Text('计次'),
                  ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

5.2 核心功能解析

精确计时

使用Timer.periodic每10毫秒更新一次计数，实现百分秒精度。

时间格式化

_formatTime方法将毫秒转换为 HH:MM:SS.CC 格式。

计次功能

_lap方法记录当前时间到计次列表。

六、实际应用场景

6.1 体育运动

记录跑步、游泳等运动成绩。

6.2 科学实验

精确记录实验时间。

6.3 烹饪计时

记录烹饪时间。

七、优化建议

7.1 暂停功能

添加暂停后继续计时功能。

7.2 数据保存

保存计次记录到本地存储。

7.3 多秒表

支持同时运行多个秒表。

八、常见问题与解决方案

8.1 计时不准确

使用Stopwatch类替代Timer获得更高精度。

8.2 后台运行

应用进入后台时计时器可能暂停，需要处理生命周期。

8.3 内存泄漏

确保在dispose中取消Timer。

九、总结

本文详细介绍了Flutter鸿蒙秒表计时功能的实现过程，包括精确计时、计次记录和控制操作。通过本实例，开发者可以掌握Flutter Timer使用、时间格式化、状态管理等关键技术点。

十、参考资料

• Flutter官方文档：https://flutter.dev
• HarmonyOS开发者文档：https://developer.harmonyos.com
• Flutter中国社区：https://flutter-io.cn