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

最新推荐文章于 2024-03-24 21:53:26 发布
VIP文章 最新推荐文章于 2024-03-24 21:53:26 发布
阅读量3.3k 收藏 4
点赞数 1
分类专栏： 学习笔记 flutter开发 UI控件封装 文章标签： flutter 登录 获取验证码 倒计时 textfield
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/july_sal/article/details/95080631
版权

封装了一个简单的textfield：

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

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

(1)

(2)

最低0.47元/天 解锁文章
原谅我这一生放纵不羁笑点低
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flutter 完美的验证码输入框实现
08-19
主要介绍了Flutter 完美的验证码输入框实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
flutter 发送验证码
ulddfhv的专栏
06-24 6709
Flutter发送验证码:包括限制文本框输入长度和只允许输入数字
flutter开发之验证码倒计时
华山派developer的博客
07-18 1156
源代码是参考https://www.jianshu.com/p/e941fe68694c文章的，但是再运行的时候，只有第一次点击有效，再次点击就不执行倒计时了。 上效果图 上代码，大家可以直接复制用的 //发送验证码倒计时模块 import 'dart:async'; import '../config/index.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; class
Flutter 完美的验证码输入框（2 种方法）
最新发布
2401_83704218的博客
03-24 1018
这里我希望可以帮助到大家提升进阶。Android学习PDF+架构视频+面试文档+源码笔记高级架构技术进阶脑图、Android开发面试专题资料，高级进阶架构资料这几块的内容。非常适合近期有面试和想在技术道路上继续精进的朋友。喜欢本文的话，不妨给我点个小赞、评论区留言或者转发支持一下呗~《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》点击传送门，即可免费领取！这里我希望可以帮助到大家提升进阶。Android学习PDF+架构视频+面试文档+源码笔记。
flutter TextField换行自适应的实现
08-25
主要介绍了flutter TextField换行自适应的实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Flutter倒计时/计时器的实现代码
08-26
主要介绍了Flutter倒计时/计时器的实现代码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Flutter获取验证码倒计时按钮
duolaimila的博客
06-05 3632
在Flutter中，有一个定时器类Timer，使用方法： Timer timer = new Timer(new Duration(milliseconds: 60), (){ //倒计时结束执行 }); 上面代码就是执行一个定时器，60秒后执行回调方法。但是无法获取倒计时的进度。所以我们可以创建一个周期性的Timer: Timer = countDownTimer ...
撸一个优雅的Flutter验证码Widget
fanjiarong_919的博客
10-14 776
撸一个优雅的Flutter验证码Widget 前言 Flutter自带TextField组件无法满足现在主流UI的验证码界面的要求（特别是4，6位纯数字的验证码组件），即使是在iOS下原生的实现方案也是多采用自定义UIView的方式实现。本文作者曾经尝试改进Flutter自带的TextField想实现此界面多存在如下问题。 采用1个自带的TextField，通过计算Cursor光标的位移实现，最终发现一些问题，比如在安卓和iOS下位移不统一（有可能是字体不统一影响到），特别是Cursor的高度没有暴露属
flutter 验证码输入框的简单封装
半身风雪
11-23 1665
本篇文章的记录就到这里结束了，在使用的时候，当我们输入第一个数字之后，将自动跳转到下一个，一直到最后一个数字的输入，就可以进入验证阶段了。
Flutter 组件抽取：验证码输入功能（CodeInputContainer）
zeqiao的博客
05-01 874
验证码输入框，可选需要输入的验证码个数，输入达指定个数后自动回调。
Flutter花式玩转TextField，写一个验证码输入框超简单！
weixin_34059951的博客
12-29 1837
GitHub地址：github.com/yumi0629/Fl… （写的比较急，代码还没整理好，很凌乱，emmm，果然还是元旦之后再整理吧，→_→） （本方案暂时只支持数字，不支持英文字母、中文等） 国际惯例先上效果图： 需求分析   这个验证码输入框的需求来源近日日群里有人提出了这么一个问题：像下面这种的控件该怎么写？   乍一看这就是一个TextField，但似乎又有那么点不太一样？我冷...
Flutter之Timer实现短信验证码获取60s倒计时功能的代码
01-03
2.短信验证码60s倒计时 第一种的话，根据需求我们可以知道，我们想要的效果就是3s结束做出一个动作。 factory Timer(Duration duration, void callback()) { if (Zone.current == Zone.root) { // No need to ...
Flutter 验证码倒计时Widget封装
谢栋的专栏
02-28 1855
在日常开发过程中，像倒计时这样的场景使用的还是比较多的，比如延时完成一段逻辑，或者在启动页先加载一个闪屏广告，倒计时间到之后再进入app，更常见的场景就是我们在获取手机验证码时用于友好提示用户的等待试图。本次博文我们就一起来了解下基于flutter封装一个倒计时widget的全过程
Flutter — 实现验证码倒计时功能
qq_27494201的博客
06-30 1803
效果图： import 'dart:async'; import 'package:flutter/material.dart'; import '../widget/JdText.dart'; import '../widget/JdButton.dart'; import '../services/ScreenAdapter.dart'; import 'dart:async'; //Timer定时器需要引入 import '../config/Config.dart'; import 'packa
flutter实现一个发短信倒计时60秒且关闭倒计时页面计时仍生效刷新的功能
qq_23404533的博客
12-12 919
flutter短信倒计时且关闭页面计时仍生效刷新的功能
【Flutter】五、Flutter之表单输入框——TextField
MAXLZ的博客
08-24 4838
【Flutter】五、Flutter之表单输入框——TextFieldTextField1.1 TextField构造器1.2 TextFiled属性说明1.2.1 InputDecoration属性说明1.2.2 TextInputAction1.2.3 inputFormatters的使用1.2.4 buildCounter的使用 Flutter中关于表单的相关控件有：TextField、C...
在Flutter中实现“验证码倒计时”的功能
Android 开发架构
12-11 771
/   前言   / 好久不见了，文章有一段时间没有更新了，最近一直在沉迷工作无法自拨。上周，应公司号召以及上次Google大会中Flutter宣讲的感染，计划将公司新项目采用Flutter技术实现。大概花了几天熟悉了一下Flutter基础语法和结构组成，便着手开始项目的搭建和基础模块功能开发，毕竟只有通过实战才能加快新技术的熟悉和“消化”。说到验证码功能，...
flutter的TextField如何提示验证错误
weixin_40763897的博客
08-24 5101
可以通过更新状态并传递一个新的InputDecoration对象来完成： class MyAppHome extends StatefulWidget { @override _MyAppHomeState createState() => _MyAppHomeState(); } class _MyAppHomeState extends State<MyAppHome> { String _errorText; @override Widget build(Bu
flutter 验证码倒计时
05-27
在 Flutter 中实现验证码倒计时可以通过使用计时器 Timer 来实现。以下是一个简单的示例： 1. 首先定义一个变量 `countdownTime` 表示倒计时的时间，以秒为单位。 ```dart int countdownTime = 60; ``` 2. 然后...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值