Flutter适配HarmonyOS实践

打印 上一主题 下一主题

主题 857|帖子 857|积分 2571

大家在知道纯血鸿蒙到来的时间一定很疑惑,使用跨平台语言的到底该怎么办,不管使用Flutter照旧使用原生鸿蒙开辟,都会考虑到一个成本题目,特别是一些无法支持鸿蒙开辟团队,已经使用跨平台开辟已经很成熟的公司或者团队。
接下来我将把我团队中怎么把现有flutter项目适配到鸿蒙的分享给大家。
首先我们必要了解纯血鸿蒙系统和原生安卓系统不是一个系统,开辟过Flutter项目标同学都知道,每多一个平台,项目布局里都会多一个对应平台的model文件夹,例如:

Flutter适配的鸿蒙系统的内容就都在ohos文件夹里面了,如果要编辑鸿蒙相干的原生内容,可以使用DevEco studio打开ohos,在你通过适配鸿蒙的flutterSDK build之后,ohos就已经是一个独立的鸿蒙项目了,雷同于android和iOS文件夹一样,他们都是一个独立的项目。
接下来我将一步步实现如何适配
检查当然flutter项目标SDK版本

因为现在适配鸿蒙的FlutterSDK版本release是3.7.12,为了避免出现大的适配题目,发起现将你的flutter项目先升级或者降级到3.7.12.

如果你的项目也像我的一样高于3.7.12,就必要降级到3.7.12后再去下载安装适配过鸿蒙的flutterSDK 
如何使用适配过鸿蒙的flutterSDK

传送门:Flutter SDK 堆栈
这个堆栈的简介也说了,它是基于Flutter SDK对于OpenHarmony平台的兼容拓展,可支持IDE或者终端使用Flutter Tools指令编译和构建OpenHarmony应用程序
通过文档提示,下载并配置情况
运行 flutter doctor -v 检查情况变量配置是否正确,FutterOpenHarmony应都为ok标识,若两处提示缺少情况,按提示补上相应情况即可,如果情况都通过你会看到以下界面:

开始创建项目,通过命令创建你的项目
  1. flutter create --platforms ohos <projectName>
复制代码
到这一步,就已经乐成了50%啦,打开创建好的项目,将项目里的ohos文件夹复制,然后贴到你的flutter项目中和Android,iOS文件夹平级的地方。

将IDE里的flutter,dart的SDK路径替换成下载的flutter_flutter

然后在IDE里实验flutter clean, 清理掉之前的build文件,再实验 flutter pub get
调试运行

如果有更新了HarmonyOSNext的手机,你可以直接链接手机,点击IDE的run运行,如果你能顺利运行并且打开APP,恭喜你乐成了40%

通过DevEco打开ohos文件夹,我们发现Index.ets入口是打开FlutterPage,这就是新的SDK为我们做的,不必要编写鸿蒙原生代码就能实现flutter项目在鸿蒙装备上运行,FlutterPage 是一个用于在鸿蒙应用中集成Flutter页面的类。

适配Flutter插件库

其实到这里大部分项目是根本无法运行的,或者运行后只有个别页面能打开,这是因为flutter项目里用到了很多插件库,但是这些库的地址是没有适配,我们必要到插件库去找,看看有没有适配:OpenHarmony平台已兼容库,例如我们必要集成:device_info_plus
1搜索插件库名称:

2.点击背面的库名称,回跳转到对应的git堆栈

3.添加适配堆栈地址:这时间必要在flutter项目中的pubspec.yaml文件中,在dependency_overrides下添加适配库的地址
  1. dependency_overrides:
  2.   device_info_plus:
  3.     git:
  4.       url: "https://gitee.com/openharmony-sig/flutter_plus_plugins.git"
  5.       path: "packages/device_info_plus/device_info_plus"
  6.   webview_flutter:
  7.     git:
  8.       url: "https://gitee.com/openharmony-sig/flutter_packages.git"
  9.       path: "packages/webview_flutter/webview_flutter"
  10.   permission_handler:
  11.     git:
  12.       url: "https://gitee.com/openharmony-sig/flutter_permission_handler.git"
  13.       path: "permission_handler"
复制代码
然后实验flutter pub get ,会发现我们的功能可以正常使用了。
眼尖的同学也注意到了,为什么我上面的3个适配库的url都不一样,这是因为不同的适配库,在不同的项目里,如果只是在https://gitee.com/openharmony-sig/flutter_packages.git 这一个地址找,就会出现,找不到库地址的错误。
将项目中所有的插件库在适配库地址里过一遍,基本上flutter官方的库都适配了,别的纯dart插件库不必要适配鸿蒙

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

尚未崩坏

金牌会员
这个人很懒什么都没写!

标签云

快速回复 返回顶部 返回列表