构建交互秒表：与时间赛跑，与胜利结伴！

Android

2023-12-26 14:47:18

序言

在上一篇文章中，我们通过绘制创建了一个秒表盘组件。本文将对该组件进行实际应用，使其实现一个带有开始/停止按钮和计时器功能的秒表，让用户能够轻松记录和追踪时间。

秒表组件剖析

我们的秒表组件将由以下几个部分组成：

秒表盘： 用于显示当前时间，由表盘刻度、指针和数字组成。
开始/停止按钮： 用于控制秒表的启动和停止。
计时器： 用于记录和显示经过的时间。

绘制秒表盘

秒表盘的绘制相对简单，我们可以使用Canvas对象来绘制表盘刻度、指针和数字。

void drawDial(Canvas canvas) {
  // 绘制表盘刻度
  for (var i = 0; i < 60; i++) {
    var tickLength = i % 5 == 0 ? 10.0 : 5.0;
    var angle = (i * 6.0 * pi / 180.0);
    var x = radius * cos(angle);
    var y = radius * sin(angle);
    canvas.drawLine(Offset(x, y), Offset(x, y - tickLength), paintTick);
  }

  // 绘制指针
  canvas.drawLine(Offset(0.0, 0.0), Offset(0.0, -radius), paintHand);
}

创建开始/停止按钮

开始/停止按钮可以通过RaisedButton组件创建。

RaisedButton(
  onPressed: () {
    // 处理按钮点击事件
  },
  child: Text("开始/停止"),
);

实现计时器

计时器可以通过Ticker组件实现。Ticker组件可以提供一个周期性回调，用于更新计时器的时间。

Ticker _ticker;

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

  // 创建Ticker组件
  _ticker = Ticker((Duration elapsedTime) {
    // 更新计时器的时间
  });

  // 启动Ticker组件
  _ticker.start();
}

@override
void dispose() {
  super.dispose();

  // 停止Ticker组件
  _ticker.dispose();
}

完整代码

完整的秒表代码如下：

import 'package:flutter/material.dart';
import 'dart:math' as math;

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  Ticker _ticker;
  double _elapsedTime = 0.0;

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

    // 创建Ticker组件
    _ticker = createTicker((Duration elapsedTime) {
      // 更新计时器的时间
      setState(() {
        _elapsedTime += elapsedTime.inSeconds;
      });
    });

    // 启动Ticker组件
    _ticker.start();
  }

  @override
  void dispose() {
    super.dispose();

    // 停止Ticker组件
    _ticker.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('秒表'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '${(_elapsedTime / 60).floor().toString().padLeft(2, '0')}:${(_elapsedTime % 60).floor().toString().padLeft(2, '0')}',
              style: TextStyle(fontSize: 30.0),
            ),
            SizedBox(height: 20.0),
            RaisedButton(
              onPressed: () {
                // 处理按钮点击事件
              },
              child: Text("开始/停止"),
            ),
          ],
        ),
      ),
    );
  }
}