ElectronicAssistant/lib/widget/login_code_btn.dart

import 'dart:async';
import 'package:electronic_assistant/utils/expand.dart';
import 'package:flutter/material.dart';

/// 墨水瓶（`InkWell`）可用时使用的字体样式。
final TextStyle _availableStyle = TextStyle(
  fontSize: 14.0,
  color: "#6177F2".toColor(),
);

/// 墨水瓶（`InkWell`）不可用时使用的样式。
final TextStyle _unavailableStyle = TextStyle(
  fontSize: 14.0,
  color: "#AFAFAF".toColor(),
);

class LoginCodeBtn extends StatefulWidget {
  /// 倒计时的秒数，默认60秒。
  final int countdown;

  /// 用户点击时的回调函数。
  final Function onTapCallback;

  /// 是否可以获取验证码，默认为`false`。
  final bool available;

  const LoginCodeBtn({
    super.key,
    this.countdown = 60,
    required this.onTapCallback,
    this.available = false,
  });

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

class _LoginCodeBtnState extends State<LoginCodeBtn> {
  /// 倒计时的计时器。
  Timer? _timer;

  /// 当前倒计时的秒数。
  int? _seconds;

  /// 当前墨水瓶（`InkWell`）的字体样式。
  TextStyle inkWellStyle = _availableStyle;

  /// 当前墨水瓶（`InkWell`）的文本。
  String _verifyStr = '获取验证码';

  @override
  void initState() {
    super.initState();
    _seconds = widget.countdown;
  }

  @override
  void dispose() {
    super.dispose();
    _cancelTimer();
  }

  /// 启动倒计时的计时器。
  void _startTimer() {
    // 计时器（`Timer`）组件的定期（`periodic`）构造函数，创建一个新的重复计时器。
    _timer = Timer.periodic(const Duration(seconds: 1), (timer) {
      if (_seconds == 0) {
        _cancelTimer();
        _seconds = widget.countdown;
        inkWellStyle = _availableStyle;
        setState(() {});
        return;
      }
      if (_seconds != null) {
        _seconds = _seconds! - 1;
      }
      _verifyStr = '$_seconds' 's后重新获取';
      setState(() {});
      if (_seconds == 0) {
        _verifyStr = '重新发送';
      }
    });
  }

  /// 取消倒计时的计时器。
  void _cancelTimer() {
    // 计时器（`Timer`）组件的取消（`cancel`）方法，取消计时器。
    _timer?.cancel();
  }

  @override
  Widget build(BuildContext context) {
    // 墨水瓶（`InkWell`）组件，响应触摸的矩形区域。
    return widget.available
        ? InkWell(
            onTap: (_seconds == widget.countdown)
                ? () {
                    _startTimer();
                    inkWellStyle = _unavailableStyle;
                    _verifyStr = '$_seconds' 's后重新获取';
                    setState(() {});
                    widget.onTapCallback();
                  }
                : null,
            child: Text(
              '  $_verifyStr  ',
              style: inkWellStyle,
            ),
          )
        : InkWell(
            child: Text(
              '  获取验证码  ',
              style: _unavailableStyle,
            ),
          );
  }
}