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在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项目如果要支持鸿蒙端，就不能使用开发工具创建，就需要用指定的命令创建。以下为目前支持的命令。

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",//数据持久化

• 1
• 2
• 3

但是还有有一部分插件是不支持的，以下为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())
  }
  

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

如何使用 FlutterPage

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

  FlutterContainer({ flutterParams: this.routerOptions })，

• 1

在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) {
      }
    })
  }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51

如何使用Flutter与鸿蒙通信 FlutterChannel

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

   this.businessChannel = new RegistryFlutterBusinessChannel(flutterEngine.dartExecutor)

• 1

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

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

• 1
• 2
• 3

第二步：注册 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);
    }
  }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25

第三步：给 Flutter 发送事件

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

• 1
• 2
• 3

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

Flutter业务组件的接入

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

结束

到此就完成了Flutter在鸿蒙HarmonyOS NEXT的开发，更多细节后面持续分享。

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