Flutter 封装统一导航功能提高开发效率

封装统一导航路由

封装统一的页面跳转路由，便于管理页面栈

hi_navigator.dart

/// 监听页面有没有压后台
typedef RouteChangeListener(RouteStatusInfo current, RouteStatusInfo pre);

/// 创建页面
pageWrap(Widget child) {
  return MaterialPage(key: ValueKey(child.hashCode), child: child);
}

/// 获取 RouteStatus 在页面栈中的位置
int getPageIndex(List<MaterialPage> pages, RouteStatus routeStatus) {
  for (int i = 0; i < pages.length; i++) {
    if (getStatus(pages[i]) == routeStatus) {
      return i;
    }
  }
  return -1;
}

/// 自定义路由封装，路由状态
enum RouteStatus { login, registration, home, detail, unknown }

/// 获取page对应的RouteStatus
RouteStatus getStatus(MaterialPage page) {
  if (page.child is LoginPage) {
    return RouteStatus.login;
  } else if (page.child is RegistrationPage) {
    return RouteStatus.registration;
  } else if (page.child is HomePage) {
    return RouteStatus.home;
  } else if (page.child is VideoDetailPage) {
    return RouteStatus.detail;
  } else {
    return RouteStatus.unknown;
  }
}

/// 路由信息
class RouteStatusInfo {
  final RouteStatus routeStatus;
  final Widget page;

  RouteStatusInfo(this.routeStatus, this.page);
}

/// 监听路由页面跳转
/// 感知当前页面是否压后台

class HiNavigator extends _RouteJumpListener {
  static HiNavigator _instance;

  RouteJumpListener _routeJump;

  List<RouteChangeListener> _listeners = [];
  RouteStatusInfo _current;

  HiNavigator._();

  static HiNavigator getInstance() {
    if (_instance == null) {
      _instance = HiNavigator._();
    }
    return _instance;
  }

  /// 注册路由跳转逻辑
  void registerRouteJump(RouteJumpListener routeJumpListener) {
    this._routeJump = routeJumpListener;
  }

  /// 监听路由页面跳转
  void addListener(RouteChangeListener listener) {
    if (!_listeners.contains(listener)) {
      _listeners.add(listener);
    }
  }

  /// 移除监听
  void removeListener(RouteChangeListener listener) {
    _listeners.remove(listener);
  }

  @override
  void onJumpTo(RouteStatus routeStatus, {Map args}) {
    _routeJump.onJumpTo(routeStatus, args: args);
  }

  /// 通知路由页面变化
  void notify(List<MaterialPage> currentPages, List<MaterialPage> prePages) {
    if (_current == prePages) return;
    var current =
        RouteStatusInfo(getStatus(currentPages.last), currentPages.last.child);
    _notify(current);
  }

  void _notify(RouteStatusInfo current) {
    _listeners.forEach((element) {
      element(current, _current);
    });
    _current = current;
  }
}

/// 抽象类供 HiNavigator 实现
abstract class _RouteJumpListener {
  void onJumpTo(RouteStatus routeStatus, {Map args});
}

typedef OnJumpTo = void Function(RouteStatus routeStatus, {Map args});

/// 定义路由跳转逻辑要是实现的功能
class RouteJumpListener {
  final OnJumpTo onJumpTo;
  RouteJumpListener({this.onJumpTo});
}

页面跳转

使用封装好的导航库实现页面跳转

// 跳转详情页
HiNavigator.getInstance().onJumpTo(RouteStatus.detail,
                    args: {'videoMo': VideoModel(111)});
// 跳转到登录页                    
HiNavigator.getInstance().onJumpTo(RouteStatus.login);                    

监听全局导航回调

监听全局页面跳转，实现统一页面跳转逻辑管理

main.dart

Flutter 应用入口，注册页面之间跳转回调

 // 为 Navigator 设置一个 key,必要的时候可以通过 navigationKey.currentState 来获取到 NavigatorState
  BiliRouteDelegate() : navigatorKey = GlobalKey<NavigatorState>() {
    // !!! 实现路由跳转逻辑，所有的路由跳转都会回调到这里
    HiNavigator.getInstance().registerRouteJump(
        RouteJumpListener(onJumpTo: (RouteStatus routeStatus, {Map args}) {
      _routeStatus = routeStatus;
      if (_routeStatus == RouteStatus.detail) {
        this.videoModel = args['videoMo'];
      }
      notifyListeners();
    }));
  }

监听页面周期

监听页面出栈（onPause），入栈(onResume)，进行生命周期管理

home_page.dart

@override
  void initState() {
    super.initState();
    // 监听压栈出栈
    HiNavigator.getInstance().addListener(this.listener = (current, pre) {
      if (widget == current || current.page is HomePage) {
        print('打开首页:onResume');
      } else if (widget == pre?.page || pre.page is HomePage) {
        print('首页：onPause');
      }
    });
  }

工程代码 网盘提取码 vys5