王俊彭,魔兽圣剑异界纵横,黑吧安全网
老孟导读：刚开始看到这个功能的时候一定觉得so easy，开始的时候我也是这么觉得的，这还不简单，然而真正写的时候才发现并没有想象的那么简单。
先上图，不上图你们都不想看，我难啊，到github： 上给个小星星可还行，如果能fork一下，那更是感激不尽。
言归正传，完成验证码输入框经历了4个阶段，虽然前3个尝试是失败的，但也想和大家分享下，避免大家再走弯路。
第一阶段：开始的时候，我认为直接修改textfield控件，改改外观就可以了，所以我就直接去改textfield的属性，研究了一遍，发现无法达到要求，系统提供的属性无法达到我的要求。
第二阶段：既然原生的textfield无法实现我的效果，那就重写一个（并不是全部重写，而是把源代码copy出来，修改控制外观的代码），于是我就去copy源代码了，可真正copy的时候发现textfield的关系比较复杂，并不是一个简单的statefulwidget控件，而且需要计算字符的宽度，此方案虽然能实现，但想想就复杂，果断抛弃。
第三阶段：用6个textfield，每一个控制一个验证码，虽然样式及布局上很容易达到要求，但焦点控制问题非常致命，此方案也pass。
第四阶段：经过上面失败的经历，最后我才用如下方案：一个textfield用于输入，而验证码的显示使用container，验证码覆盖在textfield之上，用户无法感知到textfield，这是目前为止我发现的最完美的方案。
正常情况下，出现验证码的页面会弹出键盘，此效果很好实现，指需给textfield指定自动获取焦点即可，代码如下：
textfield( autofocus:true, ... )
如果页面还有其他输入框，那么就不一定要获取焦点了，因此是否获取焦点需要交给用户来决定。
如果开始没有获取焦点就出现了一个问题，用户点击“验证码”的时候需要获取焦点，获取焦点方法如下：
我要评论gesturedetector(
ontap: () {
focusscope.of(context).requestfocus(_focusnode);
},
...
)
给整个控件的外层添加点击事件，_focusnode为textfield的focusnode。
输入完成后，通常需要关闭键盘，即textfield失去焦点，失去焦点方法如下：
_focusnode.unfocus();
使用非常简单，如下：
container( height: 45, child: verificationbox(), )
效果如下：
设置验证码的数量，比如设置4个：
verificationbox( count: 4, )
效果如下：
设置样式，包括边框的颜色、宽度、圆角：
verificationbox( bordercolor: colors.lightblue, borderwidth: 3, borderradius: 50, )
效果如下：
除了“盒子”样式，还支持下划线样式：
verificationbox( type: verificationboxitemtype.underline, )
效果如下：
设置数字的样式：
verificationbox( textstyle: textstyle(color: colors.lightblue), )
效果如下：
显示光标，设置光标样式：
verificationbox( showcursor: true, cursorwidth: 2, cursorcolor: colors.red, cursorindent: 10, cursorendindent: 10, )
效果如下：
还可以设置光标为整个边框，如下：
verificationbox( focusbordercolor: colors.lightblue, )
效果如下：
终极大招，如果你觉得这个效果不好，你可以自定义decoration：
verificationbox(
decoration: boxdecoration(
image: decorationimage(image: assetimage('images/box.png')),
),
textstyle: textstyle(color: colors.lightblue),
),
)
效果如下：
验证码输入完成后回调onsubmitted，用法如下：
verificationbox(
onsubmitted: (value){
print('$value');
},
)
输入完成后，默认键盘消失，设置为不消失，代码如下：
verificationbox( unfocus: false, )
如果你对flutter还有疑问或者技术方面的疑惑，欢迎加入flutter交流群（微信：laomengit）。
同时也欢迎关注我的flutter公众号【老孟程序员】，公众号首发flutter的相关内容。
flutter地址： 里面包含160多个组件的详细用法。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
Android studio开发小型对话机器人app(实例代码)
Android通过Java sdk的方式接入OpenCv的方法
Android 通过cmake的方式接入opencv的方法步骤
Android Studio finish()方法的使用与解决app点击“返回”(直接退出)
Android 进度条 ProgressBar的实现代码(隐藏、出现、加载进度)
网友评论