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