Flutter如何封装倒计时按钮

在Flutter中如何实现一个可复用的倒计时按钮组件？希望点击按钮后开始倒计时，期间按钮显示剩余时间并不可点击，倒计时结束后恢复初始状态并能重新触发。最好能支持自定义倒计时时长、按钮样式以及倒计时结束后的回调处理。有没有完整的封装示例或最佳实践推荐？

2 回复

使用Timer和setState封装倒计时按钮。

  1. 定义倒计时变量和计时器。
  2. 点击按钮时启动计时器，每秒更新倒计时。
  3. 倒计时结束，恢复按钮状态并取消计时器。
  4. 在dispose中释放计时器，避免内存泄漏。

更多关于Flutter如何封装倒计时按钮的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，封装倒计时按钮可以通过Timer和StatefulWidget实现。以下是一个可复用的倒计时按钮组件：

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

class CountdownButton extends StatefulWidget {
  final int countdownSeconds;
  final VoidCallback onPressed;
  final String normalText;
  final String countingText;

  const CountdownButton({
    super.key,
    required this.countdownSeconds,
    required this.onPressed,
    this.normalText = '获取验证码',
    this.countingText = '秒后重新获取',
  });

  @override
  _CountdownButtonState createState() => _CountdownButtonState();
}

class _CountdownButtonState extends State<CountdownButton> {
  Timer? _timer;
  int _remainingSeconds = 0;
  bool _isCounting = false;

  @override
  void dispose() {
    _timer?.cancel();
    super.dispose();
  }

  void _startCountdown() {
    setState(() {
      _remainingSeconds = widget.countdownSeconds;
      _isCounting = true;
    });

    _timer = Timer.periodic(const Duration(seconds: 1), (timer) {
      setState(() {
        if (_remainingSeconds > 1) {
          _remainingSeconds--;
        } else {
          _isCounting = false;
          _timer?.cancel();
        }
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: _isCounting ? null : () {
        widget.onPressed();
        _startCountdown();
      },
      child: Text(
        _isCounting 
            ? '$_remainingSeconds${widget.countingText}'
            : widget.normalText,
      ),
    );
  }
}

使用方式：

CountdownButton(
  countdownSeconds: 60,
  onPressed: () {
    // 执行发送验证码等操作
    print('按钮被点击');
  },
  normalText: '发送验证码',
  countingText: '秒后重试',
)

功能特点：

  1. 可自定义倒计时时长
  2. 支持自定义按钮文本
  3. 倒计时期间按钮不可点击
  4. 自动管理Timer生命周期
  5. 支持在dispose时自动取消计时器

这个组件适用于验证码发送、重新获取等场景，可以直接在项目中使用或根据需求进一步扩展样式和功能。

回到顶部