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

news2024/11/29 5:27:18

验证码: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});

  @override
  Widget 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"]);
  }

  @override
  void onInit() {
    super.onInit();
  }

  @override
  void onReady() {
    super.onReady();
    _initData();
  }

  @override
  void 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.coloradmin.cn/o/2249525.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【再谈设计模式】装配器模式 ~复杂结构构建的巧匠

一、引言 在软件开发过程中&#xff0c;创建复杂对象往往是一项具有挑战性的任务。传统的直接实例化对象的方式在面对复杂对象构建时&#xff0c;可能会导致代码的可维护性、可读性和扩展性变差。这时候&#xff0c;我们就需要一些设计模式来优雅地解决这些问题&#xff0c;装配…

牛客周赛 Round 69 C-E

C——仰望水面的歪 一、题目描述&#xff1a; 一看这个题目是不是觉得是物理问题&#xff0c;我也觉得是这样的&#xff0c;全反射我都快忘记了&#xff0c;结果发现他居然还能这样看&#xff0c;请看图片&#xff1a; 第一种情况&#xff1a;当目标点在小歪所在平面的上面得…

【C++】C++新增特性解析:Lambda表达式、包装器与绑定的应用

V可变参数模板与emplace系列 C语法相关知识点可以通过点击以下链接进行学习一起加油&#xff01;命名空间缺省参数与函数重载C相关特性类和对象-上篇类和对象-中篇类和对象-下篇日期类C/C内存管理模板初阶String使用String模拟实现Vector使用及其模拟实现List使用及其模拟实现…

狂野飙车8+(Asphalt 8+) for Mac 赛车竞速游戏 安装教程

Mac分享吧 文章目录 狂野飙车8(Asphalt 8) for Mac 赛车竞速游戏软件 效果图展示一、狂野飙车8(Asphalt 8) 赛车竞速游戏 Mac电脑版——v2.1.11️⃣&#xff1a;下载软件2️⃣&#xff1a;安装软件2.1 左侧安装包拖入右侧文件夹中&#xff0c;等待安装完成&#xff0c;运行软件…

共享售卖机语音芯片方案选型:WTN6020引领智能化交互新风尚

在共享经济蓬勃发展的今天&#xff0c;共享售卖机作为便捷购物的新形式&#xff0c;正逐步渗透到人们生活的各个角落。为了提升用户体验&#xff0c;增强设备的智能化和互动性&#xff0c;增加共享售卖机的语音功能就显得尤为重要。 共享售卖机语音方案选型&#xff1a; WTN602…

.net core MVC入门(一)

文章目录 项目地址一、环境配置1.1 安装EF core需要包1.2 配置数据库连接二、使用EF创建表2.1 整体流程梳理2.1 建表详细流程2.1.1 创建一个Category的Model2.1.2 创建Category的EF实体三、添加Category页面的视图3.1整体流程梳理3.2 添加Controller3.3 添加View 视图四、使用E…

vue修改el-table-column背景色和上下margin外边距调整行间距方法教程

在vue中需要修改el-table表格中每一行el-table-column背景色&#xff0c;还有table表格中数据太多&#xff0c;看起来臃肿&#xff0c;需要margin调整上下边距&#xff0c;直接使用margin不生效&#xff0c;是因为display使用的是table属性&#xff0c;所以我们要利用table特性…

Spring框架整合单元测试

目录 一、配置文件方式 1.导入依赖 2.编写类和方法 3.配置文件applicationContext-test.xml 4.测试类 5.运行结果 二、全注解方式 1.编写类和方法 2.配置类 3.测试类 4.运行结果 每次进行单元测试的时候&#xff0c;都需要编写创建工厂&#xff0c;加载配置文件等相关…

微信小程序按字母顺序渲染城市 功能实现详细讲解

在微信小程序功能搭建中&#xff0c;按字母渲染城市会用到多个ES6的方法&#xff0c;如reduce&#xff0c;map&#xff0c;Object.entries()&#xff0c;Object.keys() &#xff0c;需要组合熟练掌握&#xff0c;才能优雅的处理数据完成渲染。 目录 一、数据分析 二、数据处理 …

可视化建模与UML《状态图实验报告》

其实我并不是一个实验报告博主。 大家收拾收拾准备期末复习了嗷&#xff0c;差不多了&#xff0c;不想太赶可以开始准备了。 一、实验目的&#xff1a; 1、熟悉状态图的基本功能和使用方法。 2、掌握使用建模工具软件绘制状态图的方法 二、实验环境&#xff1a; window7 | 10…

