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.1	x64	17025dd	2024/12/17	3.6.0 Attestation bundle
3.27.1	arm64	17025dd	2024/12/17	3.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 doctor
config	环境配置	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 devices
install	应用安装	flutter install -t <deviceId> <hap文件路径>
assemble	资源打包	flutter assemble
build	测试应用构建	flutter build hap --debug [–target-platform ohos-arm64]
build	正式应用构建	flutter build hap --release [–target-platform ohos-arm64]
run	应用运行	flutter run
attach	调试模式	flutter attach
screenshot	截屏	flutter screenshot
pub	获取依赖	flutter pub get
clean	清除项目依赖	flutter clean
cache	清除全局缓存数据	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的开发，更多细节后面持续分享。

关注公众号：移动端开发的那些事