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,
)
交流
如果你对Flutter还有疑问或者技术方面的疑惑,欢迎加入Flutter交流群(微信:laomengit)。
同时也欢迎关注我的Flutter公众号【老孟程序员】,公众号首发Flutter的相关内容。
Flutter地址:http://laomengit.com 里面包含160多个组件的详细用法。
Flutter 完美的验证码输入框的更多相关文章
- jquery完美实现textarea输入框限制字数
<html> <head> <title> jquery完美实现textarea输入框限制字数</title> <meta http-equiv= ...
- Android View篇之自定义验证码输入框
首先,我们来看看实现的是怎么样的效果: 如果我们拿到这样的UI,想到的布局应该是用4个EditText包在横向的LinearLayout里面,但今天要讲的View,所以我们决定用一个自定义的EditT ...
- js--手动实现一个常见的短信验证码输入框
前言 本文记录一下自己手动实现的一个前端常见的短信验证码输入组件,从需求到实现逐步优化的过程. 正文 1.需求分析 首先看一下效果图. 首先页面加载的时候,输入框获取焦点,当用户输入一个数字后,焦点自 ...
- iso和Android的验证码输入框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- asp.net中的比较完美的验证码
要实现如图的效果的验证码,分以下步骤: 第一.布局好调用验证码的登录页面(命名:Login.aspx),注意:验证码位置可以是服务器控件 Image,也可以是html标签写的<img>,但 ...
- Flutter 基础组件:输入框和表单
前言 Material组件库中提供了输入框组件TextField和表单组件Form. 输入框TextField 接口描述 const TextField({ Key key, // 编辑框的控制器,通 ...
- Android自定义验证码输入框
未经允许,禁止
- C#写的较完美验证码通用类
using System; using System.Collections; using System.ComponentModel; using System.Data; using System ...
- 纯JS实现图片验证码功能并兼容IE6-8
最近要搞一个图片验证码功能,但是又不想自己写后台代码.于是自己准备搞一个纯前端的验证码功能,于是网上搜索了一下,找到一个插件gVerify.js,简单好用,实现完美.不过后面接到说要兼容IE8,想想也 ...
随机推荐
- 后台管理遇到的坑一、style中css样式怎么传入变量值
第一.给标签定义style变量 第二.在data中定义 第三.在methods中的方法中给样式赋值
- 02 layui 下载和搭建环境
Layui官方网站 官方网站:https://www.layui.com/ 下载地址:https://res.layui.com/static/download/layui/layui-v2.5.5. ...
- JS中的reduce()详解
reduce()作为一个循环使用.接收四个参数:初始值(上一次返回值),当前元素值,当前元素下标,原数组. 应用 作为累加器使用 var a=[4,5,6,7,8] //item代表一次回调的值 初 ...
- VOIP RTP RTSP 实现 Baresip 源码分析
RTP 使用 udp 进行数据传输,udp 是不能保证,数据包一定可以到达的,也不提供时序.同时还有 MTU 限制. RTCP 用来配合 RTP 提供,传输报告,会话建立和退出. 一大批参考规范 * ...
- bug的前世今生
项目上发现的产品bug,若本地有问题,那就是漏测 1.提到产品bug系统 2.需要追踪,要么是漏测,要么是改出来的问题,漏测的需要补充到测试点里 项目上发现的产品bug,若本地没问题,那就是项目上的产 ...
- 《JavaScript 模式》读书笔记(2)— 基本技巧3
这是基本技巧的最后一篇内容,这篇内容示例代码并不多.主要是概念比较多一点. 编码约定 确定并一致遵循约定比这个具体约定是什么更为重要. 一.缩进 无论是使用tab还是空格,只要是一致遵循的,是什么并不 ...
- Rational Rose 2007破解版
首先下载好软件,链接在这里 链接:https://pan.baidu.com/s/1op-W-ZX1tqefHffs3m-r0A 提取码:0jwm 这里面包含了Rational Rose 2007版的 ...
- ECNU 计算机系统 (CSAPP) 教材习题作业答案集
这里是华东师范大学计算机系统的作业答案.由于几乎每一年布置的习题都几乎相同,网上的答案又比较分散,就把自己上学期提交的作业pdf放上来了,供参考. 长这样 Download Link:http://c ...
- XSS构造剖析
参考:邱永华<XSS跨站脚本攻击剖析与防御> 一 绕过XSS-filter 1.利用<>标记注射Html/JavaScript比如:<script>alert('X ...
- Uniapp使用GoEasy实现websocket实时通讯
Uniapp作为近来最火的移动端开发技术,一套代码,可以打包成Android/iOS app和各种平台的小程序,可谓是没有最方便只有更方便. GoEasy上架DCloud Uniapp插件市场已经有一 ...