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

编程入门 行业动态 更新时间:2024-10-22 05:07:45

Flutter <a href=https://www.elefans.com/category/jswz/34/1770819.html style=类似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();@overridevoid didChangeDependencies() {ModalRoute.of(context)!.controller?.addStatusListener((status) {if (status == AnimationStatuspleted) {_resumeCompleterplete(true);initAsyncLoad();}});super.didChangeDependencies();}@overridevoid initState() {super.initState();Navigator.observer.add(this);}@overridevoid 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() {}@overrideWidget build(BuildContext context) {return const SizedBox();}@overridevoid 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() {}@overrideNavigatorState? get navigator => throw UnimplementedError();
}

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

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

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

更多推荐

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

本文发布于:2023-12-03 11:20:42,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1654787.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:类似   动画   Flutter   onResume

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!