flutter从入门到填坑

倒计时

2018-10-29  本文已影响48人  寒云暮雨

最近一直不知道在忙什么,或许忙着思考人生吧!明确一下人生方向,纠结了好久,始终没有明白以后往哪走。打算放一下对人生的思考,写点文章,总结一下最近的学习(╹▽╹),现在回过头来看这个做法有点二,async包里面的Timer更好用。
[图片上传中...(image.png-37d86d-1540784030421-0)]

import 'package:flutter/material.dart';

typedef void StopCount(bool b);
typedef void StartCountAction(BuildContext context);

class TimerWidget extends StatefulWidget {
  final int time;
  final StartCountAction startCountAction;

  TimerWidget({this.time = 10, this.startCountAction});

  @override
  State createState() {
    return new _TimerWidgetState();
  }
}

class _TimerWidgetState extends State<TimerWidget> {
  bool isPressed = false;
  Widget timer;

  void _startCount(bool b) {
    setState(() {
      isPressed = b;
    });
  }

  void _stopCount(bool b) {
    setState(() {
      isPressed = !b;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new GestureDetector(
      onTap: () {
        if (isPressed) {
          return;
        }
        timer = new TimerCount(
          time: 10,
          stopCount: _stopCount,
        );
        widget.startCountAction(context);
        _startCount(true);
      },
      child: isPressed ? timer : new Text('点击获得验证码'),
    );
  }
}

class TimerCount extends StatefulWidget {
  final int time;
  final StopCount stopCount;
  final String leftLabel;
  final String rightLabel;

  TimerCount(
      {this.time = 60,
      this.stopCount,
      this.leftLabel = '还有',
      this.rightLabel = '秒重发'});

  @override
  State createState() {
    return new _TimerCountState();
  }
}

class _TimerCountState extends State<TimerCount> {
  int _time;
  bool isPressed = false;

  @override
  void initState() {
    super.initState();
    setState(() {
      _time = widget.time;
    });
    _triggerStart();
  }

  void _count() {
    Future.delayed(const Duration(seconds: 1), _triggerStart);
  }

  void _triggerStart() {
    if (_time <= 0) {
      widget.stopCount(true);
      return;
    }
    _count();
    setState(() {
      _time -= 1;
      print(_time);
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new Text(widget.leftLabel + '$_time' + widget.rightLabel),
    );
  }
}

第一步,分析需求。点击倒计时的时候,控件上显示倒计时提示,显示倒计时时间,同时倒计时开始时可以进行一定回调。
第二步,确定应用场景。用于发送验证码。
第三部,预测bug。出现重复点击,重复显示倒计时或者读秒显示混乱。
第四部,确定整体思路。首先flutter框架里面的控件widget是分为有状态的(StatefulWidget )和无状态的(StatelessWidget),对于有状态的weidget是通过state管理,通过更新状态来更新ui。所以,我们可以用有状态的widget防止重复点击,通过更新状态来读秒,通过定义回调函数来,最终让控件可以实现发送验证码的功能。
首先顶定义一个TimerWidget ,这个控件用于控件有两个属性,time用户设置控件倒计时时长;StartCountAction 用户倒计时开始的回调,可以用于发送验证码。再定义一个TimerCount ,这个用于绘制倒计时。

文笔不好,还望见谅!
直接上代码
最后要感谢这些小伙伴们的无私分享:

上一篇 下一篇

猜你喜欢

热点阅读