Flutter 类似onResume 监听,解决入场动画卡顿(2)

接着完善上一篇内容,上一篇我们是能监听到初次进入路由页面节点,往往还想监听从当前路由跳转到其他路由后,再返回到当前路由页面,上一篇内容就无法满足当前需求了,不过我们完全可以按照上一篇的原理实现这个需求。

直接上代码

/// @author bawomingtian
/// @date 2023/10/16
/// @desc 通过监听路由入场动画完成,判断路由完全进入,可以用来优化在进场动画执行过程中
/// 异步请求数据刷新界面,导致进场动画卡顿的问题
class AsyncState<T extends StatefulWidget> extends State<T> with RouteAwareMixin implements NavigatorObserver {
  Completer<bool> _resumeCompleter = Completer();

  @override
  void didChangeDependencies() {
    ModalRoute.of(context)!.controller?.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        _resumeCompleter.complete(true);
        initAsyncLoad();
      }
    });
    super.didChangeDependencies();
  }

  @override
  void initState() {
    super.initState();
    Navigator.observer.add(this);
  }

  @override
  void dispose() {
    Navigator.observer.remove(this);
    super.dispose();
  }

  Future<E> asyncWaitResume<E>(Future<E> future) async {
    var value = await future;
    await _resumeCompleter.future;
    return value;
  }

  void initAsyncLoad() {}

  void resumeAsyncLoad() {}

  @override
  Widget build(BuildContext context) {
    return const SizedBox();
  }

  @override
  void didPush(Route route, Route? previousRoute) {
    if (route is ModalRoute) {
      route.controller?.addStatusListener((status) {
        if (status == AnimationStatus.dismissed) {
          resumeAsyncLoad();
        }
      });
    }
    super.didPush(route, previousRoute);
  }

}

mixin RouteAwareMixin {
  void didPop(Route route, Route? previousRoute) {}

  void didPush(Route route, Route? previousRoute) {}

  void didRemove(Route route, Route? previousRoute) {}

  void didReplace({Route? newRoute, Route? oldRoute}) {}

  void didStartUserGesture(Route route, Route? previousRoute) {}

  void didStopUserGesture() {}

  @override
  NavigatorState? get navigator => throw UnimplementedError();
}

方法 initAsyncLoad 为第一次进入路由页面回调

方法 resumeAsyncLoad 为从其他路由返回到该路由页面回调

有了这两个方法,我们就可以异步请求一些耗时或者频繁多次调用的接口了,不用担心影响路由跳转动画

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值