flutter 实现页面返回不影响验证码倒计时

业务需求：

从填写手机号页面（A）push到短信验证码页面（B） 到达B页面的同时触发获取短信验证码，成功后触发倒计时 时间是60秒
如果倒计时过程中用户返回到A页面 然后很快回到B页面 此时需要验证码继续倒计时，而不是重新开始倒计时。

解决思路：

1、B返回到A页面时传给A当前倒计时的秒数seconds，并在A页面记录一下当前时间，
2、再进入B页面时，再获取此刻的当前时间和刚才返回到A时的当前时间进行时间差计算。这样算出来的时间time是从B返回到A后停留的时间，
3、然后再用从B返回到A时传给A的剩余秒数减去算出来的时间差，timeCount = seconds - time即为剩余倒计时时间，若剩余时间timeCount大于0，则传给B计算出的剩余时间timeCount，否则赋值剩余时间为60秒 timeCount = 60 传递给B 。（主流）大功告成~

上代码：

A页面关键代码

var _nowDate = DateTime.now();
...
......
...
 /*跳转到输入验证码页面*/
  _gotoVerificationCodePage() async {
    /*传递给验证码页面的参数*/
    loginParams.phone = this.phoneText;
    loginParams.platformUser = widget.platformUser;
    /*进入的时候 根据传过来的倒计时计算时间差*/
    _calculationTimeDifference();
    final result = await STLRouter.of().navigator.pushNamed(
        RouterFxchatLogin.ROUTER_INNER_VERIFICATION_CODE_PAGE,
        arguments: loginParams);

    if (result != null) {
      loginParams = LoginPrams.fromJson(result);
    }
    /*拿到验证码页面的剩余倒计时*/
    this.timeCount = loginParams.time;
    _saveNowDate();
  }

  /*进入的时候 根据传过来的倒计时计算时间差*/
  void _calculationTimeDifference() {
    if (this.timeCount != 60) {
      /*当前时间和退回时间的时间差*/
      var difference = DateTime.now().difference(_nowDate);
      /* difference.inSeconds 获取时间差的秒数 */
      /*timerTime 最终剩余时间*/
      var timerTime = this.timeCount - difference.inSeconds;
      if (timerTime > 0) {
        loginParams.time = timerTime;
      } else {
        loginParams.time = 60;
      }
    }
  }

  /*退回来的时候   记录一下当前时间*/
  void _saveNowDate() {
    _nowDate = DateTime.now();
  }

B页面关键代码

class InputVerificationCodePage extends AbstractView {
  /*获取传递过来的参数*/
  InputVerificationCodePage({this.loginParams});

  final LoginPrams loginParams;

  @override
  StlStatefulPageBaseState<StlStatefulPageBase> getState() {
    return _InputVerificationCodePage();
  }
}

  @override
  Widget buildPage(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        brightness: Brightness.light,
        elevation: 0,
        backgroundColor: Colors.transparent,
        iconTheme: IconThemeData(color: Colors.black),
        leading: BackButton(
          onPressed: () {
            /*将剩余倒计时回传给A*/
            widget.loginParams.time = this.timeCount;
            Navigator.of(context).pop(widget.loginParams.toJson());
          },
        ),
      ),
      body: _buildBody(context),
    );
  }

看不懂的可爱评论我 我给你们发详细代码

记录于2021-01-14