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

news2025/5/23 6:31:11

概述

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

项目配置

添加依赖

编辑 ohos_app/oh-package.json 文件

  1. 如果通过 Har 包方式引入 Flutter 模块,则需要添加如下内容
  "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 模块,则需要添加如下内容:
  "dependencies": {
    "@ohos/flutter_module": "./flutter_module",
    "@ohos/flutter_ohos": "./har/flutter.har"
  },

Flutter 引擎初始化

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

-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 文件内容如下:

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 并展示界面。

参考资料

  • 如何使用混合开发 module
  • 如何使用混合开发添加跳转 FlutterEntry

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2383687.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

我爱学算法之—— 二分查找(中)

一、搜索插入位置 题目解析 这道题,给定一个数组nums和一个目标值target,让我们在数组nums中找到目标值;如果目标值存在就返回它的下标,如果不存在就返回数target被顺序插入的位置下标。 算法思路 这道题,我们可以使…

军事目标系列之迷彩作战人员检测数据集VOC+YOLO格式2755张1类别

数据集格式:Pascal VOC格式YOLO格式(不包含分割路径的txt文件,仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数):2755 标注数量(xml文件个数):2755 标注数量(txt文件个数):2755 …

node12.22.12在nvm中安装

1、安装nvm 官网:https://nvm.uihtm.com/ 下载,安装 nvm -v 1.2.22、通过 nvm install 12.22.12 安装报错,找不到此版本 通过下载 https://nodejs.org/zh-cn/downloadzip文件 解压 3、查看nvm 安装路径 nvm root4、在目录下新建文件夹 v…

【生态信息】开源软件全方位解析

开源软件(0pen Source Software,0ss)是指其源代码可以公开发布、查看、使用和修改的软件。这一概念的核心在于开放性和共享性,允许开发者自由地使用、修改、分发以及改进软件。开源软件通常遵循特定的开源许可证,这些许可证确保了软件的自由使…

FastAPI在 Nginx 和 Docker 环境中的部署

目录 实现示例1. 项目结构2. FastAPI 应用 (app/main.py)3. 依赖文件 (app/requirements.txt)4. Dockerfile5. Nginx 配置 (nginx/nginx.conf)6. Docker Compose 配置 (docker-compose.yml) 使用方法修改代码后更新 实现示例 接下来创建一个简单的示例项目,展示如何…

计算机网络相关面试题

一、HTTP1.1和HTTP2的区别 HTTP/1(主要指 HTTP/1.1)和 HTTP/2 是 Web 协议发展中的两个重要版本,二者在性能、协议机制和功能特性上有显著差异。以下从多个维度对比分析,并结合具体案例说明: 一、连接与请求处理方式 1…

根据当前日期计算并选取上一个月和上一个季度的日期范围,用于日期控件的快捷选取功能

1.选择月份范围 代码如下&#xff1a; <el-date-picker v-model"value" type"monthrange" align"right" unlink-panels range-separator"至"start-placeholder"开始月份" end-placeholder"结束月份" :picker-…

【C++】set、map 容器的使用

文章目录 1. set 和 multiset 的使用1.1 set类的介绍1.2 set的构造和迭代器1.3 set 的增删查1.4 insert和迭代器调用示例1.5 find和erase使用示例1.6 multiset和set的差异 2. map 和 multimap 的使用2.1 map 类的介绍2.2 pair 类型介绍2.3 map 的构造和迭代器2.4 map 的增删查2…

【MySQL】第1节|全面理解MySQL架构

快速安装MySQL 使用Docker快速安装mysql8 docker run -d \ --name mysql8 \ --privilegedtrue \ --restartalways \ -p 13306:3306 \ -v /home/mysql8/data:/var/lib/mysql \ -v /home/mysql8/config:/etc/mysql/conf.d \ -v /home/mysql8/logs:/logs \ -e MYSQL_ROOT_PAS…

YOLOv8模型剪枝笔记(DepGraph和Network Slimming网络瘦身)

文章目录 一、DepGraph剪枝&#xff08;1&#xff09;项目准备1&#xff09;剪枝基础知识2&#xff09;DepGraph剪枝论文解读12&#xff09;DepGraph剪枝论文解读23&#xff09;YOLO目标检测系列发展史4&#xff09;YOLO网络架构 &#xff08;2&#xff09;项目实战&#xff08…

