您好,登錄后才能下訂單哦!
這篇文章主要講解了Flutter如何實(shí)現(xiàn)完美的驗(yàn)證碼輸入框,內(nèi)容清晰明了,對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下,相信大家閱讀完之后會(huì)有幫助。
老孟導(dǎo)讀:剛開始看到這個(gè)功能的時(shí)候一定覺得so easy,開始的時(shí)候我也是這么覺得的,這還不簡單,然而真正寫的時(shí)候才發(fā)現(xiàn)并沒有想象的那么簡單。
言歸正傳,完成驗(yàn)證碼輸入框經(jīng)歷了4個(gè)階段,雖然前3個(gè)嘗試是失敗的,但也想和大家分享下,避免大家再走彎路。
第一階段:開始的時(shí)候,我認(rèn)為直接修改TextField控件,改改外觀就可以了,所以我就直接去改TextField的屬性,研究了一遍,發(fā)現(xiàn)無法達(dá)到要求,系統(tǒng)提供的屬性無法達(dá)到我的要求。
第二階段:既然原生的TextField無法實(shí)現(xiàn)我的效果,那就重寫一個(gè)(并不是全部重寫,而是把源代碼copy出來,修改控制外觀的代碼),于是我就去copy源代碼了,可真正copy的時(shí)候發(fā)現(xiàn)TextField的關(guān)系比較復(fù)雜,并不是一個(gè)簡單的StatefulWidget
控件,而且需要計(jì)算字符的寬度,此方案雖然能實(shí)現(xiàn),但想想就復(fù)雜,果斷拋棄。
第三階段:用6個(gè)TextField,每一個(gè)控制一個(gè)驗(yàn)證碼,雖然樣式及布局上很容易達(dá)到要求,但焦點(diǎn)控制問題非常致命,此方案也pass。
第四階段:經(jīng)過上面失敗的經(jīng)歷,最后我才用如下方案:一個(gè)TextField用于輸入,而驗(yàn)證碼的顯示使用Container
,驗(yàn)證碼覆蓋在TextField之上,用戶無法感知到TextField,這是目前為止我發(fā)現(xiàn)的最完美的方案。
焦點(diǎn)問題
正常情況下,出現(xiàn)驗(yàn)證碼的頁面會(huì)彈出鍵盤,此效果很好實(shí)現(xiàn),指需給TextField指定自動(dòng)獲取焦點(diǎn)即可,代碼如下:
TextField( autofocus:true, ... )
如果頁面還有其他輸入框,那么就不一定要獲取焦點(diǎn)了,因此是否獲取焦點(diǎn)需要交給用戶來決定。
如果開始沒有獲取焦點(diǎn)就出現(xiàn)了一個(gè)問題,用戶點(diǎn)擊“驗(yàn)證碼”的時(shí)候需要獲取焦點(diǎn),獲取焦點(diǎn)方法如下:
GestureDetector( onTap: () { FocusScope.of(context).requestFocus(_focusNode); }, ... )
給整個(gè)控件的外層添加點(diǎn)擊事件,_focusNode
為TextField的focusNode
。
輸入完成后,通常需要關(guān)閉鍵盤,即TextField失去焦點(diǎn),失去焦點(diǎn)方法如下:
_focusNode.unfocus();
使用
使用非常簡單,如下:
Container( height: 45, child: VerificationBox(), )
效果如下:
設(shè)置驗(yàn)證碼的數(shù)量,比如設(shè)置4個(gè):
VerificationBox( count: 4, )
效果如下:
設(shè)置樣式,包括邊框的顏色、寬度、圓角:
VerificationBox( borderColor: Colors.lightBlue, borderWidth: 3, borderRadius: 50, )
效果如下:
除了“盒子”樣式,還支持下劃線樣式:
VerificationBox( type: VerificationBoxItemType.underline, )
效果如下:
設(shè)置數(shù)字的樣式:
VerificationBox( textStyle: TextStyle(color: Colors.lightBlue), )
效果如下:
顯示光標(biāo),設(shè)置光標(biāo)樣式:
VerificationBox( showCursor: true, cursorWidth: 2, cursorColor: Colors.red, cursorIndent: 10, cursorEndIndent: 10, )
效果如下:
還可以設(shè)置光標(biāo)為整個(gè)邊框,如下:
VerificationBox( focusBorderColor: Colors.lightBlue, )
效果如下:
終極大招,如果你覺得這個(gè)效果不好,你可以自定義decoration
:
VerificationBox( decoration: BoxDecoration( image: DecorationImage(image: AssetImage('images/box.png')), ), textStyle: TextStyle(color: Colors.lightBlue), ), )
效果如下:
驗(yàn)證碼輸入完成后回調(diào)onSubmitted
,用法如下:
VerificationBox( onSubmitted: (value){ print('$value'); }, )
輸入完成后,默認(rèn)鍵盤消失,設(shè)置為不消失,代碼如下:
VerificationBox( unfocus: false, )
看完上述內(nèi)容,是不是對(duì)Flutter如何實(shí)現(xiàn)完美的驗(yàn)證碼輸入框有進(jìn)一步的了解,如果還想學(xué)習(xí)更多內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。