Flutter在鸿蒙HarmonyOS NEXT实践

Flutter在鸿蒙HarmonyOS NEXT实践

移动端开发中少不了一种技术栈叫做跨平台，目前常见的跨平台三方框架为Flutter、ArkUIX、React Native、Taro、WEEX、UniApp等，目前跨平台占比多的就属Flutter。这篇分享下Flutter在鸿蒙HarmonyOS NEXT实践。
Flutter侧

Flutter架构

Flutter的环境配置以及更多信息参考
https://docs.flutter.cn/resources/architectural-overview
Flutter版本

https://docs.flutter.cn/release/archive
Flutter 版本架构Ref 发布日期Dart 版本出处/来源3.27.1x6417025dd2024/12/173.6.0 Attestation bundle3.27.1arm6417025dd2024/12/173.6.0 Attestation bundle 也就是说Flutter在Android和iOS端目前Flutter最新版本为3.27.1。通过开发工具Android Studio创建Flutter项目时并没有HarmonyOS端，由于Flutter开发来源Google，所以没有HarmonyOS端也很正常。

鸿蒙Flutte3.7.12版本

Flutter虽然没有适配鸿蒙端，但是不阻碍鸿蒙适配Flutter。gitee上面OpenHarmony SIG组织根据官方Flutte3.7.12版本构建了引擎和sdk的基础版本。
https://gitee.com/openharmony-sig/flutter_engine
https://gitee.com/openharmony-sig/flutter_flutter
鸿蒙Flutte3.22.0版本

除此之外目前另有一个组织harmonycommando_flutter基于Flutter官方社区3.22.0版本构建，sdk基础版本链接，engine基础版本链接分别为
https://gitee.com/harmonycommando_flutter/flutter
https://github.com/flutter/flutter/commit/5dcb86f68f239346676ceb1ed1ea385bd215fba1
https://github.com/flutter/engine/commit/f6344b75dcf861d8bf1f1322780b8811f982e31a
所以如果Flutter项目如果要支持鸿蒙端，就不能使用开发工具创建，就需要用指定的下令创建。以下为目前支持的下令。
指令名称指令描述使用说明doctor环境检测flutter doctorconfig环境配置flutter config --<key> <value>create创建新项目flutter create --platforms ohos,android,ios --org <org> <appName>create创建module模板flutter create -t module <module_name>create创建plugin模板flutter create -t plugin --platforms ohos,android,ios <plugin_name>create创建plugin_ffi模板flutter create -t plugin_ffi --platforms ohos,android,ios <plugin_name>devices已毗连设备查找flutter devicesinstall应用安装flutter install -t <deviceId> <hap文件路径>assemble资源打包flutter assemblebuild测试应用构建flutter build hap --debug [–target-platform ohos-arm64]build正式应用构建flutter build hap --release [–target-platform ohos-arm64]run应用运行flutter runattach调试模式flutter attachscreenshot截屏flutter screenshotpub获取依赖flutter pub getclean扫除项目依赖flutter cleancache扫除全局缓存数据flutter pub cache clean Flutter在鸿蒙端底层适配

Flutter开发中，SDK必须基于Flutter Sdk 3.7.12大概3.22.0版本，构建出的产物为2个，一个是引擎库har，一个是Flutter业务代码的har。

Flutter插件在鸿蒙端的适配

Flutter开发中常见的插件在ohos端是支持的，例如

1.   "flutter_boost": "4.6.4", //路由
2.   "shared_preferences_ohos": "2.0.0", //存储
3.   "sqflite": "2.0.0",//数据持久化

复制代码

但是另有有一部门插件是不支持的，以下为Flutter高频使用的三方库（部门鸿蒙化）列表。
https://gitee.com/openharmony-sig/flutter_packages#openharmony平台已兼容库
鸿蒙侧

底层能力的支持

引擎初始化

至于是单引擎照旧多引擎？以及引擎的初始化是最前照旧延后？都要根据自身业务处置惩罚。如果使用FlutterBoost初始化，举例

2.    public initEngine(context: common.Context, success: () => void) {
3.     const optionsBuilder: FlutterBoostSetupOptionsBuilder = new FlutterBoostSetupOptionsBuilder()
4.     optionsBuilder.initialRoute = JSON.stringify(new DeviceInfo());
6.     FlutterBoost.getInstance().setup(this, context, (engine) => {
7.       GeneratedPluginRegistrant.registerWith(engine);
8.       success()
9.       ChannelManager.getInstance().setChannel(engine);
10.     }, optionsBuilder.build())
11.   }
12.   

