Flutter 實(shí)現(xiàn)6個(gè)驗(yàn)收碼輸入框功能
更新時(shí)間：2025年05月30日 09:21:15 作者：Jim-zf
本文通過實(shí)例代碼給大家介紹Flutter 實(shí)現(xiàn)6個(gè)驗(yàn)收碼輸入框功能,代碼簡單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
開箱即用，初始化時(shí)就喚起鍵盤，并選中第一個(gè)
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;
@override
State<VerificationCode> createState() => _VerificationCode();
}
class _VerificationCode extends State<VerificationCode> {
// ... 你已有的變量
Timer? _timer;
int _start = 0; // 倒計(jì)時(shí)秒數(shù)（比如 60）
bool _isCounting = false;
// 倒計(jì)時(shí)邏輯
void _startCountdown() {
setState(() {
_start = 60; // 60s 倒計(jì)時(shí)
_isCounting = true;
});
_timer = Timer.periodic(const Duration(seconds: 1), (timer) {
if (_start == 1) {
timer.cancel();
setState(() {
_isCounting = false;
});
} else {
setState(() {
_start--;
});
}
});
}
late TextEditingController _verificationController; // 驗(yàn)證碼輸入控制器
late FocusNode _verificationFocusNode;
String _verificationCode = '';
@override
void initState() {
super.initState();
_verificationController = TextEditingController();
_verificationFocusNode = FocusNode();
// 監(jiān)聽驗(yàn)證碼輸入變化
_verificationController.addListener(() {
setState(() {
_verificationCode = _verificationController.text;
});
if (_verificationCode.length == 6) {
_forgetPasswordPage();
}
});
}
//忘記密碼
void _forgetPasswordPage() async {
// 驗(yàn)證成功后跳轉(zhuǎn)頁面
}
@override
void dispose() {
_timer?.cancel();
_verificationController.dispose();
_verificationFocusNode.dispose();
super.dispose();
}
void _handleLogin() {
// TODO: 實(shí)現(xiàn)登錄邏輯
}
String _getPhoneNumberLastFourDigits() {
try {
if (widget.phoneNumber.isEmpty) return '已發(fā)送驗(yàn)證碼';
if (!RegExp(r'^1[3-9]\d{9}$').hasMatch(widget.phoneNumber)) {
return '已發(fā)送驗(yàn)證碼';
}
final length = widget.phoneNumber.length;
if (length >= 4) {
return '已發(fā)送驗(yàn)證碼至尾號(hào)${widget.phoneNumber.substring(length - 4)}';
} else {
return '已發(fā)送驗(yàn)證碼';
}
} catch (_) {
return '已發(fā)送驗(yàn)證碼';
}
}
@override
Widget 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(
'請(qǐng)輸入驗(yàn)證碼',
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),
// 驗(yàn)證碼輸入框
GestureDetector(
// 點(diǎn)擊驗(yàn)證碼輸入框，使鍵盤彈出
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) // 當(dāng)前輸入位置：高亮藍(lán)色
: const Color.fromRGBO(
227,
227,
227,
1,
), // 默認(rèn)灰色邊框
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 計(jì)數(shù)器
border: InputBorder.none,
),
),
),
// 忘記密碼
Container(
width: double.infinity,
padding: EdgeInsets.only(
right: _isCounting ? 20 : 28,
top: 10,
),
child: GestureDetector(
onTap:
_isCounting
? null
: () {
// 調(diào)用你發(fā)送驗(yàn)證碼的接口
_startCountdown();
},
child: Text(
_isCounting ? '重新獲取（${_start}s）' : '重新獲取',
style: TextStyle(
color:
_isCounting
? Colors.grey
: const Color(0xFF4D7CFE), // 藍(lán)色
fontSize: 14,
),
textAlign: TextAlign.right,
),
),
),
// 后續(xù)功能組件（如登錄按鈕）可繼續(xù)添加
],
),
),
),
],
),
);
}
}到此這篇關(guān)于Flutter 實(shí)現(xiàn)6個(gè)驗(yàn)收碼輸入框的文章就介紹到這了,更多相關(guān)Flutter 驗(yàn)收碼輸入框內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
前端常見的時(shí)間轉(zhuǎn)換方法以及獲取當(dāng)前時(shí)間方法小結(jié)
在做開發(fā)時(shí)會(huì)對(duì)不同的時(shí)間格式進(jìn)行轉(zhuǎn)換,下面這篇文章主要給大家介紹了關(guān)于前端常見的時(shí)間轉(zhuǎn)換方法以及獲取當(dāng)前時(shí)間方法的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
當(dāng)談到JavaScript編程中的高級(jí)概念和技巧時(shí),閉包（Closures）是一個(gè)重要而有趣的主題,閉包是一種函數(shù)與其創(chuàng)建時(shí)的詞法環(huán)境的組合,它允許我們捕獲和保留局部變量,并在函數(shù)之外使用它們,在這篇文章中,我們將深入探討JavaScript中閉包的4種有用技巧2023-10-10
這篇文章主要分享了一段Javascript常用字符串判斷函數(shù)的代碼，基本上常見的字符串判斷都涵蓋在內(nèi)了，非常實(shí)用，小伙伴們參考下。2014-12-12
JS去掉字符串前后空格、阻止表單提交的實(shí)現(xiàn)代碼
這篇文章主要介紹了JS去掉字符串前后空格、阻止表單提交的實(shí)現(xiàn)代碼，代碼簡單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2017-06-06
關(guān)于原生js中bind函數(shù)的簡單實(shí)現(xiàn)
下面小編就為大家?guī)硪黄P(guān)于原生js中bind函數(shù)的簡單實(shí)現(xiàn)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
在JavaScript中,阻止事件的默認(rèn)行為是一個(gè)常見的需求,本文將詳細(xì)介紹如何在JavaScript中阻止事件的默認(rèn)行為,并探討不同方法的適用場(chǎng)景和兼容性,需要的朋友可以參考下2025-05-05
JavaScript生成一個(gè)不重復(fù)的ID的方法示例
這篇文章主要介紹了JavaScript生成一個(gè)不重復(fù)的ID的方法示例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
測(cè)量JavaScript函數(shù)的性能各種方式對(duì)比
這篇文章主要介紹了測(cè)量JavaScript函數(shù)的性能各種方式對(duì)比，對(duì)性能感興趣的同學(xué)，可以多實(shí)驗(yàn)一下2021-04-04
JavaScript實(shí)現(xiàn)把數(shù)字轉(zhuǎn)換成中文
這篇文章主要介紹了JavaScript實(shí)現(xiàn)把數(shù)字轉(zhuǎn)換成中文,本文直接給出實(shí)例代碼,需要的朋友可以參考下2015-06-06
詳解如何使用JavaScript中Promise類實(shí)現(xiàn)并發(fā)任務(wù)控制
在JavaScript中,Promise是一種用于管理異步操作的強(qiáng)大工具,但是,有時(shí)候需要更高級(jí)的控制,以限制同時(shí)執(zhí)行的任務(wù)數(shù)量,以避免系統(tǒng)資源超負(fù)荷,本文將深入探討JavaScript中的并發(fā)任務(wù)控制,并介紹如何創(chuàng)建一個(gè)自定義的Promise類——ConcurrentPromise2023-08-08