count_down_timer.dart 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. import 'dart:async';
  2. import 'package:clean/utils/expand.dart';
  3. import 'package:flutter/Material.dart';
  4. import 'package:flutter_screenutil/flutter_screenutil.dart';
  5. class CountdownTimer extends StatefulWidget {
  6. final Duration duration;
  7. const CountdownTimer({super.key, required this.duration});
  8. @override
  9. State<CountdownTimer> createState() => _CountdownTimerState();
  10. }
  11. class _CountdownTimerState extends State<CountdownTimer> {
  12. late Timer _timer;
  13. late Duration _remainingTime;
  14. @override
  15. void initState() {
  16. super.initState();
  17. _remainingTime = widget.duration;
  18. _startTimer();
  19. }
  20. void _startTimer() {
  21. // 使用16毫秒的间隔来更新UI,确保毫秒的显示更流畅
  22. _timer = Timer.periodic(const Duration(milliseconds: 16), (timer) {
  23. setState(() {
  24. if (_remainingTime.inMilliseconds <= 0) {
  25. _timer.cancel();
  26. } else {
  27. _remainingTime = _remainingTime - const Duration(milliseconds: 16);
  28. }
  29. });
  30. });
  31. }
  32. @override
  33. void dispose() {
  34. _timer.cancel();
  35. super.dispose();
  36. }
  37. @override
  38. Widget build(BuildContext context) {
  39. // 计算分、秒、毫秒
  40. int minutes = _remainingTime.inMinutes;
  41. int seconds = (_remainingTime.inSeconds % 60);
  42. int milliseconds = (_remainingTime.inMilliseconds % 1000) ~/ 10; // 取前两位
  43. return Row(
  44. mainAxisAlignment: MainAxisAlignment.center,
  45. children: [
  46. _buildTimeBox(minutes.toString().padLeft(2, '0')),
  47. SizedBox(width: 10.w),
  48. _buildSeparator(),
  49. SizedBox(width: 10.w),
  50. _buildTimeBox(seconds.toString().padLeft(2, '0')),
  51. SizedBox(width: 10.w),
  52. _buildSeparator(),
  53. SizedBox(width: 10.w),
  54. _buildTimeBox(milliseconds.toString().padLeft(2, '0')),
  55. ],
  56. );
  57. }
  58. Widget _buildTimeBox(String value) {
  59. return Container(
  60. width: 60.w,
  61. height: 60.w,
  62. decoration: BoxDecoration(
  63. color: Colors.black,
  64. borderRadius: BorderRadius.circular(12.r),
  65. border: Border.all(
  66. color: "#343947".color,
  67. width: 1.w,
  68. ),
  69. ),
  70. child: Center(
  71. child: Text(
  72. value,
  73. style: TextStyle(
  74. color: Colors.white,
  75. fontSize: 32.sp,
  76. fontWeight: FontWeight.bold,
  77. ),
  78. ),
  79. ),
  80. );
  81. }
  82. Widget _buildSeparator() {
  83. return Padding(
  84. padding: EdgeInsets.symmetric(horizontal: 8),
  85. child: Text(
  86. ':',
  87. style: TextStyle(
  88. color: "#343947".color,
  89. fontSize: 32.sp,
  90. fontWeight: FontWeight.bold,
  91. ),
  92. ),
  93. );
  94. }
  95. }