Flutter跨平臺框架的使用-iOS最新版

 

            

                                                                       科技引領咱們前行

【前言】

   1：先簡單的介紹下Flutter，它是一款跨平臺應用SDK，高性能跨平臺實現方案(暫時討論iOS和Android)，

       它不一樣於RN，少了像RN的JS中間橋接層，因此它的性能相比RN有了很好的提高。

   2：Flutter從谷歌推出以來，我就開始關注，到如今3.0以上的版本，SDK也逐步穩定，目前咱們的網約車項目也開始集成Flutter組件，而且效果不錯。

   3：Flutter弊端也是很明顯，目前支持移動端的第三方框架可選性還很少。

       對於iOS和Android來講，使用Flutter開發一套完整的APP，仍是須要了解兩端的開發知識，因此使用Flutter，還得並行學習提升跨平臺技能。

   4：對於Flutter跨平臺實現方案，目前我整理了2套可行方案：

     （1）：所有使用Flutter框架，包括核心功能部分，缺點未知風險可能比較多，不作優先選擇。

     （2）：核心功能使用原生，其餘功能使用原生與Flutter交互，優勢是風險最小並可控，也是最好選擇方案。固然對於跨平臺開發者的跨平臺技能要求較高。

 

【跨平臺選擇】

    1：咱們項目中目前使用原生與Flutter交互，實現的跨平臺方案，因此本文主要介紹‘原生與Flutter’集成和交互功能（暫時討論iOS和Android）。

    2：以前公司有過一次Flutter的技術分享會，相關資料和項目實踐資料都有整理過，由於開發需求一直比較多，因此拖到今天才在博客上分享和你們一塊兒研究。

    3：Flutter環境的配置和安裝本文就不講了，最全面的教程能夠去官網找。

 

【iOS原生集成Flutter】

     注意：iOS原生集成Flutter方案已經又更新，因此原來的操做已經行不通了，下面的是新版方案。

     使用 cocodpods 把 Flutter 模塊集成到工程中，步驟以下：

   （1）：生成的Flutter工程（或者是git上下載的Flutter工程）放在與iOS原工程同級目錄， 以下：（紅色部分爲flutter項目名稱）

         ---指定目錄，建立Flutter工程（生成指令：flutter create -t module flutter_module_test），放在與iOS原工程同級目錄：

         

   （2）：使用cocodpods，把 Flutter 工程集成到iOS項目環境中

           打開 主工程 pod PodFile 添加 flutter_application_path，配置集成 Flutter 工程，案例以下：

           # Uncomment the next line to define a global platform for your project

           # platform :ios, '9.0'
           use_frameworks!

           flutter_application_path = '/Users/a/Desktop/Flutter-Test/flutter_module_test'
           load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')

           target 'iOS-TestFlutter' do
           # Comment the next line if you don't want to use dynamic frameworks

           # Pods for iOS-TestFlutter

           pod 'SnapKit'

           install_all_flutter_pods(flutter_application_path)

           end

           注意： flutter_application_path = '/Users/a/Desktop/Flutter-Test/flutter_module_test' 文件路徑必定不要搞錯了！！

           打開項目：，集成完成。

 

   （3）：運行報錯處理

          flutter集成完成運行Xcode，Xcode11.0、模擬器 iPhone11 Pro Max 13.0 系統會報錯：

          

          解決方案：切換 flutter 的channel爲master，目前是stable。參考https://github.com/flutter/flutter/issues/43151解決辦法。

          終端指令：flutter channel master

          切換成功以後，flutter 版本由v1.9.1+hotfix.6變成了v1.12.16-pre.32。刪掉 flutter 模塊，從新建模塊而後pod install，從新編譯成功。

 

    （4）：完成上面步驟，經過終端 pod install 指令，flutter項目集成到iOS原生項目中的就完成了。

              這裏不過先要編譯下flutter項目，編譯經過後，iOS項目再執行下 pod install 就能夠運行了，集成完成。

              每次fluter項目中代碼有改動（我使用的VSCode開發fluter），iOS只要經過終端 pod install 指令，就能同步fluter的最新代碼到Xcode中。

 

