青岛广新信建设咨询公司网站,张家港高端网站制作,天津建设教育培训中心官网,视频上传网站源码刚开始看到这个功能的时候一定觉得so easy#xff0c;开始的时候我也是这么觉得的#xff0c;这还不简单#xff0c;然而真正写的时候才发现并没有想象的那么简单。
先上图#xff0c;不上图你们都不想看#xff0c;我难啊#xff0c;到Github#xff1a; https://gith…刚开始看到这个功能的时候一定觉得so easy开始的时候我也是这么觉得的这还不简单然而真正写的时候才发现并没有想象的那么简单。
先上图不上图你们都不想看我难啊到Github https://github.com/781238222/flutter-do 上给个小星星可还行如果能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(); 1.
使用 使用非常简单如下
Container( height: 45, child: VerificationBox(), ) 1. 2. 3. 4.
效果如下 设置验证码的数量比如设置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 完美的验证码输入框 https://blog.51cto.com/u_15060545/4007871