单片机学习笔记 11. 外部中断

更多单片机学习笔记&#xff1a;单片机学习笔记 1. 点亮一个LED灯单片机学习笔记 2. LED灯闪烁单片机学习笔记 3. LED灯流水灯单片机学习笔记 4. 蜂鸣器滴~滴~滴~单片机学习笔记 5. 数码管静态显示单片机学习笔记 6. 数码管动态显示单片机学习笔记 7. 独立键盘单片机学习笔记 8…

Ubuntu下的Graphviz的基础使用方法

一、Graphviz介绍 graphviz是贝尔实验室开发的一个开源的工具包&#xff0c;它使用一个特定的DSL(领域特定语言):dot作为脚本语言&#xff0c;然后使用布局引擎来解析此脚本&#xff0c;并完成自动布局 1、什么是Graphviz 官网地址&#xff0c;https://www.graphviz.org/ Gr…

IDEA全局设置-解决maven加载过慢的问题

一、IDEA全局设置 注意&#xff1a;如果不是全局设置&#xff0c;仅仅针对某个项目有效&#xff1b;例在利用网上教程解决maven加载过慢的问题时&#xff0c;按步骤设置却得不到解决&#xff0c;原因就是没有在全局设置。 1.如何进行全局设置 a.在项目页面&#xff0c;点击f…

#渗透测试#红蓝攻防#HW#经验分享#溯源反制

免责声明 本教程仅为合法的教学目的而准备,严禁用于任何形式的违法犯罪活动及其他商业行为,在使用本教程前,您应确保该行为符合当地的法律法规,继续阅读即表示您需自行承担所有操作的后果,如有异议,请立即停止本文章阅 目录 一、溯源反制 1、溯源反制的重要性 2、溯源…

Level DB --- SkipList

class SkipList class SkipList 是Level DB中的重要数据结构&#xff0c;存储在memtable中的数据通过SkipList来存储和检索数据&#xff0c;它有优秀的读写性能&#xff0c;且和红黑树相比&#xff0c;更适合多线程的操作。 SkipList SkipList还是一个比较简单的数据结构&a…

YOLOv11融合PIDNet中的PagFM模块及相关改进思路

YOLOv11v10v8使用教程&#xff1a; YOLOv11入门到入土使用教程 YOLOv11改进汇总贴&#xff1a;YOLOv11及自研模型更新汇总 《PIDNet: A Real-time Semantic Segmentation Network Inspired by PID Controllers》 一、 模块介绍 论文链接&#xff1a;https://arxiv.org/pdf/2…

跨平台应用开发框架(4)-----Qt(样式篇)

目录 1.QSS 1.基本语法 2.QSS设置方式 1.指定控件样式设置 2.全局样式设置 1.样式的层叠特性 2.样式的优先级 3.从文件加载样式表 4.使用Qt Designer编辑样式 3.选择器 1.类型选择器 2.id选择器 3.并集选择器 4.子控件选择器 5.伪类选择器 4.样式属性 1.盒模型 …

uniapp定义new plus.nativeObj.View实现APP端全局弹窗

为什么要用new plus.nativeObj.View在APP端实现弹窗&#xff1f;因为uni.showModal在APP端太难看了。 AppPopupView弹窗函数参数定义 参数一:弹窗信息(所有属性可不填&#xff0c;会有默认值) 1.title:"", //标题 2.content:"", //内容 3.confirmBoxCo…

使用phpStudy小皮面板模拟后端服务器,搭建H5网站运行生产环境

一.下载安装小皮 小皮面板官网下载网址&#xff1a;小皮面板(phpstudy) - 让天下没有难配的服务器环境&#xff01; 安装说明&#xff08;特别注意&#xff09; 1. 安装路径不能包含“中文”或者“空格”&#xff0c;否则会报错&#xff08;例如错误提示&#xff1a;Cant cha…

Qwen2.5-7B大模型微调记录

Qwen2.5-7B大模型微调记录 研究需要&#xff0c;需要搞一个大模型出来&#xff0c;没有太多的时间自己训练&#xff0c;准备用现成的开源大模型&#xff0c;然后结合研究方向进行微调 前前后后折腾大半个月&#xff0c;总算做完了第一个微调的大模型&#xff0c;模型基于阿里…