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


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

    直接上代码

    1. /// @author bawomingtian
    2. /// @date 2023/10/16
    3. /// @desc 通过监听路由入场动画完成,判断路由完全进入,可以用来优化在进场动画执行过程中
    4. /// 异步请求数据刷新界面,导致进场动画卡顿的问题
    5. class AsyncState<T extends StatefulWidget> extends State<T> with RouteAwareMixin implements NavigatorObserver {
    6. Completer<bool> _resumeCompleter = Completer();
    7. @override
    8. void didChangeDependencies() {
    9. ModalRoute.of(context)!.controller?.addStatusListener((status) {
    10. if (status == AnimationStatus.completed) {
    11. _resumeCompleter.complete(true);
    12. initAsyncLoad();
    13. }
    14. });
    15. super.didChangeDependencies();
    16. }
    17. @override
    18. void initState() {
    19. super.initState();
    20. Navigator.observer.add(this);
    21. }
    22. @override
    23. void dispose() {
    24. Navigator.observer.remove(this);
    25. super.dispose();
    26. }
    27. Future asyncWaitResume(Future future) async {
    28. var value = await future;
    29. await _resumeCompleter.future;
    30. return value;
    31. }
    32. void initAsyncLoad() {}
    33. void resumeAsyncLoad() {}
    34. @override
    35. Widget build(BuildContext context) {
    36. return const SizedBox();
    37. }
    38. @override
    39. void didPush(Route route, Route? previousRoute) {
    40. if (route is ModalRoute) {
    41. route.controller?.addStatusListener((status) {
    42. if (status == AnimationStatus.dismissed) {
    43. resumeAsyncLoad();
    44. }
    45. });
    46. }
    47. super.didPush(route, previousRoute);
    48. }
    49. }
    50. mixin RouteAwareMixin {
    51. void didPop(Route route, Route? previousRoute) {}
    52. void didPush(Route route, Route? previousRoute) {}
    53. void didRemove(Route route, Route? previousRoute) {}
    54. void didReplace({Route? newRoute, Route? oldRoute}) {}
    55. void didStartUserGesture(Route route, Route? previousRoute) {}
    56. void didStopUserGesture() {}
    57. @override
    58. NavigatorState? get navigator => throw UnimplementedError();
    59. }

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

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

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

  • 相关阅读:
    排队算法的matlab仿真,带GUI界面
    构建基于 Ingress 的全链路灰度能力
    μCOS-Ⅲ中断管理,这样理解非常简单!
    【踩坑】.NET异步方法不标记async,Task<int> 返回值 return default问题
    解决flex-direction: column 之后元素宽度自动变为100%
    前端JavaScript入门到精通,javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— Web APIs(五)
    excel相同行不同列查询
    31、CSS进阶——@规则
    元宇宙初体验:探秘各元宇宙游戏看点与玩法
    redis 哨兵
  • 原文地址:https://blog.csdn.net/bawomingtian123/article/details/134027045