Flutter学习之倒计时计时器

最新推荐文章于 2025-07-10 10:48:30 发布

Pillar~

最新推荐文章于 2025-07-10 10:48:30 发布

阅读量5.2k

点赞数

分类专栏： Flutter

Flutter 专栏收录该内容

18 篇文章

订阅专栏

本文介绍如何在Flutter中创建自定义的倒计时按钮控件，通过使用Dart语言实现计时器功能，控制按钮状态和响应，解决计时器启动后无法停止的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、自定义倒计时计时器控件：

import 'dart:async';
import 'package:flutter/material.dart';

final TextStyle _availableStyle = TextStyle(
  fontSize: 16.0,
  color: Colors.pink[300],
);

final TextStyle _unavailableStyle = TextStyle(
  fontSize: 16.0,
  color: Colors.grey[400],
);

import 'dart:async';
import 'package:flutter/material.dart';

final TextStyle _availableStyle = TextStyle(
  fontSize: 16.0,
  color: Colors.pink[300],
);

final TextStyle _unavailableStyle = TextStyle(
  fontSize: 16.0,
  color: Colors.grey[400],
);

/*
* 倒计时按钮
*/
class FormCode extends StatefulWidget {
  final int countdown; //倒计时的秒数，默认60秒
  final Function onTapCallback; //用户点击时的回调函数
  final bool available;

  FormCode(
      {this.countdown,
      this.onTapCallback,
      this.available = false}); //是否可以获取验证码，默认为"false"

  @override
  State createState() => _FormCodeState();
}

class _FormCodeState extends State<FormCode> {
  Timer _timer; //倒计时的计时器
  int _seconds; //当前倒计时的秒数
  TextStyle inkWellStyle = _availableStyle; //当前墨水瓶（"InkWell"）的字体样式
  String _verifyStr = "获取验证码"; ////当前墨水瓶（"InkWell"）的文本
  bool isClickDisable=false;//防止点击过快导致Timer出现无法停止的问题
  @override
  void initState() {
    super.initState();
    _seconds = widget.countdown;
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
  }

  //启动倒计时计时器
  void _startTimer() {
    isClickDisable=true;
    _timer = Timer.periodic(Duration(seconds: 1), (timer) {
      if (_seconds == 0) {
        _seconds = widget.countdown;
        inkWellStyle = _availableStyle;
        _verifyStr = "重新发送";
        setState(() {});
        _cancleTimer();
        return;
      }
      _seconds--;
      _verifyStr = "已发送$_seconds" + "s";
      setState(() {});
    });
  }

  //取消到倒计时的计时器
  void _cancleTimer() {
    isClickDisable=false;
    _timer?.cancel();
  }

  @override
  Widget build(BuildContext context) {
    //墨水瓶组件，响应触摸的矩形区域
    if(isClickDisable==null){
      isClickDisable=false;//防止空指针异常
    }
    return widget.available
        ? InkWell(
            child: Text(
              '$_verifyStr',
              style: inkWellStyle,
            ),
            onTap: (_seconds == widget.countdown)&&!isClickDisable
                ? () {
                     _startTimer();
                     inkWellStyle = _unavailableStyle;
                     _verifyStr = "已发送$_seconds" + "s";
                     setState(() {});
                     widget.onTapCallback();
                  }
                : null,
          )
        : InkWell(
            child: Text(
              "获取验证码",
              style: _unavailableStyle,
            ),
          );
  }
}

3、注意点：
计时器启动时间有1s延迟，点击事件在1s内连续点击多次会出现启动多个计时器问题导致计时器出现无法停止问题，所以需要控制点击事件1s内不能点击多次（或者计时器启动后不能再响应点击事件，等计时器停止后再次恢复点击事件）

来源友情链接：https://blog.youkuaiyun.com/hekaiyou/article/details/85613681（存在点击过快计时器无法停止问题）