App Builder技术选型指南:从AI编程到小程序容器,外卖App开发实战

在2025年快速迭代的技术生态中&#xff0c;开发者构建App的路径愈发多样化。本文以开发一个同城外卖App为例&#xff0c;对比当前主流的AI编程工具&#xff08;如Cursor、GitHub Copilot、Trae&#xff09;与小程序容器技术&#xff08;如FinClip&#xff09;的优劣势、难易度及…

TDengine 高可用——三副本

概述 TDengine 的三副本方案采用 RAFT 算法来实现数据的一致性&#xff0c;包括元数据和时序数据。一个虚拟节点组&#xff08;VGroup&#xff09;构成了一个 RAFT 组&#xff1b;VGroup 中的虚拟节点&#xff08;Vnode&#xff09;&#xff0c;便是该 RAFT 组的成员节点&…

el-table高度自适应、数据查询后高度展示错误问题

在很多场景中我们需要实现表格的高度自适应&#xff0c;即不同屏幕大小下需要使用不同的高度来设置表格&#xff0c;那么我们应该如何实现呢&#xff1f; 1.el-table实现高度自适应 通过以下代码可以实现表格根据屏幕进行自适应 设置表格的高度 <el-table ref"tableD…

Java接口设计:ECharts热力图的绘制

引言 热力图是一种强大的数据可视化工具&#xff0c;通过颜色的深浅变化来直观展示数据密度和分布情况。在现代Web应用中&#xff0c;ECharts作为一款流行的开源数据可视化库&#xff0c;提供了丰富的图表类型&#xff0c;其中热力图因其直观的视觉效果而被广泛使用。本教程将…

深入理解 MongoDB 的 _id 和 ObjectId:从原理到实践

在 MongoDB 的世界中&#xff0c;_id 字段和 ObjectId 是每个开发者都必须理解的核心概念。作为 MongoDB 文档的唯一标识符&#xff0c;它们不仅影响着数据库的设计&#xff0c;也直接关系到应用的性能和扩展性。本文将全面剖析 _id 和 ObjectId 的工作原理、实际应用场景以及最…

【notepad++如何设置成中文界面呢?】

“Notepad”是一款非常强大的文本编辑软件&#xff0c;将其界面设置成中文的方法如下&#xff1a; 一、工具&#xff0f;原料&#xff1a; 华为 Matebook 15、Windows 10、Notepad 8.4.6。 二 、具体步骤&#xff1a; 1、找到任意一个文本文件&#xff0c;比如 txt 格式的文…

当AI遇上科研:北大“科学导航”重塑学术探索全流程

在人工智能技术迅猛发展的当下&#xff0c;一场悄然发生的变革&#xff0c;正在改变我们“做科研”的方式。近日&#xff0c;北京大学科学智能研究院联合深势科技&#xff0c;正式上线一款面向科研人员的一体化AI平台——Science Navigator&#xff08;科学导航&#xff09;。这…

PHP学习笔记(八)

目录 返回值 return的使用 多值返回的替代方案 可变函数 内部&#xff08;内置&#xff09;函数 匿名函数 静态匿名函数 返回值 值通过可选参数的返回语句返回 return的使用 函数不能返回多个值&#xff0c;但可以通过返回一个数组来得到类似的效果 函数返回一个引用&am…

C#中WSDL文件引用问题

工作中碰到一个单点登录的需求&#xff0c;因为这个需求同事别的系统已经做过&#xff0c;我这边只需要把代码迁移过来即可&#xff0c;但是迁移过程中发现引用WSDL文件后&#xff0c;方法报错的问题&#xff0c;各种排查代码之后未解决&#xff0c;最终发现是WSDL文件引用的问…

养生新策:五维开启健康生活

一、饮食&#xff1a;天然食材&#xff0c;科学配比 以 “原型食物” 为主&#xff0c;减少加工食品摄入。早餐用鹰嘴豆泥涂抹全麦面包&#xff0c;搭配水煮蛋和一小把蓝莓&#xff0c;兼顾蛋白质与抗氧化物质&#xff1b;午餐选择藜麦饭&#xff0c;配上香煎鸡胸肉和蒜蓉空心…