Flutter布局锦囊---验证码倒计时

设计给的效果如下：

拿到设计后，先把整体拆分成几个部分：

“获取验证码按钮”，可以通过点击按钮来获取验证码。

然后就可以开始进行编码了。

第1步：绘制组件树

第2步：实现“获取验证码按钮”

获取验证码的按钮需要显示在文本字段的上面，所以你可以直接使用Flutter的墨水瓶（InkWell）组件，一个可以响应触摸的矩形区域。然后通过dart:async库的计时器（Timer）类，使其控制墨水瓶（InkWell）组件的状态。

import 'dart:async';
import 'package:flutter/material.dart';/// 墨水瓶（`InkWell`）可用时使用的字体样式。
final TextStyle _availableStyle = TextStyle(fontSize: 16.0,color: const Color(0xFF00CACE),
);/// 墨水瓶（`InkWell`）不可用时使用的样式。
final TextStyle _unavailableStyle = TextStyle(fontSize: 16.0,color: const Color(0xFFCCCCCC),
);class LoginFormCode extends StatefulWidget {/// 倒计时的秒数，默认60秒。final int countdown;/// 用户点击时的回调函数。final Function onTapCallback;/// 是否可以获取验证码，默认为`false`。final bool available;LoginFormCode({this.countdown: 60,this.onTapCallback,this.available: false,});@override_LoginFormCodeState createState() => _LoginFormCodeState();
}class _LoginFormCodeState extends State<LoginFormCode> {/// 倒计时的计时器。Timer _timer;/// 当前倒计时的秒数。int _seconds;/// 当前墨水瓶（`InkWell`）的字体样式。TextStyle inkWellStyle = _availableStyle;/// 当前墨水瓶（`InkWell`）的文本。String _verifyStr = '获取验证码';@overridevoid initState() {super.initState();_seconds = widget.countdown;}/// 启动倒计时的计时器。void _startTimer() {// 计时器（`Timer`）组件的定期（`periodic`）构造函数，创建一个新的重复计时器。_timer = Timer.periodic(Duration(seconds: 1),(timer) {if (_seconds == 0) {_cancelTimer();_seconds = widget.countdown;inkWellStyle = _availableStyle;setState(() {});return;}_seconds--;_verifyStr = '已发送$_seconds'+'s';setState(() {});if (_seconds == 0) {_verifyStr = '重新发送';}});}/// 取消倒计时的计时器。void _cancelTimer() {// 计时器（`Timer`）组件的取消（`cancel`）方法，取消计时器。_timer?.cancel();}@overrideWidget build(BuildContext context) {// 墨水瓶（`InkWell`）组件，响应触摸的矩形区域。return widget.available ? InkWell(child: Text('  $_verifyStr  ',style: inkWellStyle,),onTap: (_seconds == widget.countdown) ? () {_startTimer();inkWellStyle = _unavailableStyle;_verifyStr = '已发送$_seconds'+'s';setState(() {});widget.onTapCallback();} : null,): InkWell(child: Text('  获取验证码  ',style: _unavailableStyle,),);}
}

第3步：还原效果

Flutter布局锦囊---验证码倒计时相关推荐

Flutter布局锦囊---绑定手机页
设计给的效果如下: 拿到设计后,先把整体拆分成几个部分: "顶部导航栏",标题+取消按钮+跳过按钮的应用栏. "手机号输入框",用于获取手机号码的圆角边框输入字 ...
Flutter布局锦囊---蜡笔画的表单
设计给的效果如下: 拿到设计后,先把整体拆分成几个部分: "手机号输入框",使用自定义的登录表单字段组件实现的输入框. "验证码输入框",使用自定义的登录表单验 ...
Flutter布局锦囊---手机号登录页
设计给的效果如下: 拿到设计后,先把整体拆分成几个部分: "运营位",使用自定义的旋转木马滑块组件实现可以滚动的运营位. "登录表单",使用自定义的登录表单组件 ...
Flutter布局锦囊---完善信息页
设计给的效果如下: 拿到设计后,先把整体拆分成几个部分: "用户昵称输入",获取用户输入的昵称信息. "用户头像选取",获取用户选取作为头像的图片. " ...
Flutter布局锦囊---屏幕顶部提醒
设计给的效果如下: 拿到设计后,先把整体拆分成几个部分: "提醒页面",显示在屏幕上方的文字提醒页面,不会覆盖原路由页面. "路由导航",使用Flutter的路 ...
Flutter布局锦囊---带彩条的文本字段
设计给的效果如下: 拿到设计后,先把整体拆分成几个部分: "文本输入框",使用文本字段(TextField)组件实现的输入框. "状态指示条",使用容器(Con ...
Flutter布局锦囊---涂鸦风格按钮
设计给的效果如下: 拿到设计后,先把整体拆分成几个部分: "可点击框",使用堆栈(Stack)组件布局的可点击区域. "底部矩形",用来衬托"主要矩形 ...
Flutter布局锦囊---轮播图片与滑块
设计给的效果如下: 拿到设计后,先把整体拆分成几个部分: "运营位",可以通过左右滑动来切换图片. "进度条",显示"运营位"当前位置的进度 ...
Flutter布局锦囊---圆框的表单字段
设计给的效果如下: 拿到设计后,先把整体拆分成几个部分: "黑色圆角边框",因为文本字段(TextField)组件的没有符合需求的样式,所以要自己做一个边框. "文本输入 ...

Flutter布局锦囊---验证码倒计时

第1步：绘制组件树

第2步：实现“获取验证码按钮”

第3步：还原效果

Flutter布局锦囊---验证码倒计时相关推荐

最新文章

热门文章