Datetime 颤振-如何最佳实践制作倒计时小部件

我正在开发一个足球比赛时间表应用程序。 我想在比赛开始时加一个倒计时。

---

如何最佳实践制作格式为hh:mm:ss的倒计时小部件？

评论中的这两个小部件都会有很好的效果。也最好依靠它来指导

根据您的要求，我制作了一个倒计时计时器的小样本

首先，我试图定义我将使用哪种输入。决定以以下方式实施输入：

//Update the time in 'YYYY-MM-DD HH:MM:SS' format
final eventTime = DateTime.parse('2021-01-09 03:41:00');

这样我就可以提供我需要的确切日期和时间

然后获取当前日期和时间的差值，并将其转换为秒：

int timeDiff = eventTime.difference(DateTime.now()).inSeconds;

然后创建了一个处理计时器计时的函数：

void handleTick() {
    if (timeDiff > 0) {
      if (isActive) {
        setState(() {
          if (eventTime != DateTime.now()) {
            timeDiff = timeDiff - 1;
          } else {
            print('Times up!');
            //Do something
          }
        });
      }
    }
  }

因此，当计时器按预期工作时，我只是使用数学运算来定义剩余的天、小时、分和秒：

int days = timeDiff ~/ (24 * 60 * 60) % 24;
int hours = timeDiff ~/ (60 * 60) % 24;
int minutes = (timeDiff ~/ 60) % 60;
int seconds = timeDiff % 60;

如果您只需要

HH:MM:SS

格式，您可以随意使用并省略该部分，请检查工作代码：

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

void main() => runApp(TimerApp());

class TimerApp extends StatefulWidget {
  @override
  _TimerAppState createState() => _TimerAppState();
}

//Update the time in 'YYYY-MM-DD HH:MM:SS' format
final eventTime = DateTime.parse('2021-01-09 03:41:00');

class _TimerAppState extends State<TimerApp> {
  static const duration = const Duration(seconds: 1);

  int timeDiff = eventTime.difference(DateTime.now()).inSeconds;
  bool isActive = false;

  Timer timer;

  void handleTick() {
    if (timeDiff > 0) {
      if (isActive) {
        setState(() {
          if (eventTime != DateTime.now()) {
            timeDiff = timeDiff - 1;
          } else {
            print('Times up!');
            //Do something
          }
        });
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    if (timer == null) {
      timer = Timer.periodic(duration, (Timer t) {
        handleTick();
      });
    }

    int days = timeDiff ~/ (24 * 60 * 60) % 24;
    int hours = timeDiff ~/ (60 * 60) % 24;
    int minutes = (timeDiff ~/ 60) % 60;
    int seconds = timeDiff % 60;

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          backgroundColor: Colors.grey[700],
          title: Center(
            child: Text('Countdown Timer'),
          ),
        ),
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  LabelText(
                      label: 'DAYS', value: days.toString().padLeft(2, '0')),
                  LabelText(
                      label: 'HRS', value: hours.toString().padLeft(2, '0')),
                  LabelText(
                      label: 'MIN', value: minutes.toString().padLeft(2, '0')),
                  LabelText(
                      label: 'SEC', value: seconds.toString().padLeft(2, '0')),
                ],
              ),
              SizedBox(height: 60),
              Container(
                width: 200,
                height: 47,
                margin: EdgeInsets.only(top: 30),
                child: RaisedButton(
                  color: isActive ? Colors.grey : Colors.green,
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(25)),
                  child: Text(isActive ? 'STOP' : 'START'),
                  onPressed: () {
                    setState(() {
                      isActive = !isActive;
                    });
                  },
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

class LabelText extends StatelessWidget {
  LabelText({this.label, this.value});

  final String label;
  final String value;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 5),
      padding: EdgeInsets.all(20),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(25),
        color: Colors.grey,
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Text(
            '$value',
            style: TextStyle(
                color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold),
          ),
          Text(
            '$label',
            style: TextStyle(
              color: Colors.white70,
            ),
          ),
        ],
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
导入“dart:async”；
void main（）=>runApp（TimerApp（））；
类TimerApp扩展StatefulWidget{
@凌驾
_TimerAppState createState（）；
}
//以“YYYY-MM-DD HH:MM:SS”格式更新时间
final eventTime=DateTime.parse（'2021-01-09 03:41:00'）；
类_TimerAppState扩展状态{
静态常数持续时间=常数持续时间（秒：1）；
int-timeDiff=eventTime.difference（DateTime.now（））.unseconds；
bool isActive=false；
定时器；
void handleTick（）{
如果（时间差>0）{
如果（isActive）{
设置状态（）{
if（eventTime！=DateTime.now（））{
timeDiff=timeDiff-1；
}否则{
打印（'Times up！'）；
//做点什么
}
});
}
}
}
@凌驾
小部件构建（构建上下文）{
如果（计时器==null）{
定时器=定时器。周期（持续时间，（定时器t）{
handleTick（）；
});
}
整数天=时间差~/（24*60*60）%24；
整小时=时间差~/（60*60）%24；
int分钟=（timeDiff~/60）%60；
整数秒=时间差%60；
返回材料PP(
debugShowCheckedModeBanner:false，
家：脚手架(
背景颜色：Colors.white，
appBar:appBar(
背景颜色：颜色。灰色[700]，
标题：中心(
子项：文本（“倒计时计时器”），
),
),
正文：中(
子：列(
mainAxisSize:mainAxisSize.min，
儿童：[
划船(
mainAxisAlignment:mainAxisAlignment.center，
儿童：[
标签文本(
标签：'DAYS'，值：DAYS.toString（）.padLeft（2，'0'），
标签文本(
标签：'HRS'，值：hours.toString（）.padLeft（2，'0'），
标签文本(
标签：“MIN”，值：minutes.toString（）.padLeft（2，'0'），
标签文本(
标签：'SEC'，值：seconds.toString（）.padLeft（2，'0'），
],
),
尺寸箱（高度：60），
容器(
宽度：200，
身高：47，
页边空白：仅限边集（前30页），
孩子：升起按钮(
颜色：isActive？颜色。灰色：颜色。绿色，
形状：圆形矩形边框(
边界半径：边界半径。圆形（25）），
子项：文本（isActive？'STOP'：'START'），
已按下：（）{
设置状态（）{
isActive=！isActive；
});
},
),
)
],
),
),
),
);
}
}
类LabelText扩展了无状态小部件{
LabelText（{this.label，this.value}）；
最终字符串标签；
最终字符串值；
@凌驾
小部件构建（构建上下文）{
返回容器(
边缘：边缘组。对称（水平：5），
填充：边缘设置。全部（20），
装饰：盒子装饰(
边界半径：边界半径。圆形（25），
颜色：颜色。灰色，
),
子：列(
mainAxisSize:mainAxisSize.min，
儿童：[
正文(
“$value”，
样式：TextStyle(
颜色：Colors.white，fontSize:20，fontWeight:fontWeight.bold），
),
正文(
“$label”，
样式：TextStyle(
颜色：颜色。白色70，
),
),
],
),
);
}
}

下面是我创建的倒计时计时器的输出：

---

-这里是倒数计时策略平台计时器的示例。当屏幕关闭时，应用程序不能保证继续运行。