8

Flutter鸿蒙终端一体化-混沌初开

 7 months ago
source link: https://blog.csdn.net/eclipsexys/article/details/135834379
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Flutter鸿蒙终端一体化-混沌初开

eclipse_xu 于 2024-01-24 08:30:33 发布
阅读量876
点赞数 22

69524ca45bd22961fd45d25fa98c355b.png

点击上方蓝字关注我,知识会给你力量

55d6cc2c36049eae07f66c213bb085ba.png

欲练此功,必先仔细阅读此项目的README文件十遍以上。

flutter_flutter项目,这是我们整个工程的核心,但是很多人都倒在了第一步,其原因,就是——需要使用Dev分支!!!
https://gitee.com/openharmony-sig/flutter_flutter/tree/dev/

当前项目已经支持Linux、Mac、Windows环境下使用。首先,按照README的指引,配置好鸿蒙相关的SDK和环境变量,主要是ohpm与sdkmanager,参考README中给出的地址配置即可,需要注意的是版本要对应。目前该项目对应的官方Flutter版本是3.7。

接下来,配置命令行签名工具,同样是按照指引,需要注意的是签名工具这个项目,需要使用gradle7.1和Java11进行编译,在Mac下,可以很方便的使用brew来安装Java环境,在编译签名工具的时候,将环境变量中的Java11的注释放开即可。

编译成功后,会生成./hapsigntool/hap_sign_tool/build/libs/hap-sign-tool.jar文件。

最后,在本地运行鸿蒙Flutter项目的话,需要使用定制化的Flutter Engine,项目如下:
https://gitee.com/openharmony-sig/flutter_engine
按照README中的编译方式来进行编译,最后获取产物即可,当然,文档中也提供了鸿蒙编译好的产物,可以直接进行使用,这也是最方便的方法。
https://docs.qq.com/sheet/DUnljRVBYUWZKZEtF?tab=BB08J2

不过还是建议大家去编译下engine,享受下定制engine的快感。

一起准备就绪后,通过flutter doctor -v查看环境配置是否ok,得到下面的内容,就算完成了配置。

使用下面的指令来创建我们第一个鸿蒙Flutter工程:

进入创建好的工程,执行下面的指令:

local-engine就是前面下载的定制化引擎产物,鸿蒙的产物编译,大多都需要指定引擎地址,编译成功后,会自动进行签名,并生成相应的signed包,执行install指令进行安装。

恭喜你,跑不起来,因为4.0系统还不支持模拟器运行,所以,你必须有一台鸿蒙4.0+系统的真机才能运行,如果你的公司和华为有合作,那么现在肯定已经收到鸿蒙的测试机了,连上设备,直接运行就好了。

e4770426a5b5eda840e7d593999ad4e6.jpeg

好了,Flutter的一小步,却是鸿蒙的一大步。

我们来看下现在鸿蒙Flutter工程的结构:

fd8af2ae330ded9924d9ad0166b2c7bf.png

是不是熟悉的味道,纯Flutter工程,整体结构是和官方基本一直的,只是将Android、iOS换成了ohos,这里就是鸿蒙的Native工程,你可以直接使用鸿蒙Dev-ECO Studio来打开这个工程,在它的entry-src-main-ets中,就是对应的插件代码,看到熟悉的GeneratedPluginRegistrant.ets吗,换汤不换药,整体结构改动不大,熟悉下鸿蒙Native代码,很快就可以开发了。

鸿蒙Flutter开发有两种模式,一种是以纯Flutter工程为主,即上面的这种模式,鸿蒙代码写在Flutter工程中,另一种是和Android、iOS开发类似,通过依赖鸿蒙Flutter的编译产物har来进行开发。

从技术的角度来看,第一种方案会更加简单,因为鸿蒙的Native代码已经是申明式了,类似Compose了,所以在鸿蒙Native代码中使用Flutter页面是非常简单的一件事,甚至可以直接将FlutterPage()当作一个View直接使用,所以鸿蒙Flutter混编会比Android、iOS方便很多。

而另一种方式,通过产物进行依赖,这种方式更加符合三端统一的目标,也更适合团队进行解耦和协作。不过这种方式也有一些问题,那就是Flutter依赖的一些第三方库,同样是需要适配鸿蒙版的,所以在yaml中,相对正常的Flutter项目来说同样需要进行区分。

截止目前,flutter_flutter的build har指令还有bug,会编译失败,还在等待社区解决中。

对于Flutter的第三方库来说,鸿蒙Flutter社区也给出了适配的计划表
https://docs.qq.com/sheet/DVVJDWWt1V09zUFN2?tab=BB08J2
表中的第三方库都是待验证的,有些不需要Native支持的,验证的版本可以直接使用,有些需要Native支持的插件功能,有计划完成时间的,都是已经处理过的。由此可见,鸿蒙Flutter社区的支持还是很快的。

6b067484200f51624306e2c73368cf12.png

所以大部分的Flutter库,都是可以直接适配的,只有那些依赖Native的插件,才需要适配。

好了,到目前为止,鸿蒙Flutter工程已经初具雏形,整体的适配效果还是不错的,本篇文章是鸿蒙Flutter的第一篇,后续还会对鸿蒙Flutter的混编方案、桥接方法继续讲解。

向大家推荐下我的网站 https://www.yuque.com/xuyisheng  点击原文一键直达

专注 Android-Kotlin-Flutter 欢迎大家访问

本文原创公众号:群英传,授权转载请联系微信(Tomcat_xu),授权后,请在原创发表24小时后转载。

< END >

作者:徐宜生

更文不易,点个“三连”支持一下👇


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK