Flutter 實現6個驗收碼輸入框

開箱即用,初始化時就喚起鍵盤,并選中第一個

import 'package:flutter/material.dart';import 'dart:async'; // 引入 Timer 類class VerificationCode extends StatefulWidget {final String phoneNumber;const VerificationCode({super.key, required this.phoneNumber});static const double horizontalPadding = 28.0;@overrideState<VerificationCode> createState() => _VerificationCode();
}class _VerificationCode extends State<VerificationCode> {// ... 你已有的變量Timer? _timer;int _start = 0; // 倒計時秒數(比如 60)bool _isCounting = false;// 倒計時邏輯void _startCountdown() {setState(() {_start = 60; // 60s 倒計時_isCounting = true;});_timer = Timer.periodic(const Duration(seconds: 1), (timer) {if (_start == 1) {timer.cancel();setState(() {_isCounting = false;});} else {setState(() {_start--;});}});}late TextEditingController _verificationController; // 驗證碼輸入控制器late FocusNode _verificationFocusNode;String _verificationCode = '';@overridevoid initState() {super.initState();_verificationController = TextEditingController();_verificationFocusNode = FocusNode();// 監聽驗證碼輸入變化_verificationController.addListener(() {setState(() {_verificationCode = _verificationController.text;});if (_verificationCode.length == 6) {_forgetPasswordPage();}});}//忘記密碼void _forgetPasswordPage() async {// 驗證成功后跳轉頁面}@overridevoid dispose() {_timer?.cancel();_verificationController.dispose();_verificationFocusNode.dispose();super.dispose();}void _handleLogin() {// TODO: 實現登錄邏輯}String _getPhoneNumberLastFourDigits() {try {if (widget.phoneNumber.isEmpty) return '已發送驗證碼';if (!RegExp(r'^1[3-9]\d{9}$').hasMatch(widget.phoneNumber)) {return '已發送驗證碼';}final length = widget.phoneNumber.length;if (length >= 4) {return '已發送驗證碼至尾號${widget.phoneNumber.substring(length - 4)}';} else {return '已發送驗證碼';}} catch (_) {return '已發送驗證碼';}}@overrideWidget build(BuildContext context) {return Scaffold(resizeToAvoidBottomInset: true,body: Stack(children: [SingleChildScrollView(child: Container(height: MediaQuery.of(context).size.height,decoration: const BoxDecoration(color: Colors.white,image: DecorationImage(image: AssetImage('assets/pageBG/backgroundLogin.png'),fit: BoxFit.cover,),),child: Column(mainAxisAlignment: MainAxisAlignment.start,children: [const SizedBox(height: 56),Padding(padding: const EdgeInsets.only(left: 15),child: SizedBox(width: double.infinity,child: Column(crossAxisAlignment: CrossAxisAlignment.start,children: [GestureDetector(onTap: () {Navigator.pop(context);},child: Image.asset('assets/images/return.png',width: 20,height: 20,),),],),),),const SizedBox(height: 35),Container(margin: const EdgeInsets.symmetric(horizontal: VerificationCode.horizontalPadding,),alignment: Alignment.centerLeft,child: const Text('請輸入驗證碼',style: TextStyle(color: Color.fromRGBO(51, 51, 51, 1),fontSize: 26,fontWeight: FontWeight.w500,),),),const SizedBox(height: 6),Container(width: double.infinity,margin: const EdgeInsets.symmetric(horizontal: VerificationCode.horizontalPadding,),child: Text(_getPhoneNumberLastFourDigits(),style: const TextStyle(color: Color.fromRGBO(102, 102, 102, 1),fontSize: 14,),),),const SizedBox(height: 42),// 驗證碼輸入框GestureDetector(// 點擊驗證碼輸入框,使鍵盤彈出onTap: () {FocusScope.of(context,).requestFocus(_verificationFocusNode);},child: Container(width: double.infinity,height: 48,margin: const EdgeInsets.symmetric(horizontal: VerificationCode.horizontalPadding,),child: Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,children: List.generate(6, (index) {final isCurrentPosition =_verificationCode.length == index;final isFilled = _verificationCode.length > index;return Container(width: 45,height: 48,decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(8),border: Border.all(color:isCurrentPosition? const Color(0xFF4D7CFE) // 當前輸入位置:高亮藍色: const Color.fromRGBO(227,227,227,1,), // 默認灰色邊框width: 1.5,),),alignment: Alignment.center,child: Text(isFilled ? _verificationCode[index] : '',style: const TextStyle(fontSize: 20,fontWeight: FontWeight.w500,color: Color(0xFF333333),),),);}),),),),// 隱藏輸入框Offstage(offstage: true,child: TextField(controller: _verificationController,focusNode: _verificationFocusNode,keyboardType: TextInputType.number,maxLength: 6,autofocus: true,decoration: const InputDecoration(counterText: '', // 隱藏 maxLength 計數器border: InputBorder.none,),),),// 忘記密碼Container(width: double.infinity,padding: EdgeInsets.only(right: _isCounting ? 20 : 28,top: 10,),child: GestureDetector(onTap:_isCounting? null: () {// 調用你發送驗證碼的接口_startCountdown();},child: Text(_isCounting ? '重新獲取(${_start}s)' : '重新獲取',style: TextStyle(color:_isCounting? Colors.grey: const Color(0xFF4D7CFE), // 藍色fontSize: 14,),textAlign: TextAlign.right,),),),// 后續功能組件(如登錄按鈕)可繼續添加],),),),],),);}
}

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/84806.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/84806.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/84806.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