复制代码

如何使用 FlutterPage

界说一个FlutterNavigationPages页面，所有的Flutter页面都通过鸿蒙原生的路由跳转到该页面，该页面在build方法中引入以下代码。

1.   FlutterContainer({ flutterParams: this.routerOptions })，

复制代码

在aboutToAppear生命周期中则是通过路由解析的参数去构造routerOptions参数，也就是Flutter测的路由参数。以下是FlutterContainer详细代码。

1.   @Entry
2. @Component
3. export struct FlutterContainer {
4.   private flutterEntry: FlutterBoostEntry | null = null;
5.   private flutterView?: FlutterView;
6.   @Prop flutterParams: FlutterParam
8.   async aboutToAppear() {
9.     this.flutterEntry = new FlutterBoostEntry(getContext(this), this.flutterParams);
10.     await this.flutterEntry.aboutToAppear();
11.     this.flutterView = this.flutterEntry.getFlutterView();
12.   }
14.   aboutToDisappear() {
15.     this.flutterEntry?.aboutToDisappear()
16.   }
18.   onPageShow() {
19.     this.flutterEntry?.onPageShow()
20.   }
22.   onPageHide() {
23.     this.flutterEntry?.onPageHide()
24.   }
26.   build() {
27.     NavDestination() {
28.       FlutterPage({ viewId: this.flutterView?.getId() })
29.         .width('100%')
30.         .height('100%')
31.     }
32.     .hideTitleBar(true)
33.     .onAppear(() => {
34.     })
35.     .onDisAppear(() => {
36.     })
37.     .onShown(() => {
38.       this.flutterEntry?.onShown();
39.     })
40.     .onHidden(() => {
41.       this.flutterEntry?.onHidden();
42.     })
43.     .onReady((ctx: NavDestinationContext) => {
44.       try {
45.         this.flutterEntry?.onReady(ctx.pathStack);
46.       } catch (e) {
47.       }
48.     })
49.   }
50. }

复制代码

如何使用Flutter与鸿蒙通信 FlutterChannel

由于在引擎initEngine初始化时候已经将engine传递到channel中

1.    this.businessChannel = new RegistryFlutterBusinessChannel(flutterEngine.dartExecutor)

复制代码

第一步：注册 Flutter 的通道，允许传递信息

1.   private channel: MethodChannel
2.   this.channel = new MethodChannel(dartExecutor, "com.channel/BusinessChannel");
3.   this.channel.setMethodCallHandler(new FlutterCallback());

复制代码

第二步：注册 Flutter 的通道，允许传递信息

1.   class FlutterCallback implements MethodCallHandler {
2.   /**
3.    * 监听 Flutter 的事件
4.    * @param call 调回方法
5.    * @param result 事件结果
6.    */
7.   async onMethodCall(call: MethodCall, result: MethodResult) {
8.     let method: string = call.method;
9.     let args: ESObject = call.args;
10.     try {
11.       hilog.info(0x0000, "RegistryFlutterChannel",
12.         'method=' + method + '------args=' + JSON.stringify(call.argument('value')))
13.       switch (method) {
14.         case "唯一标识":
15.           result.success(null);
16.           break;
17.         default:
18.           result.success(null);
19.           break;
20.       }
21.     } catch (e) {
22.       result.error("error", JSON.stringify(e), null);
23.     }
24.   }
25. }

复制代码

第三步：给 Flutter 发送变乱

1.    sendEvent(eventName: string, data: string) {
2.     this.channel?.invokeMethod(eventName, data);
3.   }

复制代码

通过以上三步即可做到ohos端给Flutter端发送消息，也可以实现ohos端去接受Flutter发送过来的消息。
Flutter业务组件的接入

Flutter业务组件的接入其实就是Flutter开发完代码生成三端代码后，选择.ohos文件夹下的源码，打出har即可。
如果有特别需求，例如修改Flutter组件在鸿蒙端的引入名称，就需要通过DevEco Studio打开项目修改module的oh-package.json5文件name。除此之外也可以通过修改flutter sdk源码进行屏蔽name的规则实现。
结束

到此就完成了Flutter在鸿蒙HarmonyOS NEXT的开发，更多细节后面持续分享。
关注公众号：移动端开发的那些事

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