Flutter使用RouteObserver配合RouteAware对Widget栈的监听

一、前言

Flutter中没有像Android一样有onPause()、onResume()函数，但是他提供了其它的方式对当前页面进行监听，因为Flutter中都是以Widget进行展示的，其实也是对Widget栈的监听。在Flutter中主要是用RouteObserver对实现了RouteAware接口的Widget进行监测，RouteObserver需要在MaterialApp进行初始化，而RouteAware则需要在子页面中进行监听。
在此需要注意两点:

• RouteObserver不能和RouteAware写在一个Widget里面，并且他们需要是父子关系。
• 子页面不能被MaterialApp包裹。

我们所需要对Widget的监听要用到RouteAware中的函数，RouteAware的简要api解释如下:

假如有3个页面，分别是A、B、C，跳转逻辑由A->B->C，而RouteAware使用with混淆在B中。

• didPopNext：在C页面关闭后，B页面调起该方法；
• didPush: 当由A打开B页面时，B页面调起该方法；
• didPop: 当B页面关闭时，B页面调起该方法；
• didPushNext: 当从B页面打开C页面时，该方法被调起。

二、代码演示

route_observer_util.dart

//RouteObserver工具类
import 'package:flutter/material.dart';
class RouteObserverUtil{
  static final _observerUtil = RouteObserverUtil._internal();
  final RouteObserver<PageRoute> _routeObserver = RouteObserver();
  factory RouteObserverUtil(){
    return _observerUtil;
  }

  RouteObserverUtil._internal();

  RouteObserver<PageRoute> get routeObserver => _routeObserver;

}

page1.dart

import 'package:flutter/material.dart';
import 'package:flutter_dq_app/test/page2.dart';
import 'package:flutter_dq_app/test/route_observer_util.dart';
void main() => runApp(Page1());

class Page1 extends StatefulWidget {
  @override
  _Page1State createState() => _Page1State();
}

class _Page1State extends State<Page1> {
  final RouteObserver<PageRoute> routeObserver = RouteObserver();
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      navigatorObservers: [
        RouteObserverUtil().routeObserver
      ],
      home: Scaffold(
        appBar: AppBar(
          title: Text('Material App Bar'),
        ),
        body:Builder(
          builder: (BuildContext context){
            return Center(
              child: RaisedButton(
                onPressed: (){
                  print('YM--------->点击事件');
                  Navigator.push(context, MaterialPageRoute(
                      builder: (BuildContext context){
                        return Page2();
                      }
                  ));
                },
                child: Text('页面1'),
              ),
            );
          },
        ),
      ),
    );
  }
}

page2.dart

import 'package:flutter/material.dart';
import 'package:flutter_dq_app/test/page3.dart';
import 'package:flutter_dq_app/test/route_observer_util.dart';

void main() => runApp(Page2());

class Page2 extends StatefulWidget {
  @override
  _Page2State createState() => _Page2State();
}

class _Page2State extends State<Page2> implements RouteAware{
  final RouteObserver<PageRoute> routeObserver = RouteObserverUtil().routeObserver;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Material App Bar'),
      ),
      body: Builder(
        builder: (BuildContext context){
          return Center(
            child: RaisedButton(
              onPressed: (){
                print('YM------点我');
                Navigator.push(context, MaterialPageRoute(
                    builder: (BuildContext context){
                      return Page3();
                    }
                ));
              },
              child: Text('页面2'),
            ),
          );
        },
      ),
    );
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    routeObserver.subscribe(this, ModalRoute.of(context));
  }

  @override
  void dispose() {
    super.dispose();
    routeObserver.unsubscribe(this);
  }

  @override
  void didPushNext() {
    print('YM----->didPushNext');
  }

  @override
  void didPop() {
    print('YM----->didPop');
  }

  @override
  void didPush() {
    print('YM----->didPush');
  }

  @override
  void didPopNext() {
    print('YM----->didPopNext');
  }
}

page3.dart

import 'package:flutter/material.dart';

void main() => runApp(Page3());

class Page3 extends StatefulWidget {
  @override
  _Page3State createState() => _Page3State();
}

class _Page3State extends State<Page3> {

  @override
  Widget build(BuildContext context) {
    return  Scaffold(
        appBar: AppBar(
          title: Text('Material App Bar'),
        ),
        body: Center(
          child: Container(
            child: Text('page3'),
          ),
        ),
    );
  }
}