美文网首页Flutter
Flutter生命周期和Navigator、Route监听

Flutter生命周期和Navigator、Route监听

作者: loongod | 来源:发表于2019-04-12 15:18 被阅读0次

说明:
NavOb: NavigatorObserver
A-ROb:PageARouteObserver,在PageA中的RouteObserver
B-ROb:PageBRouteObserver, 在PageB中的RouteObserver

NavOb PageA A-ROb PageB B-ROb PageC 说明
didPush cu:/ pre:null
initState
change Dependenc
didPush
build
从原生 进入 flutter
didPush cu:/ pre:null
initState
changeDe
didPush
build
触发Navigator. pushNamed ('/pageB')
didPush cu:/pageB pre:/
initState
didPush
change Dependenc
build
deactivate
change Dependenc
build
触发Navigator. pushNamed ('/pageC')
didPush cu:/pageC pre:/second
initState
change Dependenc
build
deactivate
deactivate
change Dependenc
change Dependenc
change Dependenc
build
build
点击返回
didPop cu:/pageC pre:/pageB
didPop Next
deactivate
change Dependenc
deactivate
change Dependenc
change Dependenc
build
build
deactivate
dispose
点击返回
didPop cu:/pageB pre:/
didPop Next
didPop
deactivate
change Dependenc
change Dependenc
change Dependenc
build
build
deactivate
dispose

另附:WidgetsBindingObserver监听触发

class PushFirstPageState extends State<PushFirstPage> with WidgetsBindingObserver {

  ...

  @override /// WidgetsBindingObserver
  void didChangeAppLifecycleState(AppLifecycleState state) {
    switch (state) {
      case AppLifecycleState.inactive:
        print('AppLifecycleState.inactive');
        break;
      case AppLifecycleState.paused:
        print('AppLifecycleState.paused');
        break;
      case AppLifecycleState.resumed:
        print('AppLifecycleState.resumed');
        break;
      case AppLifecycleState.suspending:
        print('AppLifecycleState.suspending');
        break;
    }
    super.didChangeAppLifecycleState(state);
  }
}

在原生进入flutterVC页面的时候以及后台进入到前台,触发WidgetsBindingObserver的监听:

 flutter: AppLifecycleState.inactive
 flutter: AppLifecycleState.resumed

在离开flutterVC页面的时候以及应用进入后台:

 flutter: AppLifecycleState.inactive
 flutter: AppLifecycleState.paused

再附:添加NavigatorObserver监听

    return MaterialApp(
     title: 'GL',
     home: PushFirstPage(),
      routes: { // 导航监听的路径
        '/home' : (context)=> PushFirstPage(),
        '/second' : (context)=> PushSecondPage(),
        '/third' : (context)=> PushThirdPage(),
      },
      navigatorObservers: [
        GLObserver(), // 导航监听
        routeObserver, // 路由监听
      ],
    );

class GLObserver extends NavigatorObserver {
// 添加导航监听后,跳转的时候需要使用Navigator.push路由
  @override
  void didPush(Route route, Route previousRoute) {
    super.didPush(route, previousRoute);

    var previousName = '';
    if (previousRoute == null) {
      previousName = 'null';
    }else {
      previousName = previousRoute.settings.name;
    }
    print('NavObserverDidPush-Current:' + route.settings.name + '  Previous:' + previousName);
  }

  @override
  void didPop(Route route, Route previousRoute) {
    super.didPop(route, previousRoute);

    var previousName = '';
    if (previousRoute == null) {
      previousName = 'null';
    }else {
      previousName = previousRoute.settings.name;
    }
    print('NavObserverDidPop--Current:' + route.settings.name + '  Previous:' + previousName);
  }
}


再另附:添加RouteObserver监听

官方文档

MaterialApp中

// 全局的路由监听者,可在需要的widget中添加,应该放到一个全局定义的文件中
final RouteObserver<PageRoute> routeObserver = RouteObserver<PageRoute>();

class PushFirstApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GL',
      home: PushFirstPage(),
      routes: {
        '/home' : (context)=> PushFirstPage(),
        '/second' : (context)=> PushSecondPage(),
        '/third' : (context)=> PushThirdPage(),
      },
      navigatorObservers: [
        routeObserver, // 路由监听
      ],
    );
  }
}

需要监听的Widget中

class PushFirstPageState extends State<PushFirstPage> with RouteAware {
 @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    routeObserver.subscribe(this, ModalRoute.of(context));
  }

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

/// RouteAware
 @override
  void didPush() {
    // Route was pushed onto navigator and is now topmost route.
  }

  @override
  void didPopNext() {
    // Covering route was popped off the navigator.
  }
}

相关文章

网友评论

    本文标题:Flutter生命周期和Navigator、Route监听

    本文链接:https://www.haomeiwen.com/subject/eadqwqtx.html