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學習中，若有什麼不妥的地方還望各位大佬斧正！！！