IT评测·应用市场-qidao123.com
标题:
Flutter在鸿蒙HarmonyOS NEXT实践
[打印本页]
作者:
络腮胡菲菲
时间:
2025-1-16 15:01
标题:
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端是支持的，例如
"flutter_boost": "4.6.4", //路由
"shared_preferences_ohos": "2.0.0", //存储
"sqflite": "2.0.0",//数据持久化
复制代码
但是另有有一部门插件是不支持的，以下为Flutter高频使用的三方库（部门鸿蒙化）列表。
https://gitee.com/openharmony-sig/flutter_packages#openharmony平台已兼容库
鸿蒙侧
底层能力的支持
引擎初始化
至于是单引擎照旧多引擎？以及引擎的初始化是最前照旧延后？都要根据自身业务处置惩罚。如果使用FlutterBoost初始化，举例
public initEngine(context: common.Context, success: () => void) {
const optionsBuilder: FlutterBoostSetupOptionsBuilder = new FlutterBoostSetupOptionsBuilder()
optionsBuilder.initialRoute = JSON.stringify(new DeviceInfo());
FlutterBoost.getInstance().setup(this, context, (engine) => {
GeneratedPluginRegistrant.registerWith(engine);
success()
ChannelManager.getInstance().setChannel(engine);
}, optionsBuilder.build())
}
复制代码
如何使用 FlutterPage
界说一个FlutterNavigationPages页面，所有的Flutter页面都通过鸿蒙原生的路由跳转到该页面，该页面在build方法中引入以下代码。
FlutterContainer({ flutterParams: this.routerOptions })，
复制代码
在aboutToAppear生命周期中则是通过路由解析的参数去构造routerOptions参数，也就是Flutter测的路由参数。以下是FlutterContainer详细代码。
@Entry
@Component
export struct FlutterContainer {
private flutterEntry: FlutterBoostEntry | null = null;
private flutterView?: FlutterView;
@Prop flutterParams: FlutterParam
async aboutToAppear() {
this.flutterEntry = new FlutterBoostEntry(getContext(this), this.flutterParams);
await this.flutterEntry.aboutToAppear();
this.flutterView = this.flutterEntry.getFlutterView();
}
aboutToDisappear() {
this.flutterEntry?.aboutToDisappear()
}
onPageShow() {
this.flutterEntry?.onPageShow()
}
onPageHide() {
this.flutterEntry?.onPageHide()
}
build() {
NavDestination() {
FlutterPage({ viewId: this.flutterView?.getId() })
.width('100%')
.height('100%')
}
.hideTitleBar(true)
.onAppear(() => {
})
.onDisAppear(() => {
})
.onShown(() => {
this.flutterEntry?.onShown();
})
.onHidden(() => {
this.flutterEntry?.onHidden();
})
.onReady((ctx: NavDestinationContext) => {
try {
this.flutterEntry?.onReady(ctx.pathStack);
} catch (e) {
}
})
}
}
复制代码
如何使用Flutter与鸿蒙通信 FlutterChannel
由于在引擎initEngine初始化时候已经将engine传递到channel中
this.businessChannel = new RegistryFlutterBusinessChannel(flutterEngine.dartExecutor)
复制代码
第一步：注册 Flutter 的通道，允许传递信息
private channel: MethodChannel
this.channel = new MethodChannel(dartExecutor, "com.channel/BusinessChannel");
this.channel.setMethodCallHandler(new FlutterCallback());
复制代码
第二步：注册 Flutter 的通道，允许传递信息
class FlutterCallback implements MethodCallHandler {
/**
* 监听 Flutter 的事件
* @param call 调回方法
* @param result 事件结果
*/
async onMethodCall(call: MethodCall, result: MethodResult) {
let method: string = call.method;
let args: ESObject = call.args;
try {
hilog.info(0x0000, "RegistryFlutterChannel",
'method=' + method + '------args=' + JSON.stringify(call.argument('value')))
switch (method) {
case "唯一标识":
result.success(null);
break;
default:
result.success(null);
break;
}
} catch (e) {
result.error("error", JSON.stringify(e), null);
}
}
}
复制代码
第三步：给 Flutter 发送变乱
sendEvent(eventName: string, data: string) {
this.channel?.invokeMethod(eventName, data);
}
复制代码
通过以上三步即可做到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企服之家，中国第一个企服评测及商务社交产业平台。
欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/)
Powered by Discuz! X3.4
