鸿蒙中如何添加flutterview

在鸿蒙应用开发中，如何集成FlutterView？目前想在一个HarmonyOS的Page里嵌入Flutter模块，但找不到官方明确的接入文档。具体需要哪些依赖配置？是否需要在鸿蒙工程中额外引入Flutter插件或修改build.gradle？如果有可参考的代码示例或兼容性注意事项，希望能详细说明一下。

2 回复

在鸿蒙中，通过FlutterEngine和FlutterView组件集成Flutter。首先在build.gradle中添加Flutter依赖，然后在布局文件中使用FlutterView标签，并在代码中初始化FlutterEngine。

更多关于鸿蒙中如何添加flutterview的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在鸿蒙系统中添加FlutterView，可以通过ArkUI的Web组件嵌入Flutter Web应用实现。以下是具体步骤：

  1. 准备Flutter Web应用：

    • 确保Flutter项目支持Web平台，运行 flutter build web 生成构建文件（位于 build/web 目录）。

  2. 在鸿蒙项目中集成：

    • 将Flutter Web文件（如 index.html、静态资源）放入鸿蒙项目的 resources/rawfile 目录。
    • 在ArkUI页面中使用Web组件加载本地文件。

示例代码（ArkTS）：

import webview from '@ohos.web.webview';

@Entry
@Component
struct Index {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Web({
        src: $rawfile('index.html'), // 加载rawfile中的Flutter Web文件
        controller: this.controller
      })
        .width('100%')
        .height('100%')
    }
    .width('100%')
    .height('100%')
  }
}

注意事项：

  • 确保Flutter Web应用适配移动端视图。
  • 鸿蒙与Flutter的通信可通过Web组件的JavaScript接口实现。
  • 此方法适用于展示型场景，复杂交互需额外处理兼容性。

通过以上步骤，即可在鸿蒙应用中嵌入Flutter界面。

回到顶部