鸿蒙Flutter实战：24-混合开发详解-4-初始化Flutter

发表于 更新于

概述

将 Flutter 模块添加至宿主鸿蒙项目中后，接下需要实现页面跳转、消息通信等功能，本文重点介绍如何初始化 Flutter。

项目配置

添加依赖

编辑 ohos_app/oh-package.json 文件

  1. 如果通过 Har 包方式引入 Flutter 模块，则需要添加如下内容
1
2
3
4
5
6
7
"dependencies": {
  "@ohos/flutter_module": "file:har/my_flutter_module.har",
  "@ohos/flutter_ohos": "file:har/my_flutter.har"
},
"overrides" {
  "@ohos/flutter_ohos": "file:har/flutter.har",
}
  1. 如果通过源码方式引入 Flutter 模块，则需要添加如下内容：
1
2
3
4
"dependencies": {
  "@ohos/flutter_module": "./flutter_module",
  "@ohos/flutter_ohos": "./har/flutter.har"
},

Flutter 引擎初始化

编辑 ohos_app/entry/src/main/ets/entryability/EntryAbility.ts 文件，按以下方式修改：

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
-import { AbilityConstant, ConfigurationConstant, UIAbility, Want } from '@kit.AbilityKit';
-import { hilog } from '@kit.PerformanceAnalysisKit';
-import { window } from '@kit.ArkUI';
+import { FlutterAbility, FlutterEngine } from '@ohos/flutter_ohos';
+import { GeneratedPluginRegistrant } from '@ohos/flutter_module';

-const DOMAIN = 0x0000;
-
-export default class EntryAbility extends UIAbility {
-  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
-    this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET);
-    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onCreate');
-  }
-
-  onDestroy(): void {
-    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onDestroy');
-  }
-
-  onWindowStageCreate(windowStage: window.WindowStage): void {
-    // Main window is created, set main page for this ability
-    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
-
-    windowStage.loadContent('pages/Index', (err) => {
-      if (err.code) {
-        hilog.error(DOMAIN, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err));
-        return;
-      }
-      hilog.info(DOMAIN, 'testTag', 'Succeeded in loading the content.');
-    });
-  }
-
-  onWindowStageDestroy(): void {
-    // Main window is destroyed, release UI related resources
-    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
-  }
-
-  onForeground(): void {
-    // Ability has brought to foreground
-    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onForeground');
-  }
-
-  onBackground(): void {
-    // Ability has back to background
-    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onBackground');
+export default class EntryAbility extends FlutterAbility {
+  configureFlutterEngine(flutterEngine: FlutterEngine) {
+    super.configureFlutterEngine(flutterEngine)
+    GeneratedPluginRegistrant.registerWith(flutterEngine);
   }
}

最终 EntryAbility.ts 文件内容如下：

1
2
3
4
5
6
7
8
9
import { FlutterAbility, FlutterEngine } from '@ohos/flutter_ohos';
import { GeneratedPluginRegistrant } from '@ohos/flutter_module';

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

EntryAbility 继承自 FlutterAbility，而 FlutterAbility 继承自 UIAbility, 它在 UIAbility 上增加了以下功能：

  1. 引擎管理
  • 初始化Flutter引擎（FlutterEngine）
  • 通过Delegate处理Flutter与原生能力绑定
  • 管理窗口生命周期(create/destroy)
  1. UI交互
  • 创建FlutterView视图容器
  • 处理系统配置变化（深色模式/字体缩放）
  • 实现多语言/无障碍服务适配
  1. 生命周期协调
  • 转发原生生命周期事件到Flutter层（onForeground/onBackground）
  • 处理异常恢复（appRecovery.restartApp）
  1. 扩展支持
  • 提供插件管理接口（addPlugin）
  • 支持热重载配置同步（onConfigurationUpdate)

总结

本节主要介绍了如何初始化 Flutter 引擎，以及 初始化 Flutter Module。下一节我们将介绍如何由原生跳转至 Flutter 并展示界面。

参考资料