Flutter + MVP +Kotlin 实战,kotlin语法像Delphi

在这里,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、我们知道在 Flutte

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》

【docs.qq.com/doc/DSkNLaERkbnFoS0ZF】 完整内容开源分享

r 中,主入口只有一个 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 文件并打开,添加如下代码:

Flutter + MVP +Kotlin 实战,kotlin语法像Delphi

编译通过后,在 app 目录下的 build.gradle,添加依赖:

Flutter + MVP +Kotlin 实战,kotlin语法像Delphi

至此,我么已经成功将 Flutter Module 添加到 Android 工程中了。是不是很简单?skr skr skr ……

2. 在原生上,如何展示 Flutter 界面?

打开我们 app 目录下的 MainActivity,添加如下代码:

Flutter + MVP +Kotlin 实战,kotlin语法像Delphi

以上代码,就是创建了一个宽高均充满屏幕的 FlutterView,可以将 FlutterView 看作为展示 Flutter Widget 的容器。

”route1“ 是什么鬼?这个待会儿再解释,现在你不需要关心。现在运行代码,会看到如下所示:

Flutter + MVP +Kotlin 实战,kotlin语法像Delphi

现在呢,我们已经成功在原生上,将 Flutter 界面成功的展示出来。

3. 原生如何给 Flutter 传送数据?Flutter 如何接收?

在这里,我们需要用到 EventChannel。

这个类的作用,可以简单理解为从原生向 Flutter,push data:主动的推送数据。

修改后的 Activity 代码如下:

Flutter + MVP +Kotlin 实战,kotlin语法像Delphi

看 Flutter 端接收的代码:

Flutter + MVP +Kotlin 实战,kotlin语法像Delphi

Flutter + MVP +Kotlin 实战,kotlin语法像Delphi

注意:在创建 EventChannel 对象的时候,传入的 name,

一定要和你在原生中传入的 name 对应起来,否则将接收不到。这个很好理解。

4. Flutter 如何调用原生的 method ?通过什么来调用?

MethodChannel :

当 Flutter 向原生调用方法或获取数据时,需要用到这个类来实现。

接下来看 Android 端实现代码,修改后如下:

Flutter + MVP +Kotlin 实战,kotlin语法像Delphi

Flutter + MVP +Kotlin 实战,kotlin语法像Delphi

当 Flutter 调用 refresh 方法时,android 端调用 refresh() 方法,这里实现了一个简单的吐司,并返回了空字符串。

当然你也可以做其他操作,比如跳转页面、实现动画、获取数据等等。

上一篇:[开源 .NET 跨平台 Crawler 数据采集 爬虫框架: DotnetSpider] [一] 初衷与架构设计


下一篇:PhpStorm和PHPstudy配置调试参数(Xdebug),问题描述Error. Interpreter is not specified or invalid. Press “Fix” to edit your project configuration.