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: " - ",
)
相关推荐
依旧阳光的老码农25 分钟前
Qt SQL 核心类说明文档
开发语言·sql·qt
Ya-Jun44 分钟前
性能优化实践:启动优化方案
android·flutter·ios·性能优化
小梦白1 小时前
RPG7.准备GAS的工作
java·开发语言
武昌库里写JAVA1 小时前
【iview】icon样式
java·开发语言·spring boot·学习·课程设计
BillKu1 小时前
Vue3取消网络请求的方法(AbortController)
前端·javascript·vue.js
-XWB-2 小时前
【Java】打印运行环境中某个类引用的jar版本路径
java·开发语言
Cuit小唐2 小时前
C++ 单例模式详解
开发语言·c++·单例模式
正在走向自律2 小时前
Python面向对象编程实战:从类定义到高级特性的进阶之旅(2/10)
开发语言·python·面向对象·python基础知识
o0向阳而生0o3 小时前
34、简述 Application,session,cookie,cache,viewState
开发语言·c#·.net
笑口常开xpr3 小时前
C 语 言 - - - 文 件 操 作
c语言·开发语言