Flutter 页面切换监听

源码 · 2024-10-3 15:41:34

许多业务场景都须要监听页面切换的操纵，好比从 A 页面跳转到 B ，再从 B 返回 A 之后，须要重新革新下数据。在 Android 里通常是 Activity，iOS 里通常是 ViewController 类，这些都对应用户明确的一个页面，但是 Flutter 里并没有像我们通常明确的页面这个概念，以是初学者刚开始会挺别扭。
Flutter 是通过 Navigator 来构造页面的，有点像前端 React/Vue 里的路由。通常在一个 Flutter 应用中，只有一个 Activity/ViewController ，Flutter 出现的页面的跳转返回，都只是通过 Navigator 将 Widget 抽象成一个一个用户明确的页面而已。以是 Flutter 页面切换监听，还是须要通过对路由的监听来实现。
1. 根组件里定义 RouteObserver

起首须要在根组件 MaterialApp 里定义一个全局的 RouteObserver 对象：
///定义全局的 routeObserver 对象final RouteObserver<

ageRoute> routeObserver = RouteObserver();void main() {  runApp();}class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) { return MaterialApp(    navigatorObservers: [routeObserver],    ... );  }}2. 在页面中订阅路由事故

接着须要在页面中，通过 RouteObserver 订阅路由事故。我们看下其方法署名：
//订阅void subscribe(RouteAware routeAware, R route) //一样平常有订阅的同时，也会有解绑的函数，防止内存走漏以及举行资源开释void unsubscribe(RouteAware routeAware) RouteAware 是个什么鬼内，我们查察源码可以知道其是一个抽象类：
abstract class RouteAware {  ///下一个页面退出返回时触发  void didPopNext() { }  ///当前页面进入时触发  void didPush() { }  ///当前页面退出时触发  void didPop() { }  ///当前页面跳转到下一个页面时触发  void didPushNext() { }}可以看到，这里实在就是页面切换的监听回调了，如果我们须要实现文中开头所讲的业务场景，只须要利用 didPushNext()、didPopNext() 即可。还一个参数 R route 是个什么东西呢？RouteObserver 是个泛型范例，定了范例是 Route<dynamic>，实在就是当前页面所对应的路由对象。
终极，在页面 Widget 的 Stage 类中实现：
/// 一样平常通过 with 关键来实现，熟悉前端的大概知道 mixin 这个概念，固然你可以通过 implements 关键来实现接口class _MyPageState extends State<MyPage> with RouteAware {  //一样平常在这里举行订阅，不要试图在 initState() 函数中订阅，调用 ModalRoute.of(context) 会发生错误  @override  void didChangeDependencies() { super.didChangeDependencies(); routeObserver.subscribe(this, ModalRoute.of(context) as PageRoute);  }  @override  void dispose() { routeObserver.unsubscribe(this); super.dispose();  }  void didPopNext() { }  ///当前页面进入时触发  void didPush() { }  void didPop() { }  void didPushNext() { }}

Flutter 页面切换监听

所属分类: 问答交流

新帖推荐: 30日

推荐作品