Flutter实现mm:ss(分秒)倒计时组件


import 'dart:async'; import 'dart:developer'; import 'package:flutter/cupertino.dart'; //分:秒倒计时器 class CountDownWidget extends StatefulWidget {
//最终时间数据格式为 时间戳的字符串 final String validTime;
//字体大小 final double? textSize;
//字体颜色 final Color? textColor;
//是否倒计时结束 final ValueChanged<bool>? isFinish; //CountDownWidget(this.validTime, {this.textSize}); const CountDownWidget(this.validTime, {Key? key, this.textSize, this.textColor, this.isFinish}) : super(key: key); @override State<StatefulWidget> createState() { return _CountDownWidgetState(); } } class _CountDownWidgetState extends State<CountDownWidget> { @override Widget build(BuildContext context) { // log("_timerString 240000"); if (widget.validTime.isEmpty) { return Container(); } int endTime = int.parse(widget.validTime); //数字格式化,将 0~9 的时间转换为 00~09 DateTime now = DateTime.now(); //把后台返回的结束时间换为DateTime类型 DateTime endTimeDate = DateTime.fromMillisecondsSinceEpoch(endTime); //和当前时间相减 Duration difference = endTimeDate.difference(now); //获取运算完成的时间 int computingTime = difference.inSeconds; String computingTimeDate = constructFirstTime(computingTime); var txtArray = computingTimeDate.split(","); late String textContext = constructTime(computingTime); if (computingTime < 0) { textContext = "计时结束"; if (widget.isFinish != null) { widget.isFinish!(true); } return Text( '计时结束', style: TextStyle( fontSize: widget.textSize != null ? widget.textSize : 12.0, color: widget.textColor != null ? widget.textColor : CupertinoDynamicColor.resolve( CupertinoColors.systemRed, context)), ); } else { if (int.parse(txtArray[0]) > 0) { return Text( '59:59', style: TextStyle( fontSize: widget.textSize != null ? widget.textSize : 12.0, color: widget.textColor != null ? widget.textColor : CupertinoDynamicColor.resolve( CupertinoColors.systemRed, context)), ); } else { if (computingTime > 0) { Timer.periodic(Duration(seconds: 1), (timer) { if (computingTime > 0) { String computingTimeDate = constructTime(computingTime); textContext = computingTimeDate; setState(() {}); timer.cancel(); } else { timer.cancel(); textContext = '计时结束'; if (widget.isFinish != null) { widget.isFinish!(true); } setState(() {}); } }); } else { if (widget.isFinish != null) { widget.isFinish!(true); } return Text( '计时结束', style: TextStyle( fontSize: widget.textSize != null ? widget.textSize : 12.0, color: widget.textColor != null ? widget.textColor : CupertinoDynamicColor.resolve( CupertinoColors.systemRed, context)), ); } } return Text( textContext, style: TextStyle( fontSize: widget.textSize != null ? widget.textSize : 12.0, color: widget.textColor != null ? widget.textColor : CupertinoDynamicColor.resolve( CupertinoColors.systemRed, context)), ); } } String formatTime(int timeNum) { return timeNum < 10 ? "0" + timeNum.toString() : timeNum.toString(); } String constructFirstTime(int seconds) { int hour = seconds ~/ 3600; int minute = seconds % 3600 ~/ 60; int second = seconds % 60; return formatTime(hour) + "," + formatTime(minute) + ":" + formatTime(second); } String constructTime(int seconds) { int minute = seconds % 3600 ~/ 60; int second = seconds % 60; return formatTime(minute) + ":" + formatTime(second); } }

 Flutter实现mm:ss(分秒)倒计时组件

调用方式:

                 CountDownWidget(
                          "1632384385823",
                          textSize: 14,
                          textColor: Colors.white,
                          isFinish: (e) {
                            if (e) {
                              //计时结束
                            }
                          },
                        )

 

 

上一篇:使用elementUI时 日期时间组件获取日期时间的格式问题


下一篇:小学生四则运算