专栏首页安卓开发干货分享Flutter + MVP +Kotlin 实战!
原创

Flutter + MVP +Kotlin 实战!

简介

1. Kotlin

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

2. MVP

在这里,MVP 就不再赘述,在我的上一篇文章,已经详细介绍过了。

demo 里的是 Kotlin 版,但实现原理都是一样的。

有兴趣的点下方链接:

从 0 到 1,带你解剖 MVP 的神秘之处,并自己动手实现 MVP ! https://juejin.im/post/5b75491ef265da283719d0e7

3. Flutter

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,建议先安装。

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“ 是什么鬼?这个待会儿再解释,现在你不需要关心。现在运行代码,会看到如下所示:

image

现在呢,我们已经成功在原生上,将 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 地址:

https://github.com/JD-CP/Android-Flutter-Demo ##读者福利限时分享

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Flutter插件开发之APK自动安装

    Flutter Plugin是一种特殊的包,包含一个用Dart编写的API定义,结合Android和iOS的平台特定实现,从而达到二者兼容。1、应用的Flutt...

    CCCruch
  • Android 须知2019流行的框架库及开发语言

    Universal-Image-Loader,早期广泛被用的一个可重复使用的仪器为异步图像加载、缓存、显示。作者已经停止维护。Picasso,谐音”毕加索”,听...

    CCCruch
  • 最新 Android 热门开源项目公布

    LeanCloud 工程师收集了 2019 年 5 月 GitHub 上比较流行的 9 个和 Android 开发相关的开源项目,分享给各位开发者,内容包括对话...

    CCCruch
  • Flutter Lesson 1:Flutter之环境搭建

    就在几天前(2019年05月08日),Google发布了新一版本的Flutter,同时伴随着巨大的更新。之前的Flutter顶多就是跨Android与IOS平台...

    踏浪
  • Flutter混合开发

    使用Flutter从零开始开发App是一件轻松惬意的事情,但对于一些成熟的产品来说,完全摒弃原有App的历史沉淀,全面转向Flutter是不现实的。因此使用Fl...

    xiangzhihong
  • 谷歌移动UI框架Flutter入门

    作为Android开发人员,很有必要学习一下Flutter,那么Flutter是什么呢?它到底有什么作用呢?我们一一来揭晓。 Flutter是谷歌的移动UI框...

    wangweijun
  • 闲鱼基于Flutter技术的架构演进和创新

    最近一段时间一直学习Flutter,也尝试写一下Demo,但是在用的时候。从一开始惊艳到了,觉得写起来很爽,各种UI效果实现起来很棒,而且由于渲染机制,还让双端...

    Demo_Yang
  • 听说 Flutter 最近要多火爆就有多火爆,那就推荐一个不错的系列文章吧

    就在上上周Flutter 发布首个预览版,Flutter 是谷歌的移动 UI 框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flu...

    非著名程序员
  • Flutter系列(一)——详细介绍

    Flutter 是谷歌推出的开发移动UI框架,可以快速的在IOS和Android上构建高质量的原生用户界面。

    Demo_Yang
  • Flutter学习总结系列----第一章、Flutter基础全面详解

    版权声明:本文为博主原创文章,未经博主允许不得转载。https://www.jianshu.com/p/2c9867e737a1

    AWeiLoveAndroid

扫码关注云+社区

领取腾讯云代金券