Flutter:封装发送验证码组件,注册页使用获取验证码并传递控制器和验证码类型

ops/2024/11/30 1:53:52/

验证码:view

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'index.dart';class SendcodePage extends GetView<SendcodeController> {// 接收注册页面,传进来的手机号控制器,和发送验证码的类型final TextEditingController? mobileController;final String? type;const SendcodePage({super.key,this.mobileController,this.type});@overrideWidget build(BuildContext context) {print('父组件传进来的值${mobileController!.text},${type}');return GetBuilder<SendcodeController>(// 把值传递给SendcodeController控制器init: SendcodeController(mobileController:mobileController,type:type),id: "sendcode",builder: (_) {return GestureDetector(onTap: controller.onSendCode,child: controller.isSend ? Text(controller.title,style: TextStyle(fontSize: 14,color: Colors.grey),) : Text(controller.title,style: TextStyle(fontSize: 14,color: Color(0xfff0052d9)),),);},);}
}

验证码:controller

import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter_aidishi/models/request/user_send_code.dart';
import 'package:flutter_aidishi/utils/loading.dart';
import 'package:get/get.dart';
import '../../api/user.dart';class SendcodeController extends GetxController {// 注册页手机号控制器,获取到手机号final TextEditingController? mobileController;// 发送验证码的类型final String? type;SendcodeController({this.mobileController,this.type});String title = '发送验证码';bool isSend = false;Timer? timer;int downTime = 0;void onSendCode() async{Loading.show();if(isSend) return;var isOk = await UserApi.sendCode(UserSendCodeModel(phone: mobileController!.text,type: type));if(!isOk) return;title = '${60}秒后重新发送';isSend = true;downTime = 60;Loading.success();// 启动倒计时timer = Timer.periodic(Duration(seconds: 1), (Timer timer) {if (downTime > 0) {downTime--;title = '${downTime}秒后重新发送';update(["sendcode"]);} else {timer.cancel();title = '发送验证码';isSend = false;downTime = 0;update(["sendcode"]);}});}_initData() {update(["sendcode"]);}@overridevoid onInit() {super.onInit();}@overridevoid onReady() {super.onReady();_initData();}@overridevoid onClose() {super.onClose();}
}

注册页

Container(child: TDInput(leftLabel: '验证码',backgroundColor: Color(0xffF5F5F5),hintText: '请输入验证码',controller: controller.codeController,onChanged:(value){controller.checkLoginButtonState();},needClear:false,rightBtn: Container(// 在这里把手机号控制器,验证码的类型,传递过去。child: SendcodePage(mobileController:controller.mobileController,type:'register'),),),
),

在这里插入图片描述


http://www.ppmy.cn/ops/137797.html

相关文章

家校通小程序实战教程03学生管理

目录 1 创建数据源2 搭建后台功能3 设置主列字段4 批量导入数据5 设置查询条件6 实现查询和重置总结 我们现在已经搭建了班级管理&#xff0c;并且录入了班级口令。之后就是加入班级的功能了。这里分为老师加入班级和学生家长加入班级。 如果是学生家长的话&#xff0c;在加入之…

深入浅出 Python 网络爬虫:从零开始构建你的数据采集工具

在大数据时代&#xff0c;网络爬虫作为一种数据采集技术&#xff0c;已经成为开发者和数据分析师不可或缺的工具。Python 凭借其强大的生态和简单易用的语言特点&#xff0c;在爬虫领域大放异彩。本文将带你从零开始&#xff0c;逐步构建一个 Python 网络爬虫&#xff0c;解决实…

【金猿案例展】无锡征信——百望云绿色金融数据要素+数据资产入表服务方案...

‍ 百望云数据要素案例 该数据要素项目案例由百望云投递并参与“数据猿年度金猿策划活动——2024数据要素产业年度创新服务企业榜单/奖项”评选。 大数据产业创新服务媒体 ——聚焦数据 改变商业 在数字化浪潮奔涌的时代&#xff0c;数据要素已成为驱动经济发展的关键引擎&…

Oracle 中的表 ID(OBJECT_ID)段 ID(DATA_OBJECT_ID)

在 Oracle 数据库中&#xff0c;“表”和“段”是两个截然不同的概念&#xff0c;各自承担不同的职责。本文参考《Oracle 内核技术揭秘》一书的相关内容&#xff0c;进行相关实验&#xff0c; 表与段的定义 表&#xff1a;表从逻辑上说明表的形式&#xff0c;比如表有几列&…

AWS账户是否支持区域划分?

在云计算的世界中&#xff0c;亚马逊网络服务&#xff08;AWS&#xff09;凭借其全球化的基础设施和丰富的服务选项受到许多企业和开发者的青睐。一个常见的问题是&#xff1a;AWS账户是否支持区域划分&#xff1f;为了回答这个问题&#xff0c;我们九河云一起深入了解AWS的区域…

『 Linux 』数据链路层 - MAC帧/以太网帧

文章目录 MAC帧/以太网帧局域网的通信原理 MAC帧/以太网帧 MAC帧也叫做以太网帧,通常情况下MAC帧也是一个更广义的语术,用来描述数据链路层,即OSI模型的第二层的一种数据帧格式,这种格式包括其他如WI-FI,令牌环,帧中继等数据链路层所使用的数据帧; 以太网帧是具体使用的一种MAC…

MySQL 启动失败问题分析与解决方案:`mysqld.service failed to run ‘start-pre‘ task`

目录 前言1. 问题背景2. 错误分析2.1 错误信息详解2.2 可能原因 3. 问题排查与解决方案3.1 检查 MySQL 错误日志3.2 验证 MySQL 配置文件3.3 检查文件和目录权限3.4 手动启动 MySQL 服务3.5 修复 systemd 配置文件3.6 验证依赖环境 4. 进一步优化与自动化处理结语 前言 在日常…

泷羽sec---shell作业

作业一 写计算器 使用bc命令 需要进行安装bc 代码如下&#xff1a; #!/bin/bash echo "-----------------------------------" echo "输入 f 退出" echo "可计算小数和整数" echo "用法如&#xff1a;1.12.2" echo "------…