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

这篇具有很好参考价值的文章主要介绍了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 为从其他路由返回到该路由页面回调

有了这两个方法,我们就可以异步请求一些耗时或者频繁多次调用的接口了,不用担心影响路由跳转动画文章来源地址https://www.toymoban.com/news/detail-719742.html

到了这里,关于Flutter 类似onResume 监听,解决入场动画卡顿(2)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Flutter ValueNotifier 监听数据变化

    系统提供了 ValueNotifier 组件的实现数据监听,局部刷新: 监听数据: 更新数据:

    2024年02月16日
    浏览(25)
  • flutter 调出键盘和监听输入

    调出键盘: 监听按键: 完整代码

    2024年02月10日
    浏览(33)
  • flutter监听键盘输入做出反应

    2024年02月10日
    浏览(33)
  • Flutter对象状态动态监听Watcher

      场景:当一个表单需要在表单全部或者特定项赋值后才会让提交按钮可点击。   1.普通实现方式:   2.使用Watcher方式实现:  logcat输出: 方式1和方式2都能达到效果,但是方式1需要对每一个变量进行监听,在每一个赋值的地方得检查所有得值是否都已有了值,这样实现的

    2024年02月11日
    浏览(25)
  • Flutter 知识集锦 | 监听与通知 ChangeNotifier

    1. 数据的提供者与消费者 今天想要和大家好好聊聊 ChangeNotifier 这个东西,从名字上来看它由 change(改变) 和 Notifier(通知器) 构成。打个比方: 有三个铁粉跟我说: \\\"你发新文章的时候跟我说一声\\\"。 之后我发布文章后,分享给了他们三个人。 很明显,这是一个 发布-订阅 模式,

    2024年02月07日
    浏览(27)
  • Flutter中动画的实现

           动画三要素         控制动画的三要素:Animation、Tween、和AnmaitionController         Animation: 产生的值的序列,有CurveAnimation等子 类,, 可以将值赋值给Widget的宽高或其他属性,进而控制widget发生变化         Tween:可以定义值的变化范围,  继承自 An

    2024年03月10日
    浏览(32)
  • Flutter Flar动画实战

    在Flare动面出现之前,Flare动画大体可以分为使用AnimationController控制的基础动画以及使用Hero的转场动画,如果遇到一些复杂的场景,使用这些动画方案实现起来还是有难度的。不过,随着Flutter开始支持Flare矢量动面,Flutter的动画开发也变得越来越简单。事实上,Flare动画是一

    2024年02月14日
    浏览(28)
  • Flutter:动画

    学习参考:老孟 flutter动画 基本上开发时使用的组件都有其动画,关于动画方面的知识,一般情况很少会用到。因此这里只学习关于动画的基本知识。 Flutter中的 AnimationController 是一个用于控制动画的类。它可以控制动画的开始、停止、反转、重置等操作,并且可以设置动画

    2024年02月08日
    浏览(30)
  • Flutter 06 动画

    1、动画原理: 在任何系统的Ul框架中,动画实现的原理都是相同的,即:在一段时间内,快速地多次改变Ul外观;由于人眼会产生视觉暂留,所以最终看到的就是一个“连续”的动画,这和电影的原理是一样的。 我们将UI的一次改变称为一个动画帧,对应一次屏幕刷新,而决

    2024年02月05日
    浏览(54)
  • Flutter开发进阶之动画

    在Flutter中,动画是至关重要的一个部分,它能够为应用程序提供更加丰富和生动的用户体验,Flutter中的动画系统是UI框架的核心功能之一,也是开发者学习Flutter框架的重要部分,由于动画原理在所有程序中都是相同的,即视觉暂留,因此理解这一原理对于更好地使用Flutter的

    2024年01月21日
    浏览(30)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包