| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107 |
- import 'dart:async';
- import 'package:clean/utils/expand.dart';
- import 'package:flutter/Material.dart';
- import 'package:flutter_screenutil/flutter_screenutil.dart';
- class CountdownTimer extends StatefulWidget {
- final Duration duration;
- const CountdownTimer({super.key, required this.duration});
- @override
- State<CountdownTimer> createState() => _CountdownTimerState();
- }
- class _CountdownTimerState extends State<CountdownTimer> {
- late Timer _timer;
- late Duration _remainingTime;
- @override
- void initState() {
- super.initState();
- _remainingTime = widget.duration;
- _startTimer();
- }
- void _startTimer() {
- // 使用16毫秒的间隔来更新UI,确保毫秒的显示更流畅
- _timer = Timer.periodic(const Duration(milliseconds: 16), (timer) {
- setState(() {
- if (_remainingTime.inMilliseconds <= 0) {
- _timer.cancel();
- } else {
- _remainingTime = _remainingTime - const Duration(milliseconds: 16);
- }
- });
- });
- }
- @override
- void dispose() {
- _timer.cancel();
- super.dispose();
- }
- @override
- Widget build(BuildContext context) {
- // 计算分、秒、毫秒
- int minutes = _remainingTime.inMinutes;
- int seconds = (_remainingTime.inSeconds % 60);
- int milliseconds = (_remainingTime.inMilliseconds % 1000) ~/ 10; // 取前两位
- return Row(
- mainAxisAlignment: MainAxisAlignment.center,
- children: [
- _buildTimeBox(minutes.toString().padLeft(2, '0')),
- SizedBox(width: 10.w),
- _buildSeparator(),
- SizedBox(width: 10.w),
- _buildTimeBox(seconds.toString().padLeft(2, '0')),
- SizedBox(width: 10.w),
- _buildSeparator(),
- SizedBox(width: 10.w),
- _buildTimeBox(milliseconds.toString().padLeft(2, '0')),
- ],
- );
- }
- Widget _buildTimeBox(String value) {
- return Container(
- width: 60.w,
- height: 60.w,
- decoration: BoxDecoration(
- color: Colors.black,
- borderRadius: BorderRadius.circular(12.r),
- border: Border.all(
- color: "#343947".color,
- width: 1.w,
- ),
- ),
- child: Center(
- child: Text(
- value,
- style: TextStyle(
- color: Colors.white,
- fontSize: 32.sp,
- fontWeight: FontWeight.bold,
- ),
- ),
- ),
- );
- }
- Widget _buildSeparator() {
- return Padding(
- padding: EdgeInsets.symmetric(horizontal: 8),
- child: Text(
- ':',
- style: TextStyle(
- color: "#343947".color,
- fontSize: 32.sp,
- fontWeight: FontWeight.bold,
- ),
- ),
- );
- }
- }
|