flutter 获取验证码倒计时组件封装

send_sms_btn.dart

import 'dart:async';import 'package:flutter/material.dart';
import 'package:get/get.dart';// 发送验证码 按钮
class SendSmsBtn extends StatefulWidget {final Future<bool> Function()? onTap;const SendSmsBtn({super.key,this.onTap,});@overrideState<SendSmsBtn> createState() => _SendSmsBtnState();
}class _SendSmsBtnState extends State<SendSmsBtn> {int countdown = 60;Timer? timer;void sendRegisterMsgCode() {if (countdown == 60) {countdown--;setState(() {});timer?.cancel();timer = null;timer ??= Timer.periodic(const Duration(seconds: 1), (timer) {countdown--;if (countdown == 0) {timer.cancel();countdown = 60;}setState(() {});});}}@overridevoid dispose() {timer?.cancel();timer = null;super.dispose();}@overrideWidget build(BuildContext context) {return countdown == 60? InkWell(onTap: () async {//  AppToast.showLoading();final s = await widget.onTap?.call() ?? false;// AppToast.closeAllLoading();if (s) {sendRegisterMsgCode();}},child: Container(width: 123,height: 43,alignment: Alignment.centerRight,child: Text("发送验证码",style: TextStyle(color: Get.theme.primaryColor, fontSize: 14),),),): Container(width: 123,height: 43,alignment: Alignment.centerRight,child: Text("$countdown s重新获取",style: TextStyle(color: Get.theme.primaryColor, fontSize: 14),),);}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/601243.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Mysql底层原理六:InnoDB 数据页结构

1.行格式 1.1 Compact行格式 1.1.1 示意图 1.1.2 准备一下 1&#xff09;建表 mysql> CREATE TABLE record_format_demo (-> c1 VARCHAR(10),-> c2 VARCHAR(10) NOT NULL,-> c3 CHAR(10),-> c4 VARCHAR(10)-> ) CHARSETascii ROW_FORMATCOM…

P1123 取数游戏(dfs算法)

题目描述 一个 NM 的由非负整数构成的数字矩阵&#xff0c;你需要在其中取出若干个数字&#xff0c;使得取出的任意两个数字不相邻&#xff08;若一个数字在另外一个数字相邻 8个格子中的一个即认为这两个数字相邻&#xff09;&#xff0c;求取出数字和最大是多少。 输入格式 第…

ElementUI使用问题记录:设置路由+iconfont图标+自定义表单验证

一、关于导航怎么设置路由 1、在el-menu这个标签的属性中添加 router ,官方文档的解释是&#xff1a;启用vue-router 这种模式 2、在el-menu-item标签中的index属性直接书写路由&#xff0c;就可以实现正常vue-router了 3、在el-menu-item标签中书写路由属性&#xff1a;:route…

新一代最强开源UI自动化测试神器Playwright(Java版)(对话框处理)

&#x1f3ad;Playwright让网页对话框&#x1f310;&#x1f4ac;处理变得更加快捷&#xff01;网页对话框是在网页上出现的常见弹窗&#xff0c;包括Alert、Confirm和Prompt等。这些对话框通常需要用户输入信息或进行某些选择&#xff0c;但是在自动化测试中处理它们可能会很棘…

xhci 数据结构

xhci 数据结构 xhci 数据结构主要在手册上有详细的定义&#xff0c;本文根据手册进行归纳总结&#xff1a; 中断关注的包括&#xff1a; device contexttrb ringtrb device context设备上下文 设备上下文数据结构由xHC管理&#xff0c;用于向系统软件报告设备配置和状态信息。…

用动态IP采集数据总是掉线是为什么?该怎么解决?

动态IP可以说是做爬虫、采集数据、搜集热门商品信息中必备的代理工具&#xff0c;但在爬虫的使用中&#xff0c;总是会遇到动态IP掉线的情况&#xff0c;从而影响使用效率&#xff0c;本文将探讨动态IP代理掉线的几种常见原因&#xff0c;并提供解决方法&#xff0c;以帮助大家…

Kubernetes有状态任务

有状态任务是指执行期间需要维护一定状态或数据的任务或工作。这些任务通常需要记录并维护数据、状态、上下文或进度信息&#xff0c;并且这些信息在任务执行期间保持持久。有状态任务的解决目标是确保任务在不同的环境、节点或时间点之间维持一致的状态和标识。这种任务通常需…

电商技术揭秘十二:云计算在电商中的应用场景

相关系列文章 电商技术揭秘一&#xff1a;电商架构设计与核心技术 电商技术揭秘二&#xff1a;电商平台推荐系统的实现与优化 电商技术揭秘三&#xff1a;电商平台的支付与结算系统 电商技术揭秘四&#xff1a;电商平台的物流管理系统 电商技术揭秘五&#xff1a;电商平台…

【LeetCode笔记】巧妙写出二叉树前中后序遍历

忘记是在哪里看到的了&#xff0c;有一种画图的办法可以巧妙写出二叉树前中后序遍历。 一条根本原则&#xff1a;一根线从二叉树的根的左部不间断地画到根的右部&#xff0c;要绕整个二叉树一圈。 前序遍历&#xff0c;就让每个节点拥有一个左侧的“句柄”&#xff1b; 中序遍历…

代码随想录|Day34|动态规划03|343.整数拆分、96.不同的二叉搜索树

343.整数拆分 动规五步&#xff1a; 确定 dp[i] 含义&#xff1a;拆分数字 i&#xff0c;可以获得的最大乘积为 dp[i]。递推公式&#xff1a;dp[i] max(j * (i - j), j * dp[i - j])。i 可以被拆解为两个数&#xff08;j 和 i - j&#xff09;或者多个数&#xff08;j 和 dp[i…

苍穹外卖Day10——总结10

前期文章 文章标题地址苍穹外卖Day01——总结1https://lushimeng.blog.csdn.net/article/details/135466359苍穹外卖Day02——总结2https://lushimeng.blog.csdn.net/article/details/135484126苍穹外卖Day03——总结3https://blog.csdn.net/qq_43751200/article/details/1363…

JS 轮播图点击左右切换

点击左右按钮实现轮播图切换图片 style&#xff1a; *{margin: 0;padding: 0;margin: auto;}#img1{width: 300px;height: 300px;position: relative;}#butto1{width: 50px;height: 100px;font-size: 50px;border: none;background-color: hsla(0, 0%, 0%, 0.2);position: abs…