這篇文章主要講解了Flutter如何實現(xiàn)完美的驗證碼輸入框,內(nèi)容清晰明了,對此有興趣的小伙伴可以學(xué)習(xí)一下,相信大家閱讀完之后會有幫助。
成都創(chuàng)新互聯(lián)公司"三網(wǎng)合一"的企業(yè)建站思路。企業(yè)可建設(shè)擁有電腦版、微信版、手機(jī)版的企業(yè)網(wǎng)站。實現(xiàn)跨屏營銷,產(chǎn)品發(fā)布一步更新,電腦網(wǎng)絡(luò)+移動網(wǎng)絡(luò)一網(wǎng)打盡,滿足企業(yè)的營銷需求!成都創(chuàng)新互聯(lián)公司具備承接各種類型的成都做網(wǎng)站、網(wǎng)站制作項目的能力。經(jīng)過十年的努力的開拓,為不同行業(yè)的企事業(yè)單位提供了優(yōu)質(zhì)的服務(wù),并獲得了客戶的一致好評。
老孟導(dǎo)讀:剛開始看到這個功能的時候一定覺得so easy,開始的時候我也是這么覺得的,這還不簡單,然而真正寫的時候才發(fā)現(xiàn)并沒有想象的那么簡單。
言歸正傳,完成驗證碼輸入框經(jīng)歷了4個階段,雖然前3個嘗試是失敗的,但也想和大家分享下,避免大家再走彎路。
第一階段:開始的時候,我認(rèn)為直接修改TextField控件,改改外觀就可以了,所以我就直接去改TextField的屬性,研究了一遍,發(fā)現(xiàn)無法達(dá)到要求,系統(tǒng)提供的屬性無法達(dá)到我的要求。
第二階段:既然原生的TextField無法實現(xiàn)我的效果,那就重寫一個(并不是全部重寫,而是把源代碼copy出來,修改控制外觀的代碼),于是我就去copy源代碼了,可真正copy的時候發(fā)現(xiàn)TextField的關(guān)系比較復(fù)雜,并不是一個簡單的StatefulWidget
控件,而且需要計算字符的寬度,此方案雖然能實現(xiàn),但想想就復(fù)雜,果斷拋棄。
第三階段:用6個TextField,每一個控制一個驗證碼,雖然樣式及布局上很容易達(dá)到要求,但焦點(diǎn)控制問題非常致命,此方案也pass。
第四階段:經(jīng)過上面失敗的經(jīng)歷,最后我才用如下方案:一個TextField用于輸入,而驗證碼的顯示使用Container
,驗證碼覆蓋在TextField之上,用戶無法感知到TextField,這是目前為止我發(fā)現(xiàn)的最完美的方案。
焦點(diǎn)問題
正常情況下,出現(xiàn)驗證碼的頁面會彈出鍵盤,此效果很好實現(xiàn),指需給TextField指定自動獲取焦點(diǎn)即可,代碼如下:
TextField( autofocus:true, ... )
如果頁面還有其他輸入框,那么就不一定要獲取焦點(diǎn)了,因此是否獲取焦點(diǎn)需要交給用戶來決定。
如果開始沒有獲取焦點(diǎn)就出現(xiàn)了一個問題,用戶點(diǎn)擊“驗證碼”的時候需要獲取焦點(diǎn),獲取焦點(diǎn)方法如下:
GestureDetector( onTap: () { FocusScope.of(context).requestFocus(_focusNode); }, ... )
給整個控件的外層添加點(diǎn)擊事件,_focusNode
為TextField的focusNode
。
輸入完成后,通常需要關(guān)閉鍵盤,即TextField失去焦點(diǎn),失去焦點(diǎn)方法如下:
_focusNode.unfocus();
使用
使用非常簡單,如下:
Container( height: 45, child: VerificationBox(), )
效果如下:
設(shè)置驗證碼的數(shù)量,比如設(shè)置4個:
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)為整個邊框,如下:
VerificationBox( focusBorderColor: Colors.lightBlue, )
效果如下:
終極大招,如果你覺得這個效果不好,你可以自定義decoration
:
VerificationBox( decoration: BoxDecoration( image: DecorationImage(image: AssetImage('images/box.png')), ), textStyle: TextStyle(color: Colors.lightBlue), ), )
效果如下:
驗證碼輸入完成后回調(diào)onSubmitted
,用法如下:
VerificationBox( onSubmitted: (value){ print('$value'); }, )
輸入完成后,默認(rèn)鍵盤消失,設(shè)置為不消失,代碼如下:
VerificationBox( unfocus: false, )
看完上述內(nèi)容,是不是對Flutter如何實現(xiàn)完美的驗證碼輸入框有進(jìn)一步的了解,如果還想學(xué)習(xí)更多內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
當(dāng)前題目:Flutter如何實現(xiàn)完美的驗證碼輸入框
地址分享:http://muchs.cn/article36/ishcpg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供企業(yè)網(wǎng)站制作、靜態(tài)網(wǎng)站、移動網(wǎng)站建設(shè)、云服務(wù)器、品牌網(wǎng)站設(shè)計、ChatGPT
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)