Flutter电子时间的实现（下）

根据

Flutter秒表计时器的实现（上）_teddy_Ma的博客-CSDN博客

对TimerTest进行更改

引入

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

使用main函数进入组件

void main(List<String> args) {
  runApp(MyHome());
}

class MyHome extends StatelessWidget {
  const MyHome({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(),
      home: const MyHomePage(),
    );
  }
}

更改 TimerTest 组件 

点击开始按钮，时间开始走动，点击暂停按钮，时间停止

点击继续按钮，时间继续， 点击完成计时结束

class TimerTest extends StatefulWidget {
  const TimerTest({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  State<TimerTest> createState() => _TimerTestState();
}

class _TimerTestState extends State<TimerTest> {
  late Timer _timer = _timer;
  int secondsDown = 0;
  int secondsUp = 0;
  bool _timeState = true;
  bool timeState = true;
  bool timeSuspend = true;
  String _title = '开始';
  String _titlePause = '暂停';
  String _content = DateTime.now().hour.toString() +
      ":" +
      DateTime.now().minute.toString() +
      ":" +
      DateTime.now().second.toString();
  String content = '00:00:00';

  @override
  Widget build(BuildContext context) {
    _content = constDownTime(secondsDown);
    content = constUpTime(secondsUp);

    return Scaffold(
      body: Container(
        padding: const EdgeInsets.all(15.0),
        child: SingleChildScrollView(
          scrollDirection: Axis.vertical,
          child: Column(
            children: [
              SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    MaterialButton(
                      onPressed: countUpTest,
                      child: Text(_title,
                          style: const TextStyle(color: Colors.white)),
                      color: timeState ? Colors.green : Colors.red,
                    ),
                    const SizedBox(
                      width: 10,
                    ),
                    const SizedBox(
                      width: 10,
                    ),
                    Text("时间：$_content"),
                    const SizedBox(
                      width: 10,
                    ),
                    Text("计时器：$content"),
                    const SizedBox(
                      width: 10,
                    ),
                    MaterialButton(
                        onPressed: countSuspendTest,
                        child: Text(_titlePause,
                            style: const TextStyle(
                                fontSize: 16, color: Colors.white)),
                        color: !timeSuspend ? Colors.blue : Colors.orange),
                    const SizedBox(
                      width: 10,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  //时间格式化，根据总秒数转换为对应的 hh:mm:ss 格式
  String constDownTime(int seconds) {
    int hour = secondsDown ~/ 3600;
    int minute = secondsDown % 3600 ~/ 60;
    int second = secondsDown % 60;
    return formatTime(hour) +
        ":" +
        formatTime(minute) +
        ":" +
        formatTime(second);
  }

  String constUpTime(int seconds) {
    int hour = secondsUp ~/ 3600;
    int minute = secondsUp % 3600 ~/ 60;
    int second = secondsUp % 60;
    return formatTime(hour) +
        "时" +
        formatTime(minute) +
        "分" +
        formatTime(second) +
        "秒";
  }

  //数字格式化，将 0~9 的时间转换为 00~09
  String formatTime(int timeNum) {
    return timeNum < 10 ? "0" + timeNum.toString() : timeNum.toString();
  }

  // 初始化方法
  @override
  void initState() {
    Timer(const Duration(seconds: 1), () => countDownTest());
    super.initState();

    // print('initState');
  }

  void countDownTest() {
    _timeState = !_timeState;
    if (!_timeState) {
      //获取当期时间
      var now = DateTime.now();
      // 时分秒转换
      var downHours = now
          .add(Duration(
              hours: DateTime.now().hour,
              minutes: DateTime.now().minute,
              seconds: DateTime.now().second))
          .difference(now);
      //获取总秒数
      secondsDown = downHours.inSeconds;
      startDownTimer();
    } else {
      secondsDown = 0;
      cancelTimer();
    }
  }

  void countUpTest() {
    timeState = !timeState;
    setState(() {
      if (timeState) {
        _title = '开始';
        _titlePause = '暂停';
      } else {
        _title = '完成';
      }
    });

    if (!timeState) {
      //获取当期时间
      var now = DateTime.now();
      //获取时间间隔
      var twoHours = now.difference(now);
      //获取总秒数，2 分钟为 120 秒
      secondsUp = twoHours.inSeconds;
      startUpTimer();
    } else {
      secondsUp = 0;
      cancelTimer();
    }
  }

  void countSuspendTest() {
    if (!timeState) {
      timeSuspend = !timeSuspend;
      setState(() {
        if (timeSuspend) {
          _titlePause = '暂停';
        } else {
          _titlePause = '继续';
        }
      });
      if (timeSuspend && !timeState) {
        startUpTimer();
      } else {
        cancelTimer();
      }
    }
  }

  void startDownTimer() {
    //设置 1 秒回调一次
    const period = Duration(seconds: 1);
    _timer = Timer.periodic(period, (timer) {
      //更新界面
      setState(() {
        //秒数减一，因为一秒回调一次R
        secondsDown++;
      });
    });
  }

  void startUpTimer() {
    //设置 1 秒回调一次
    const period = Duration(seconds: 1);
    _timer = Timer.periodic(period, (timer) {
      //更新界面
      setState(() {
        //秒数减一，因为一秒回调一次R
        secondsUp++;
      });
    });
  }

  void cancelTimer() {
    _timer.cancel();
  }

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