如何查看服務器有幾張GPU

要查看服務器上有多少張 GPU&#xff0c;你可以使用以下幾種方法&#xff1a; 1.1 使用 nvidia-smi工具&#xff08;針對 NVIDIA GPU&#xff09;&#xff1a; 如果你的服務器上安裝了 NVIDIA GPU 驅動程序&#xff0c;那么可以使用 nvidia-smi 命令查看詳細的 GPU 信息。 n…

3099. 哈沙德數

?題目來源&#xff1a; LeetCode題目&#xff1a;3099. 哈沙德數 - 力扣&#xff08;LeetCode&#xff09; 解題思路&#xff1a; 按要求求和判斷即可。 解題代碼&#xff1a; #python3 class Solution:def sumOfTheDigitsOfHarshadNumber(self, x: int) -> int:sumDigi…

數字化回歸本質:第一性原理驅動的制造業轉型與AI+云PLM系統實踐

2014年&#xff0c;埃隆馬斯克在南加州大學商學院的畢業演講上&#xff0c;留下了一場5分鐘的精彩分享&#xff0c;他將自己對工作和人生的思考總結為五個要點&#xff0c;其中一點說到了他的決策方式&#xff1a; “也許你聽我說過&#xff0c;要從物理學的角度思考問題&…

仿DeepSeek AI問答系統完整版(帶RAG本地知識庫+聯網搜索+深度思考) +springboot+vue3

今天教大家如何設計一個企業級的 deepseek問答 一樣的系統 , 基于目前主流的技術&#xff1a;前端vue3&#xff0c;后端springboot。同時還帶來的項目的部署教程。 系統的核心功能 1. 支持本地上傳文檔知識庫&#xff0c;RAG技術。 支持的文檔有txt&#xff0c;doc&#xff0c…

27、請求處理-【源碼分析】-怎么改變默認的_method

27、請求處理-【源碼分析】-怎么改變默認的_method 要改變 Spring Boot 中默認的 _method 參數&#xff0c;可以通過以下步驟實現&#xff1a; #### 原理分析 Spring Boot 中默認的 HiddenHttpMethodFilter 用于將表單中的 _method 參數值映射為實際的 HTTP 方法&#xff08;如…

歐拉角轉為旋轉矩陣

外旋是固定坐標系&#xff0c;內旋是動態坐標系。外旋和內旋具有等價性。 固定坐標系依次繞xyz軸旋轉&#xff0c;旋轉矩陣 動態坐標系依次繞zyx軸旋轉&#xff0c;旋轉矩陣 numpy和scipy計算對比 import numpy as np from numpy import sin, cos, pi # 抑制科學計數法&#…

【AI學習筆記】Coze平臺實現生成小紅書熱門多圖筆記

背景前搖&原視頻教程&#xff1a; 最近總是在小紅書上刷到多圖組成的養生小妙招、效率提升小tips、退休奶奶療愈語錄等等這樣的圖文筆記&#xff0c;而且人物圖像一眼就是AI畫的。 當時我以為這個排版和文字是人工的&#xff0c;就讓AI保持角色一致性畫了下圖&#xff0c;…

如何選擇自動化編程平臺

從事自動化行業的工作者都知道&#xff0c;做PLC編程需要PLC編程軟件&#xff0c;做HMI可視化需要HMI編程軟件&#xff0c;做SCADA需要SCADA編程軟件&#xff0c;做DCS需要DCS軟件&#xff0c;做仿真調試需要仿真軟件。這些軟件有國外的、國內的&#xff0c;有傳統自動化廠商開…

Bug 背后的隱藏劇情

Bug 背后的隱藏劇情 flyfish 1. 「bug」&#xff1a;70多年前那只被拍進史書的飛蛾 故事原型&#xff1a;1947年哈佛實驗室的「昆蟲命案」 1947年的計算機長啥樣&#xff1f;像一間教室那么大&#xff0c;塞滿了幾萬根繼電器&#xff08;類似老式開關&#xff09;&#xff…

