告别臃肿：手把手教你打造极简手机全能计时工具

字数: (8713)

阅读: (5242)

2026-04-18 11:14:04

内容摘要：告别臃肿：手把手教你打造极简手机全能计时工具,

现在的手机计时APP，功能越来越多，体积也越来越大。各种花哨的皮肤、复杂的设置，让原本简单的计时功能变得繁琐。对于只需要简单计时、倒计时、秒表等基础功能的用户来说，简直就是一种负担。本文就将带你一起打造一个极简版的手机全能计时工具，回归计时的本质。

需求分析：极简，但要实用

打造极简版时钟APP，首先要明确核心需求：

计时器： 支持多个同时运行的计时器，可以自定义名称和时间。
倒计时： 同样支持多个倒计时，到时要有提醒功能。
秒表： 简单易用的秒表功能，支持圈数记录。
界面简洁： 操作简单直观，没有冗余的功能。

技术选型：Flutter + GetX

考虑到跨平台特性和开发效率，我们选择 Flutter 作为开发框架，GetX 作为状态管理工具。Flutter 的热重载特性可以大大提高开发效率，GetX 的简单易用性可以让我们专注于业务逻辑的实现。

为什么选择 GetX？

简单易用： GetX 封装了很多常用的功能，例如路由、状态管理、依赖注入等，使用起来非常方便。
高性能： GetX 的状态管理是响应式的，只有在数据发生变化时才会更新 UI，可以有效地提高性能。
代码量少： 使用 GetX 可以减少大量的样板代码，让代码更加简洁易懂。

核心功能实现

计时器

创建 TimerController： 使用 GetX 管理计时器状态。

import 'package:get/get.dart';
import 'dart:async';

class TimerController extends GetxController {
  final time = 0.obs; // 使用 obs 创建可观察的变量
  Timer? _timer;

  void startTimer() {
    _timer = Timer.periodic(Duration(seconds: 1), (_) {
      time.value++;
    });
  }

  void stopTimer() {
    _timer?.cancel();
  }

  void resetTimer() {
    stopTimer();
    time.value = 0;
  }

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

UI 界面： 使用 Obx 组件监听 time 的变化，并更新 UI。

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'timer_controller.dart';

class TimerView extends StatelessWidget {
  final TimerController timerController = Get.put(TimerController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('计时器')), // 简单的 AppBar
      body: Center(
        child: Obx(() => Text('Time: ${timerController.time.value} seconds')),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          timerController.startTimer();
        },
        child: Icon(Icons.play_arrow),
      ),
    );
  }
}