flutter混合(iOS)开发第一步使用(Flutter_Boost)完成页面之间的跳转传值(一)

首先声明我这里使用的是Flutter_Boost

能够先去看看源码demo 简单提一下原生混合Flutter咱们主要作两步，第一步在咱们项目统计建立咱们的Flutter_module 建立方式使用咱们的终端运行

flutter create -t module (你要建立的Flutter项目名称)
复制代码

这样建立的方式就相似iOS中作cocopods插件的方式,建立出来的项目使用AndroidStudio是能运行的彻底没有问题。 而后个人原生工程用咱们的cocopods里面有pods了，咱们在podfile中去添加这样的代码我把个人podfile贴出来,你们不用去那个配置那个Build Phases里面添加什么run script。就我这样就行了。那个Build Settings里面的Enable Bitcode仍是要改为NO这个不要忘记了。该说的都说完了，这就是iOS原生这边须要配置的地方。

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

source 'https://github.com/CocoaPods/Specs.git'
# 添加模块所在路径
flutter_application_path = '../JWellTruck_Flutter'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')

target 'JWellTruck' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

  # Pods for JWellTruck
  # 安装Flutter模块
   install_all_flutter_pods(flutter_application_path)
  target 'JWellTruckTests' do
    inherit! :search_paths
    # Pods for testing
  end

  target 'JWellTruckUITests' do
    # Pods for testing
  end
end

复制代码

搞完这些咱们再去AppDelegate里面配置咱们的router

let router = PlatformRouterImp.init();
    FlutterBoostPlugin.sharedInstance().startFlutter(with: router, onStart: { (engine) in

        
});
复制代码

Flutter 混合开发页面跳转的几种形式

nativeA -> flutterA -> flutterB -> nativeB -> flutterB

而后就是依次返回，这样差很少就是一个App完整的页面路由了。 这里我使用的是Swift来作的混合开发，固然OC也是相同的道理。 首先第一步咱们混合开发通常第一步是从原生到Flutter页面。

最重要的一点必须说明一下，咱们作的时候无论是Swift仍是OC咱们都要去写一个继承FLBPlatform的类，这里主要是作页面跳转的重要地方，包括从Flutter传过来的数据这些咱们均可以在这里拿到，这里我贴一下个人这个类，只是拿官方demo稍微作了一点修改。主要是我本身的原生项目里面的TabBar和Navigation都是自定义的个人原生代码以下

import Foundation
import flutter_boost

class PlatformRouterImp: NSObject, FLBPlatform {
    func open(_ url: String, urlParams: [AnyHashable : Any], exts: [AnyHashable : Any], completion: @escaping (Bool) -> Void) {
        var animated = false;
        if exts["animated"] != nil{
            animated = exts["animated"] as! Bool;
        }
         let vc = FLBFlutterViewContainer.init()
            vc.setName(url, params: urlParams)
            vc.navigation.bar.isHidden = true
            vc.hidesBottomBarWhenPushed = true
            <!--这里的topVC是我项目里面写的一个获取最上层控制器的方法我也贴一下个人代码-->
            topVC?.navigationController!.pushViewController(vc, animated: animated);
        completion(true);
    }
    
    func present(_ url: String, urlParams: [AnyHashable : Any], exts: [AnyHashable : Any], completion: @escaping (Bool) -> Void) {
        var animated = false;
        if exts["animated"] != nil{
            animated = exts["animated"] as! Bool;
        }
        let vc = FLBFlutterViewContainer.init();
        vc.setName(url, params: urlParams);
        topVC?.navigationController!.present(vc, animated: animated) {
            completion(true);
        };
    }
    
    func close(_ uid: String, result: [AnyHashable : Any], exts: [AnyHashable : Any], completion: @escaping (Bool) -> Void) {
        var animated = false;
        if exts["backNative"] != nil{
            animated = exts["backNative"] as! Bool;
        }
        let presentedVC = topVC?.navigationController!.presentedViewController;
        let vc = presentedVC as? FLBFlutterViewContainer;
        if vc?.uniqueIDString() == uid {
            vc?.dismiss(animated: animated, completion: {
                completion(true);
            });
        }else{
            topVC?.navigationController!.popViewController(animated: animated);
        }
    }
    
//    func navigationController() -> UINavigationController {
//        let delegate = UIApplication.shared.keyWindow?.rootViewController as! UINavigationController
////        let navigationController = delegate.window?.rootViewController as! UINavigationController
//        return delegate.navigationController!
//    }
    
}
复制代码

我在个人公共类里面写了一个这样的方法(代码里面全部的属性不会存在找不到状况了)

var topVC: UIViewController? {
    var resultVC: UIViewController?
    resultVC = _topVC(UIApplication.shared.keyWindow?.rootViewController)
    while resultVC?.presentedViewController != nil {
        resultVC = _topVC(resultVC?.presentedViewController)
    }
    return resultVC
}
复制代码

接下来咱们把全部状况都分类都说一遍：

一、 Native To Flutter

Native里面的代码：

FlutterBoostPlugin.open("页面参数名，就是Flutter里面配置的这个名字，mian页面须要配置的", urlParams: ["这里是一个标识符相似标记那种"], exts: ["这里给一个参数，好比咱们push的时候animated是否须要动画"], onPageFinished: { (_ result:Any?) in
            print("这里是在页面打开成功后回调，这里就会把咱们上那边urlParams里面的标识符传过来")
        }) { (f: Bool) in
            print("页面打开")
        }
<!--这里是我写的值-->
FlutterBoostPlugin.open("first", urlParams:[kPageCallBackId:"HomePagecallbackId#1"], exts: ["animated":true], onPageFinished: { (_ result:Any?) in
               print(String(format:"call me when page finished, and your result is:%@", result as! CVarArg));
           }) { (f:Bool) in
               print(String(format:"page is opened"));
           }
复制代码

Dart里面的代码(须要先在main里面)咱们在StatefulWidget下搞一个：

void initState() {
    super.initState();
    FlutterBoost.singleton.registerPageBuilders(<String, PageBuilder>{
      'first': (String pageName, Map<String, dynamic> params, String _) =>
          FirstRouteWidget(),
    });
  }
复制代码

这样就能打开一个咱们的flutter页面了。 打开时第一步，咱们还要传值过去原生传值过去的代码

//        传值给Flutter
  FlutterBoostPlugin.sharedInstance().sendEvent("data", arguments: ["name":"ryan","age":18])
复制代码

咱们在dart里面获取值

//    监听原生传过来的值
  FlutterBoost.singleton.channel.addEventListener("data", (name, arguments) {
    print(arguments["age"]);
    return;
  });
复制代码

这样就完成了第一步，感受太多了写的，Flutter返回原生传值我写在下一篇吧！

各位大佬：小弟正在Flutter学习中，若有什么不妥的地方还望各位大佬斧正！！！