很多业务场景都需要监听页面切换的操作,比如从 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<PageRoute> 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() { }
}