如何將通話記錄從Android傳輸到Android

“如何將通話記錄從 Android 轉移到 Android&#xff1f;我換了一部新的 Android 手機&#xff0c;想要將通話記錄復制到其中。”您需要將通話記錄從 Android 傳輸到 Android 是一種常見的情況&#xff0c;因為通話記錄是手機上最重要的數據之一。幸運的是&#xff0c;如果您從…

Android 云手機橫屏模式下真機鍵盤遮擋輸入框問題處理

一、背景 打開橫屏應用,點擊云機EditText輸入框,輸入框被鍵盤遮擋,如下圖&#xff1a; 未打開鍵盤狀態: 點擊第二個輸入框,鍵盤遮擋了輸入框&#xff1a; 二、解決方案&#xff08;推薦第三中方案,博主采用的也是第三種方案&#xff09; 博主這里整理了三種方案&#xff1a;…

進程IO之 進程

一、進程相關概念 1.什么是進程 程序&#xff1a;靜態的&#xff0c;編譯好的可執行文件&#xff0c;存放在磁盤中的指令和數據的集合 進程&#xff1a;動態的&#xff0c;是程序的一次執行過程&#xff0c;是獨立的可調度的任務 2.進程的特點 &#xff08;1&#xff09;對…

Condition源碼解讀(二)

本章我們繼續將Condition的最后一個方法signal方法&#xff0c;如果前面沒有看過的可以點擊LockSupport與Condition解析來看看Condition解讀的前半部分。 signal方法&#xff1a; public final void signal() {if (!AbstractQueuedLongSynchronizer.this.isHeldExclusively())…

股票收益率的計算

首先&#xff0c;需要從 Tushare.pro 注冊一個賬號并調用其API獲取股票日線數據&#xff08;具體操作請查看官網&#xff09;。 以通過調用tushare獲取股票000001(平安銀行)的股票數據為例&#xff0c;這里不設置日期&#xff0c;那么默認獲取Tushare提供的所有歷史數據。也可…

《算法筆記》13.2小節——專題擴展->樹狀數組(BIT) 問題 D: 數列-訓練套題T10T3

數列(sequence.pas/c/cpp) - 問題描述 一個簡單的數列問題&#xff1a;給定一個長度為n的數列&#xff0c;求這樣的三個元素ai, aj, ak的個數&#xff0c;滿足ai < aj > ak&#xff0c;且i < j < k。 - 輸入數據 第一行是一個整數n(n < 50000)。 第二行n個整…

C# Windows Forms應用程序-001

目錄 項目概述 主要組件及功能 類定義 控件聲明 構造函數 Dispose 方法 InitializeComponents 方法 控件配置詳解 Button 控件 (button1) TextBox 控件 (textBox1) GroupBox 控件 (groupBox1) Label 控件 (label1 至 label5) OpenFileDialog 控件 (openFileDialog1…

2025.5.28總結

今日工作&#xff1a;最近進入了項目的關鍵節點&#xff0c;要求每人每天提兩單&#xff0c;今天周三&#xff0c;下班前只提了一個單。下午開了一場需求服務驗收會&#xff0c;我演示了自己驗收的那個需求&#xff0c;然后講的不是很好。當初再構造數據時請教了一個人&#xf…

Transformer核心技術解析LCPO方法:精準控制推理長度的新突破

原創文章1FFN前饋網絡與激活函數技術解析&#xff1a;Transformer模型中的關鍵模塊2Transformer掩碼技術全解析&#xff1a;分類、原理與應用場景3【大模型技術】Attention注意力機制詳解一4Transformer模型中位置編碼&#xff08;Positional Embedding&#xff09;技術全解析(…

在 WSL 中安裝 JetBrains Toolbox:完整指南

JetBrains Toolbox 是一個非常實用的工具&#xff0c;它可以幫助開發者輕松管理 JetBrains 的各種開發工具&#xff0c;如 IntelliJ IDEA、PyCharm、WebStorm 等。通過它&#xff0c;你可以快速安裝、更新和管理這些工具&#xff0c;極大地提高了開發效率。而在 WSL 環境中安裝…

ZooKeeper 命令操作

文章目錄 Zookeeper 數據模型Zookeeper 服務端常用命令Zookeeper 客戶端常用命令 Zookeeper 數據模型 ZooKeeper 是一個樹形目錄服務,其數據模型和Unix的文件系統目錄樹很類似&#xff0c;擁有一個層次化結構。這里面的每一個節點都被稱為&#xff1a; ZNode&#xff0c;每個節…