老孟導(dǎo)讀：剛開始看到這個(gè)功能的時(shí)候一定覺(jué)得so easy，開始的時(shí)候我也是這么覺(jué)得的，這還不簡(jiǎn)單，然而真正寫的時(shí)候才發(fā)現(xiàn)并沒(méi)有想象的那么簡(jiǎn)單。

先上圖，不上圖你們都不想看，我難啊，到Github：https://github.com/781238222/flutter-do 上給個(gè)小星星可還行，如果能fork一下，那更是感激不盡。

言歸正傳，完成驗(yàn)證碼輸入框經(jīng)歷了4個(gè)階段，雖然前3個(gè)嘗試是失敗的，但也想和大家分享下，避免大家再走彎路。

第一階段：開始的時(shí)候，我認(rèn)為直接修改TextField控件，改改外觀就可以了，所以我就直接去改TextField的屬性，研究了一遍，發(fā)現(xiàn)無(wú)法達(dá)到要求，系統(tǒng)提供的屬性無(wú)法達(dá)到我的要求。

第二階段：既然原生的TextField無(wú)法實(shí)現(xiàn)我的效果，那就重寫一個(gè)（并不是全部重寫，而是把源代碼copy出來(lái)，修改控制外觀的代碼），于是我就去copy源代碼了，可真正copy的時(shí)候發(fā)現(xiàn)TextField的關(guān)系比較復(fù)雜，并不是一個(gè)簡(jiǎn)單的StatefulWidget控件，而且需要計(jì)算字符的寬度，此方案雖然能實(shí)現(xiàn)，但想想就復(fù)雜，果斷拋棄。

第三階段：用6個(gè)TextField，每一個(gè)控制一個(gè)驗(yàn)證碼，雖然樣式及布局上很容易達(dá)到要求，但焦點(diǎn)控制問(wèn)題非常致命，此方案也pass。

第四階段：經(jīng)過(guò)上面失敗的經(jīng)歷，最后我才用如下方案：一個(gè)TextField用于輸入，而驗(yàn)證碼的顯示使用Container，驗(yàn)證碼覆蓋在TextField之上，用戶無(wú)法感知到TextField，這是目前為止我發(fā)現(xiàn)的最完美的方案。

焦點(diǎn)問(wèn)題

正常情況下，出現(xiàn)驗(yàn)證碼的頁(yè)面會(huì)彈出鍵盤，此效果很好實(shí)現(xiàn)，指需給TextField指定自動(dòng)獲取焦點(diǎn)即可，代碼如下：

TextField(
  autofocus:true,
  ...
)

如果頁(yè)面還有其他輸入框，那么就不一定要獲取焦點(diǎn)了，因此是否獲取焦點(diǎn)需要交給用戶來(lái)決定。

如果開始沒(méi)有獲取焦點(diǎn)就出現(xiàn)了一個(gè)問(wèn)題，用戶點(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();

使用

使用非常簡(jiǎn)單，如下：

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,
)

效果如下：

終極大招，如果你覺(jué)得這個(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,
)

到此這篇關(guān)于Flutter 完美的驗(yàn)證碼輸入框?qū)崿F(xiàn)的文章就介紹到這了,更多相關(guān)Flutter 驗(yàn)證碼輸入框內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論