【iOS 跳轉指定 Flutter 頁面和交互】

         ---實現方案：經過建立 FlutterViewController，通知channel發送信號實現：

      （1）：iOS 跳轉指定 Flutter 頁面實現（swift代碼演示）

              let flutterViewController = FlutterViewController(project: nil, nibName: nil, bundle: nil)  // 建立 FlutterViewController

               flutterViewController?.setInitialRoute("page_home")                             //  home參數: 用於區分跳轉頁面

               let channelName = "com.page_home/native_post"                     // 信號通道名稱：與flutter中註冊的一致 

               // FlutterEventChannel：建立事件通道對象        

               let evenChannal = FlutterEventChannel(name: channelName, binaryMessenger: flutterViewController!)  

               evenChannal.setStreamHandler(self)                                         // 回調代理，flutter主動交互iOS時使用

               flutterMainVC?.present(flutterViewController!, animated: true, completion: nil) // 開始跳轉，flutterMainVC 必須是最後一層VC

       （2）：flutter判斷來自iOS的跳轉目標實現（Dart代碼演示）

              void main(){  //flutter主入口

                  run(ui.window.defaultRouteName);

               }

               Future<String> run(String name) async{

               switch (name) {

                 case "page_home":

                   runApp(appRouter(title: "跳轉page_home",)); //建立對應Widget

                   break;

                 case "page_wallet":

                   runApp(appRouter(title: "跳轉page_wallet",));//建立對應Widget

                   break;

                 case "page_setting":

                   runApp(appRouter(title: "跳轉page_setting",));//建立對應Widget

                   break;

                 default:

                   runApp(MyApp());

                   break;

                 }

                  return '';

               }

        （3）：flutter主動交互iOS（Dart代碼演示）

               class HomePage extends StatefulWidget { 

                     _HomePageState createState() => _HomePageState();

                 }  

                class _HomePageState extends State<HomePage> {

                    static const EventChannel eventChannel = const EventChannel('com.pages.your/native_post');  //註冊一個信號通道

                    void _incrementCounter() {     // 點擊事件的交互

                         eventChannel.receiveBroadcastStream(12345).listen(_onEvent, onError: _onError); // 發送參數12345，同時監聽通知回調

                     });

                    void _onEvent(Object event) {  // iOS 交互回調，返回值FlutterError爲nill，執行此方法。FlutterError是什麼數據，狀況下面。

                         //  iOS 交互成功   

                    }                   

                    void _onError(Object error) {    // iOS 交互回調，返回值FlutterError有值，執行此方法

                        //  iOS 交互失敗

                    }

                 }                                                                                                            

        （4）：iOS 接送處理來自flutter的交互（swift代碼演示）

                注：iOS 接送處理來自flutter的交互，主要經過FlutterStreamHandler代理方法

                extension ViewController: FlutterStreamHandler {

                  // arguments：是 flutter給native的參數  EventSink：是用來傳數據的載體  FlutterError：返回給flutter的報錯信息

                  func onListen(withArguments arguments: Any?, eventSink events: @escaping FlutterEventSink) -> FlutterError? {

                     events("push傳值給flutter的vc");

                     return nil;

                    }

                    // arguments：是 flutter給native的參數  FlutterError：返回給flutter的報錯信息。

                    // 注： 此代理方法主要用來提早處理交互定義內容，無相關的內容提早判斷，進行過濾處理。

                  func onCancel(withArguments arguments: Any?) -> FlutterError? {

                        print(arguments as Any)

                       return nil;

                      }

                }

 

 【iOS and Flutter結語】

       

                                          人生就像美麗的花朵

      1：谷歌推出Flutter時間大概一年左右，版本也一直在更新和推動，因此與原生的集成和交互也一直在更新，這就須要咱們時刻保持學習狀態，動態更新技能。

       2：iOS 和 Flutter的交互方式，並不是就上面我分享的一種，也有其餘的方式，相比而言，個人方案仍是比較簡潔和實用。

       3：做爲一個移動端專業開發者，咱們應該保持對新技術的熱情，跨平臺方案離咱們已經再也不遙遠，相信將來會普及和更加完善。

       4：須要瞭解Android最新版本Flutter使用，請在個人博客專欄裏查看。

       5：若是技術上有不一樣見解或者新的技術，歡迎聯繫一塊兒討論，本人QQ： 497609288。

 

原文出處：https://www.cnblogs.com/tangjianfeng/p/12382781.html