hybrid_router

Project Url: weidian/hybrid_router

Introduction: 一个 Flutter 的混合开发解决方案

More: Author ReportBugs

Tags:

一个 Flutter 混合栈插件，无需修改业务中 Navigator 相关代码，可以帮你轻松的将 Flutter 混合栈能力加入到现有的 flutter 工程，你可以像开发原生 flutter app 一样开发混合栈 app

特点

android 无需使用截图
可以直接使用系统原生的 api，包括打开页面结果获取，入侵程度小
支持原生的 Flutter 跳转方式（不借助 native 容器跳转）

Flutter SDK 要求

master 分支需要 v1.3.0 以上，v1.2.2 无法工作（flutter engine android 部分有 bug）。如果你是使用 v1.0.0 版本的，请切换到 support/v1.0.0 分支，此分支下默认的 pushNamed 无法传递参数，不过可以使用混合栈的 HybridNavigator

Dart 集成

初始化

void main() {
  // 创建 root navigator 需要的 observer，混合栈是根据此 observer 来完成
  // 一些生命周期监听的
  final GlobalKey<NativeContainerManagerState> managerKey = GlobalKey();
  NativeContainerManager manager = HybridNavigator.init(
      key: managerKey,
      backgroundBuilder: (context) {
        return EmptyPage();
      },
      // 调用系统 api 的默认打开行为（通过新的 native 容器打开）
      defaultPushType: HybridPushType.Native,
      // 可以监听所有 HybridNavigator 中的 Route
      pageObserver: [],
      routes: {
        // 路由表
        "example": (context, argument) {
          return ExamplePage(
            title: argument as String,
          );
        }
      },
      // 404 页面
      unknownRouteBuilder: <T>(RouteSettings settings) {
        return MaterialPageRoute<T>(
          builder: (context) {
            return PageNotFound();
          },
          settings: settings,
        );
      });

  runApp(MaterialApp(
    theme: ThemeData(
      brightness: Brightness.light,
    ),
    // 这里设置 home 为 创建好的 manager
    home: manager,
  ));
}

使用

打开 Flutter 页面

1. 通过 `pushNamed` 跳转

Navigator.of(context).pushNamed('example', arguments: 'message');

2. 通过 `push` 跳转

Navigator.of(context).push(
  MaterialPageRoute(
    builder: (context) {
      return ExamplePage(title: "Jump from flutter",);
    }
  )
);

指定跳转方式（Native or Flutter）

// 通过 push 指定跳转方式，需要使用 HybridPageRoute
Navigator.of(context).push(HybridPageRoute(
  pushType: HybridPushType.Flutter,
  builder: (context) {
    return ExamplePage(title: 'Jump from flutter',);
  }
));
// 使用 pushNamed 来实现指定，需要使用 HybridNavigator
HybridNavigator.of(context).pushNamed('example', arguments: 'message',
  pushType: HybridPushType.Flutter);

处理页面返回结果

// 普通的 pop 就行
Navigator.of(context).pop('message');

跳转到 Native 页面

// 需要使用混合栈接口
HybridNavigator.of(context)
  .openNativePage(url: 'https://www.baidu.com', args: 'message');

Android 集成

接入

初始化定制行为：用于定制一些行为，比如 Flutter 请求打开 native page route 的时候定制路由行为。不设置表示使用默认的配置

// 可以添加一些自定义的行为
FlutterManager.getInstance().setFlutterWrapConfig(new EmptyFlutterWrapConfig() {

    @Override
    public void postFlutterApplyTheme(@NonNull IFlutterNativePage nativePage) {
        // 修改当前沉浸式主题的背景色为透明
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP &&
                nativePage.getContext() instanceof Activity) {
            Window window = ((Activity)nativePage.getContext()).getWindow();
            window.setStatusBarColor(Color.TRANSPARENT);
        }
    }

    @Override
    public boolean onFlutterPageRoute(@NonNull IFlutterNativePage nativePage,
                                      @Nullable FlutterRouteOptions routeOptions, int requestCode) {
        // 自定义 flutter 页面的跳转
        Intent intent = HybridFlutterActivity.newBuilder().route(routeOptions)
                .buildIntent(nativePage.getContext());
        nativePage.startActivityForResult(intent, requestCode);
        return true;
    }
});

使用

打开 flutter 页面

// example 为 flutter 中 routes 对应的 key
Intent intent = HybridFlutterActivity.newBuilder()
  .route(new FlutterRouteOptions.Builder("example")
    .setArgs("Jump From Main").build())
    .buildIntent(MainActivity.this);
startActivity(intent);

iOS 集成

初始化

初始化的时候设置 WDFlutterRouter 代理类

/**
 初始化

 @param delegate 实现<WDFlutterURLRouterDelegate>的代理
 */
@property(nonatomic, weak) id <WDFlutterRouterDelegate> delegate;

在代理类中实现以下方法

/**
 返回导航对象的回调，用于打开 flutter 页面

 @return 导航对象
 */
- (UINavigationController *)appNavigationController;

/**
 flutter 打开 native 页面的回调

 @param page native 的页面名
 @param params 页面参数
 @parms type present/push   
 */
- (void)openNativePage:(NSString *)page params:(id)params transitionType:(WDFlutterRouterTransitionType)type;

可选的代理方法：

/**
 获取 flutter 页面的容器，可以通过继承 WDFlutterViewContainer 来定制容器。默认使用 WDFlutterViewContainer。
 @return flutter 页面容器
 */
- (WDFlutterViewContainer *)flutterViewContainer;

使用

打开 flutter 页面

/**
 打开 flutter 页面

 @param page flutter 页面名
 @param params 传给页面的参数
 @param result 页面返回时的回调
 */
+ (void)openFlutterPage:(NSString *)page params:(NSDictionary *)params result:(void (^)(id))result;