Kotlin,由 JetBrains 于 2011.07 推出,一款面向 JVM 在 Java 虚拟机上运行的静态类型编程语言。
相比 Java,它可以静态检测很多陷阱,比如常见多发的空指针,所以开发效率更高。
而且通过支持variable type inference,higher-order functions (closures),extension functions,
mixins and first-class delegation等实现,使得它比 Java 更加简洁。虽然它与 Java 语法并不兼容,
但 Kotlin 可以和 Java 代码相互运作。更为重要的是,
在 2017 年的 Goofle I/O 上,也宣布 kotlin 为 Android 的官方开发语言。
github 地址:Kotlin https://github.com/JetBrains/kotlin
在这里,MVP 就不再赘述,在我的上一篇文章,已经详细介绍过了。
demo 里的是 Kotlin 版,但实现原理都是一样的。
有兴趣的点下方链接:
从 0 到 1,带你解剖 MVP 的神秘之处,并自己动手实现 MVP ! https://juejin.im/post/5b75491ef265da283719d0e7
Flutter,由 Google 在 2018. 02 推出的移动UI框架,
可以快速在 Android 和 iOS 上构建高质量的原生用户界面。
Flutter 的优势,在这里我也不再多说了。在 Flutter 中文网 都是有的。
优势有很多,当然劣势也很多!虽说跨平台,但是对于适配问题,还需要去优化并解决。
性能相关,经常会出现一些卡顿现象,并且对于动画的实现效果,也不是那么的理想。
当然,还有很多其他的问题。毕竟现在发布的也只是 beta 版,上述的这些问题,也会得到很好的解决的。
ok,下面切入正题,我们如何在项目中,去使用 Flutter。
在 Android 原有项目的基础,去集成并使用 Flutter,肯定会有下面几个疑问?
1、如何在原生上,展示 Flutter 界面?
2、原生如何给 Flutter 传送数据?Flutter 如何接收?
3、Flutter 如何调用原生的 method ?通过什么来调用?
4、我们知道在 Flutter 中,主入口只有一个 void main(),如果在原生界面 A,要显示一个 ListView。在原生界面 B,要显示一个 webView。那我们在 Flutter 中,通过什么来判断我要加载的是 ListView 还是 webView 呢?
ps:如果电脑前的同学没有安装 Flutter,建议先安装。
1. 在 Android 原生的项目基础中,如何集成 Flutter
打开你的项目,找到 Terminal,输入终端命令:flutter channel
如果输出如下:
1、我们需要切换到 master 分支,继续输入终端命令:flutter channel master,
2、等待执行完毕之后,我们就成功的切换到了 master 分支。为什么要切换到 master 分支?
3、因为我们在安装 Flutter 的时候,默认安装的是 beta 版本。
4、该版本,目前是不支持在现有项目中集成 Flutter Module 模块功能的。
5、如果在 beta 版本中,执行了创建 Module 命令:flutter create -t module 你要创建的库的名字,
6、它会提示你 “module” is not an allowed value for option “template” 。
执行终端命令,创建你的 Flutter Library:flutter create -t module flutter_library
等待执行,创建成功后,会如下所示:
注意:命令中的 flutter_library, 是我对 Flutter Library 的命名。你可以替换为你的命名。
将 flutter_library 添加到 Android 工程
找到 Project 层 setting.gradle 文件并打开,添加如下代码:
编译通过后,在 app 目录下的 build.gradle,添加依赖:
至此,我么已经成功将 Flutter Module 添加到 Android 工程中了。是不是很简单?skr skr skr ……
2. 在原生上,如何展示 Flutter 界面?
打开我们 app 目录下的 MainActivity,添加如下代码:
以上代码,就是创建了一个宽高均充满屏幕的 FlutterView,可以将 FlutterView 看作为展示 Flutter Widget 的容器。
”route1“ 是什么鬼?这个待会儿再解释,现在你不需要关心。现在运行代码,会看到如下所示:
现在呢,我们已经成功在原生上,将 Flutter 界面成功的展示出来。
3. 原生如何给 Flutter 传送数据?Flutter 如何接收?
在这里,我们需要用到 EventChannel。
这个类的作用,可以简单理解为从原生向 Flutter,push data:主动的推送数据。
修改后的 Activity 代码如下:
看 Flutter 端接收的代码:
注意:在创建 EventChannel 对象的时候,传入的 name,
一定要和你在原生中传入的 name 对应起来,否则将接收不到。这个很好理解。
4. Flutter 如何调用原生的 method ?通过什么来调用?
MethodChannel :
当 Flutter 向原生调用方法或获取数据时,需要用到这个类来实现。
接下来看 Android 端实现代码,修改后如下:
当 Flutter 调用 refresh 方法时,android 端调用 refresh() 方法,这里实现了一个简单的吐司,并返回了空字符串。
当然你也可以做其他操作,比如跳转页面、实现动画、获取数据等等。
5. 判断不同的 route ,加载不同的界面
我们在 MainActivity 加载 FlutterView 时,有传入一个参数 “route1”。
点击进入 createView 的源码时,有这样一句注释:
通过查看源码得知,initialRoute 的默认值为 “/“。因为入口只有一个:void main(),
所以判断 route ,加载不同界面的逻辑应该也就在这里了。具体请看代码实现:
怎么样,很简单的吧?到这里呢,文章开头说的那四个问题,我们也都一一解决掉了。
下面说一下我的 demo 实现,在 Android 端获取接口数据,然后转化成 json 格式,
通过 Flutter 端的调用,以列表形式进行展示。最后效果图如下:
demo 中的代码实现,没有考虑实际需求。
只是为了验证,android 和 flutter 混合开发,这条路是行得通的。
最后,奉上 github demo 地址:
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。