【flutter for open harmony】第三方库Flutter 鸿蒙版 跑步配速计算器 实战指南（适配 1.0.0）✨

Flutter实战：跑步配速计算器

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

本文详细介绍如何在Flutter鸿蒙应用中实现跑步配速计算器功能，帮助跑者计算配速和预估完赛时间。

一、前言

跑步配速是跑者关注的重要指标，本文将带领大家使用Flutter开发一个跑步配速计算器应用。

二、效果展示

2.1 功能特性

功能	描述
配速计算	根据距离和时间计算配速
速度显示	显示平均速度
马拉松预估	预估全马/半马完赛时间
实时计算	输入即时计算结果

三、项目背景与目标

3.1 项目背景

跑者需要了解自己的配速来制定训练计划和比赛策略。

3.2 项目目标

• 实现配速计算功能
• 支持马拉松时间预估
• 提供直观的UI界面

四、技术架构设计

4.1 核心技术

• TextEditingController: 输入控制
• StatefulWidget: 状态管理
• 计算逻辑: 配速公式

4.2 实现原理

配速 = 总时间 / 距离，速度 = 距离 / 时间

五、详细实现

5.1 Flutter端实现

import 'package:flutter/material.dart';

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

  @override
  State<RunningPaceCalculatorPage> createState() => _RunningPaceCalculatorPageState();
}

class _RunningPaceCalculatorPageState extends State<RunningPaceCalculatorPage> {
  final _distanceController = TextEditingController(text: '5');
  final _hoursController = TextEditingController(text: '0');
  final _minutesController = TextEditingController(text: '30');
  final _secondsController = TextEditingController(text: '0');
  
  String _pace = '--';
  String _speed = '--';
  String _marathonTime = '--';
  String _halfMarathonTime = '--';

  void _calculate() {
    final distance = double.tryParse(_distanceController.text) ?? 0;
    final hours = int.tryParse(_hoursController.text) ?? 0;
    final minutes = int.tryParse(_minutesController.text) ?? 0;
    final seconds = int.tryParse(_secondsController.text) ?? 0;
    
    final totalSeconds = hours * 3600 + minutes * 60 + seconds;
    
    if (distance <= 0 || totalSeconds <= 0) return;
    
    final paceSeconds = totalSeconds / distance;
    final paceMin = (paceSeconds / 60).floor();
    final paceSec = (paceSeconds % 60).floor();
    
    final speed = (distance / (totalSeconds / 3600)).toStringAsFixed(2);
    
    setState(() {
      _pace = "$paceMin'$paceSec\"";
      _speed = '$speed km/h';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('跑步配速计算器'),
        centerTitle: true,
        backgroundColor: Colors.blue,
        foregroundColor: Colors.white,
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            Container(
              padding: const EdgeInsets.all(20),
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [Colors.blue.shade400, Colors.blue.shade700],
                ),
                borderRadius: BorderRadius.circular(16),
              ),
              child: Column(
                children: [
                  Text('配速', style: TextStyle(color: Colors.white70)),
                  Text(_pace, style: TextStyle(fontSize: 48, fontWeight: FontWeight.bold, color: Colors.white)),
                  Text('/公里', style: TextStyle(color: Colors.white70)),
                ],
              ),
            ),
            TextField(
              controller: _distanceController,
              keyboardType: TextInputType.number,
              decoration: InputDecoration(labelText: '距离 (公里)'),
              onChanged: (_) => _calculate(),
            ),
          ],
        ),
      ),
    );
  }
}

六、核心功能解析

6.1 配速计算

配速公式实现：

final paceSeconds = totalSeconds / distance;
final paceMin = (paceSeconds / 60).floor();
final paceSec = (paceSeconds % 60).floor();

6.2 马拉松预估

根据配速预估完赛时间：

final marathonSeconds = paceSeconds * 42.195;

七、实际应用场景

• 训练计划：制定跑步训练计划
• 比赛策略：预估比赛完赛时间
• 配速控制：控制跑步节奏

八、优化建议

1. 历史记录：保存计算历史
2. 分段配速：支持分段计算
3. 语音播报：添加语音提示

九、常见问题与解决方案

9.1 输入验证

问题：用户输入非法字符

解决方案：使用tryParse进行验证

9.2 单位转换

问题：不同单位需求

解决方案：支持公里/英里切换

十、总结

本文详细介绍了Flutter鸿蒙跑步配速计算器的实现，包括配速计算、马拉松预估等核心技术。通过本实例，掌握了输入处理和计算逻辑的实现方法。

十一、参考资料

• Flutter TextField API
• 跑步配速计算方法