Flutter鸿蒙化 在鸿蒙应用中添加Flutter页面

前言

今天这节课我们讲一下 在鸿蒙应用中添加Flutter页面。

作用：

之前有很多朋友和网友问我鸿蒙能不能使用Flutter开发，他们的项目已经用Flutter开发成熟了有什么好的方案呢，今天讲到这个就可以很好的解决他们的问题，例如我们正式项目中可能是一部分native 开发 一部分使用Flutter的一个写公共组件库适配在的不同的端上面。那么我们今天讲到这个专题就可以很好的解决此类问题：

如何使用 FlutterPage

1. 使用 DevEco-Studio 打开 ohos 工程
2. 鼠标右键点击 ohos/entry/src/main/ets/pages 目录，依次选择 New->Page->Empty Page
3. 修改 Page Name，鼠标左键点击Finish

EntryAbility 需要继承自 FlutterAbility

export default class EntryAbility extends FlutterAbility {
  configureFlutterEngine(flutterEngine: FlutterEngine) {
    super.configureFlutterEngine(flutterEngine)
    GeneratedPluginRegistrant.registerWith(flutterEngine)
  }
}

在鸿蒙的页面中使用 FlutterPage

let storage = LocalStorage.getShared()

@Entry(storage)
@Component
struct Page1 {
  private context = getContext(this) as common.UIAbilityContext
  @LocalStorageLink('viewId') viewId: string = "";

  build() {
    Stack({ alignContent: Alignment.Top }) {
      FlutterPage({ viewId: this.viewId })
 
    }
  }
}

实战效果

我们可以观察我们在主页里面编写2了两个button 然后点击跳转不同的页面第一个页面我们使用 FlutterPage 装载了我们的整个Flutter开发的页面 我们可以清晰的看到第一个页面不是原生开发而是使用我们的Flutter开发 第二个页面使用ArkUI 开发有布局边界显示。我们可以很好的对比一下。

开发过程中可能遇到的问题

1 我们在修改flutter 端代码我们需要执行 Flutter build hap 后再去启动我们的Flutter to Harmony 项目里面的ohos 的鸿蒙原生项目

提示我们编译成功后 我们再打开 Flutter to Harmony 项目里面的ohos 项目重新签名就可以完美运行到我们的鸿蒙next设备上面了。

2 第二点就是Flutter to Harmony 中很多的插件 用在安卓和ios端很好用的flutter 插件不支持， 这个我们可以去GitHub或者pub.dev 上上面去搜索看看有没有 Harmony os版本的具体对应好版本再去使用。

总结

我们在实战项目如果公司已经又跨端的方案了 例如Flutter， 我们就可以 FlutterPage 的特性讲Flutter的页面代码通过 FlutterPage 添加到我们现在有的鸿蒙next 项目当中来 这样我们在既不破坏原有技术栈的情况下 有可以很好用上鸿蒙里面性特效等等能力。可以让我们的项目更加灵活 也可以降低开发成本