flutter 学习笔记之封装一个textfield(倒计时获取验证码)

封装了一个简单的textfield:

  • maxLength:支持设置最大输入长度 默认长度16
  • isInputPwd:输入密码(掩码) 默认false
  • getVCode:获取验证码倒计时的输入框 countdown 倒计时秒数 默认60s
  • autoFocus:是否自动获得焦点 eg:进入搜索页面 一进页面就调起键盘
  • keyboardType: 键盘类型 eg:TextInputType.phone 只调取数字键盘
  • placeHolder:eg: 请输入账号
  • 输入内容后,支持一键删除
  • 密码输入支持显示(隐藏)

效果图如下 一个简单的登录页面:

(1)

flutter 学习笔记之封装一个textfield(倒计时获取验证码)_第1张图片

(2)

flutter 学习笔记之封装一个textfield(倒计时获取验证码)_第2张图片

(3)

flutter 学习笔记之封装一个textfield(倒计时获取验证码)_第3张图片

(4)

flutter 学习笔记之封装一个textfield(倒计时获取验证码)_第4张图片

test code:

MyTextField(

​ focusNode: _nodeName,

​ placeHolder: '请输入账号',

​ maxLength: 11,

​ keyboardType: TextInputType.phone,

​ controller: _nameController,

​ ),

 

源码链接:https://github.com/AnleSu/flutter_textfield

你可能感兴趣的:(学习笔记,UI控件封装,flutter开发)