Flutter:组件10、倒计时

js 复制代码
import 'dart:async';
import 'package:flutter/material.dart';

class CountdownTimer extends StatefulWidget {
  final int seconds;
  final double? fontSize;
  final Color? textColor;
  final bool showDays;
  final bool showHours;
  final bool showMinutes;
  final bool showSeconds;
  final String separator;

  const CountdownTimer({
    super.key,
    required this.seconds,
    this.fontSize,
    this.textColor,
    this.showDays = true,
    this.showHours = true,
    this.showMinutes = true,
    this.showSeconds = true,
    this.separator = " : ",
  });

  @override
  State<CountdownTimer> createState() => _CountdownTimerState();
}

class _CountdownTimerState extends State<CountdownTimer> {
  late Timer _timer;
  late int _remainingSeconds;
  bool _mounted = true;

  @override
  void initState() {
    super.initState();
    _remainingSeconds = widget.seconds;
    _startTimer();
  }

  @override
  void dispose() {
    _mounted = false;
    _timer.cancel();
    super.dispose();
  }

  void _startTimer() {
    _timer = Timer.periodic(const Duration(seconds: 1), (timer) {
      if (!_mounted) return;
      
      setState(() {
        if (_remainingSeconds > 0) {
          _remainingSeconds--;
        } else {
          _timer.cancel();
        }
      });
    });
  }

  String _formatNumber(int number) {
    return number.toString().padLeft(2, '0');
  }

  @override
  Widget build(BuildContext context) {
    final days = _remainingSeconds ~/ (24 * 3600);
    final hours = (_remainingSeconds % (24 * 3600)) ~/ 3600;
    final minutes = (_remainingSeconds % 3600) ~/ 60;
    final seconds = _remainingSeconds % 60;

    List<String> timeParts = [];

    if (widget.showDays && days > 0) {
      timeParts.add(_formatNumber(days));
    }
    if (widget.showHours) {
      timeParts.add(_formatNumber(hours));
    }
    if (widget.showMinutes) {
      timeParts.add(_formatNumber(minutes));
    }
    if (widget.showSeconds) {
      timeParts.add(_formatNumber(seconds));
    }

    return Text(
      timeParts.join(widget.separator),
      style: TextStyle(
        fontSize: widget.fontSize ?? 14,
        color: widget.textColor ?? Colors.black,
      ),
    );
  }
} 

使用方式

js 复制代码
// 基本使用
CountdownTimer(
  seconds: 3600, // 1小时
)

// 自定义样式
CountdownTimer(
  seconds: 3600,
  fontSize: 20,
  textColor: Colors.red,
)

// 只显示分秒
CountdownTimer(
  seconds: 3600,
  showDays: false,
  showHours: false,
)

// 自定义分隔符
CountdownTimer(
  seconds: 3600,
  separator: " - ",
)
相关推荐
明月看潮生12 分钟前
青少年编程与数学 02-020 C#程序设计基础 06课题、运算符和表达式
开发语言·青少年编程·c#·编程与数学
EndingCoder13 分钟前
React从基础入门到高级实战:React 核心技术 - 表单处理与验证深度指南
前端·javascript·react.js·前端框架
androidwork14 分钟前
Kotlin全栈工程师转型路径
android·开发语言·kotlin
啃火龙果的兔子3 小时前
判断手机屏幕上的横向滑动(左滑和右滑)
javascript·react.js·智能手机
不二狗3 小时前
每日算法 -【Swift 算法】实现回文数判断!
开发语言·算法·swift
csdn_aspnet4 小时前
Java 程序求圆弧段的面积(Program to find area of a Circular Segment)
java·开发语言
yuanmenglxb20044 小时前
react基础技术栈
前端·javascript·react.js
coding随想5 小时前
从SPDY到HTTP/2:网络协议的革新与未来
javascript
进击的_鹏5 小时前
【C++】红黑树的实现
开发语言·c++
一枚码农4045 小时前
使用pnpm、vite搭建Phaserjs的开发环境
javascript·游戏·vite·phaserjs