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