美文网首页
Flutter 另一种方法实现 RouteAware 页面跳转生

Flutter 另一种方法实现 RouteAware 页面跳转生

作者: 梁典典 | 来源:发表于2020-12-17 15:59 被阅读0次

    咳咳,先定义一个类集成RouteObserver<PageRoute<dynamic>>

    import 'package:flutter/material.dart';
    import '../h_utils/util/page_change_util.dart';
    import '../event/route_event.dart';
    
    class MyRouteObserver extends RouteObserver<PageRoute<dynamic>> {
      void _sendScreenView(PageRoute<dynamic> route, ActionType type) {
        var screenName = route.settings.name;
        var isCurrent = route.isCurrent;
        PageChangeUtil()
            .pushRouteDetail(RouteEvent(screenName ?? '', type, route, isCurrent));
      }
    
      @override
      void didPush(Route<dynamic> route, Route<dynamic> previousRoute) {
        super.didPush(route, previousRoute);
        if (route is PageRoute) {
          _sendScreenView(route, ActionType.DID_PUSH);
        }
      }
    
      @override
      void didReplace({Route<dynamic> newRoute, Route<dynamic> oldRoute}) {
        super.didReplace(newRoute: newRoute, oldRoute: oldRoute);
        if (newRoute is PageRoute) {
          _sendScreenView(newRoute, ActionType.DID_REPLACE);
        }
      }
    
      @override
      void didPop(Route<dynamic> route, Route<dynamic> previousRoute) {
        super.didPop(route, previousRoute);
        if (previousRoute is PageRoute && route is PageRoute) {
          _sendScreenView(previousRoute, ActionType.DID_POP);
        }
      }
    
      @override
      void didRemove(Route route, Route previousRoute) {
        super.didRemove(route, previousRoute);
        if(previousRoute is PageRoute && route is PageRoute){
          _sendScreenView(previousRoute, ActionType.DID_REMOVE);
        }
      }
    }
    
    

    把这个类加入到MaterialApp属性navigatorObservers

      navigatorObservers: [
        MyRouteObserver(),
        ...
      ]
    

    model

    import 'package:flutter/cupertino.dart';
    
    class RouteEvent {
     PageRoute<dynamic> route;
     String pageNmae;
     ActionType type;
     bool isCurrent;
     RouteEvent(this.pageNmae, this.type, this.route,this.isCurrent);
    }
    
    enum ActionType { DID_PUSH, DID_REPLACE, DID_POP, DID_REMOVE }
    
    

    然后复制我的工具类

    import 'dart:async';
    
    class PageChangeUtil {
      PageChangeUtil._internal() {
        init();
      }
    
      factory PageChangeUtil() => _instance;
    
      static final PageChangeUtil _instance = PageChangeUtil._internal();
    
    
      StreamController _controller;
      Stream _stream;
    
      static PageChangeUtil get instance => _instance;
      Stream get changeStream => _stream;
      StreamController get ctrl => _controller;
    
      void disposeStream() => _controller.close();
    
      void init() {
        _controller ??= StreamController.broadcast();
        _stream ??= _controller.stream;
        if(_controller.isClosed){
          _controller = null;
          _stream = null;
          init();
        }
      }
    
      void pushRouteDetail(dynamic data){
        init();
        _controller.sink.add(data);
      }
    }
    
    

    至此准备工作完成,使用也很简单

      @override
      void initState() {
        _listenPageChange();
        super.initState();
      }
    
     // 监听页面改变事件
      void _listenPageChange() {
        PageChangeUtil.instance.changeStream.listen((event) {
    
          switch(event.type){
            case ActionType.DID_REMOVE:
              break;
            case ActionType.DID_POP:
              print('页面返回');
              break;
            case ActionType.DID_PUSH:
              print('跳转到下一页');
              break;
            case ActionType.DID_REPLACE:
              break;
            default:
              break;
          }
        });
      }
    
      @override
      void dispose() {
        PageChangeUtil.instance.disposeStream();
        super.dispose();
      }
    

    相关文章

      网友评论

          本文标题:Flutter 另一种方法实现 RouteAware 页面跳转生

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