Flutter 完美的验证码输入框
老孟导读:刚开始看到这个功能的时候一定觉得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();
使用
使用非常简单,如下:
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,
)
- 零基础学编程036:快速编写一个GUI程序
- WPF TreeView 选择事件执行两次,获取TreeView的父节点的解决方法
- 零基础学编程041:欧拉公式的几何意义
- 零基础学编程040:在Windows上安装Python库的正确姿势
- c++/c 获取cpp文件行号跟文件名
- 零基础学编程042:画函数图像
- C-SATS工程副总裁教你如何用TensorFlow分类图像 part2
- C++11 Lambda表达汇总总结
- TensorFlow开发环境搭建(Ubuntu16.04+GPU+TensorFlow源码编译)
- C++虚析构函数解析
- C-SATS工程副总裁教你如何用TensorFlow分类图像 part1
- 帝国cms文章页调用当前文章URL如何操作?
- dedecms文章页调用地址(当前文章URL)如何操作?
- 饭团开通一周,3人学会了比特币操作
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Recyclerview添加头布局和尾布局、item点击事件详解
- Android 中LayoutInflater.inflate()方法的介绍
- Android ListView实现简单列表功能
- Ubuntu16.04上安装CUDA9.0 详细教程
- Android使用LinearLayout设置边框
- Android编程实现状态保存的方法分析
- Android中TextView和ImageView实现倾斜效果
- Notification消息通知 自定义消息通知内容布局
- Android编程实现带渐变效果的圆角矩形示例
- Android仿苹果关机界面实现代码
- Android使用RecycleView实现拖拽交换item位置
- Android编程之计时器Chronometer简单示例
- Android OnFocuChangeListener焦点事件详解
- Android自定义加载圈动画效果
- Android 中ImageView的ScaleType使用方法