科技引领我们前行

【前言】

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 的channelmaster,目前是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:如果技术上有不同看法或者新的技术,欢迎联系一起讨论,本人QQ: 497609288。

Flutter跨平台框架的使用-iOS最新版的更多相关文章

  1. 浅谈跨平台框架 Flutter 的优势与结构

    作者:个推iOS工程师 伊泽瑞尔 一.背景 目前,移动开发技术主要分为原生开发和跨平台开发两种.其中,原生应用是指在某个特定的移动平台上,使用平台所支持的开发工具和语言,直接调用系统提供的API所开发 ...

  2. 一文读懂跨平台框架 Flutter 的搭建与运行

    作者:个推iOS开发工程师 伊泽瑞尔 Flutter是Google推出的跨平台的解决方案,用以帮助开发者在 Android 和 iOS 两个平台开发高质量原生应用的全新移动 UI 框架. 之前我们为大 ...

  3. 跨平台框架与React Native基础

    跨平台框架 什么是跨平台框架? 这里的多个平台一般是指 iOS 和 Android . 为什么需要跨平台框架? 目前,移动开发技术主要分为原生开发和跨平台开发两种.其中,原生应用是指在某个特定的移动平 ...

  4. uni-app跨平台框架介绍和快速入门

    前言: 首先今天主要介绍的是一个多平台的前端框架uni-app,关于多平台的前端框架网上有很多成熟的解决方案比如说Taro,React Native,Flutter等这些都是一些非常优秀的前端跨平台的 ...

  5. iOS 最新版 CocoaPods 的安装流程

    iOS 最新版 CocoaPods 的安装流程1.移除现有Ruby默认源$gem sources --remove https://rubygems.org/2.使用新的源$gem sources - ...

  6. JavaScript开源跨平台框架NativeScript

    NativeScript是一款使用JavaScript语言来构建跨平台原生移动应用的开源框架,支持iOS.Android和Windows Phone.且NativeScript的使用没有过多繁杂的要求 ...

  7. Flutter 与 Swift - 在创建 iOS 应用程序时应该押注什么技术?

    Swift 和 Flutter 是考虑创建 iOS 应用程序的公司最想要的两种技术.开发者能用原生技术取胜吗?如何选择,哪种更适合您的应用?让我们一探究竟吧! 根据 Statista 的数据, 201 ...

  8. 即将开源 | 2亿用户背后的Flutter应用框架Fish Redux

    背景 在闲鱼深度使用 Flutter 开发过程中,我们遇到了业务代码耦合严重,代码可维护性糟糕,如入泥泞.对于闲鱼这样的负责业务场景,我们需要一个统一的应用框架来摆脱当下的开发困境,而这也是 Flut ...

  9. .NET 跨平台框架Avalonia UI: 填坑指北(二):在Linux上跑起来了

    上一章回顾:  .NET 跨平台框架Avalonia UI: 填坑指北(一):熟悉UI操作 本篇将要阐述 包括但不仅限于Avalonia及所有Windows到Linux跨平台开发 的一些注意事项: 一 ...

随机推荐

  1. Linkage Disequilibrium|D‘|r2

    I.10 Other Measures of Linkage Disequilibrium 因为D的取值强烈地依赖于人为制定的等位基因频率(PA及PB),所以它不利于LD程度的比较.标准化的不平衡系数 ...

  2. Gitbook在 Mac 环境上的安装及使用

    一.在 Mac 环境上搭建 gitbook #.安装node.js,在node.js官网下载,直接安装稳定版本. https://nodejs.org/en/ #.检测 node.js 是否安装成功 ...

  3. vue中axios的post请求使用form表单格式发送数据

    vue使用插件qs实现 (qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库.) 在jquery中的ajax的方法已将此封装,所以不需要再次序列化 1. 安装   在项目中使用命令行工具输 ...

  4. linux下用firefox打开csdn故障解决办法

    问题:浏览器打开csdn时博客浏览不全,没有了排版 解决办法: 1.下载一个安装包 命令:epel-release-7-11.noarch.rpm: epel-release-7-11.noarch ...

  5. android打飞机游戏、MVP句子迷App、悬浮窗、RxJava+Retrofit、加载动画、定制计划App等源码

    Android精选源码 微信打飞机 android进度设置加载效果源码 Android新手引导库EasyGuide MVP-好看又好用的句子迷客户端 XFloatView 一个简易的悬浮窗实现方案 a ...

  6. java静态方法和静态字段

    public class Dog{ public static void main(String[]args){ A a= new A(); a.add(); //java实例对象可以访问类的静态方法 ...

  7. window下mysql安装步骤

    1. 官网下载mysql zip包 2. 解压后再D:\database\mysql\mysql-5.7.26-winx64下添加my.ini文件,文件内容如下: [mysql]# 设置mysql客户 ...

  8. 次小生成树题(k) poj1679The Unique MST

    http://poj.org/problem?id=1679 #include<iostream> #include<vector> #include<cstdio> ...

  9. OLED带来全新视觉体验

    2013年1月,在国际消费电子展(CES)上世界首款曲面OLED电视--LG OLED电视亮相,LG Display将曲面与OLED完美结合的面板技术让显示设备的外观和品质都达到了一个全新的高度,惊艳 ...

  10. perf4j+logback配置 非spring 可使用注解

    最近项目打算使用perf4j进行性能监控,由于项目没有使用spring,而又不想对代码入侵过高,打算使用注解的方式进行接入.perf4j采用AspectJ库实现AOP. 具体接入方法如下: logba ...