发帖
手机端
扫码访问
 立即注册
 登录
切换到窄版
聚聚慧»社区 › 技术 › 鸿蒙 › HarmonyOS NEXT-Flutter 混合开发之鸿蒙 - 代码实践 ...
返回列表 发新帖
查看: 113|回复: 0

HarmonyOS NEXT-Flutter 混合开发之鸿蒙 - 代码实践

[复制链接]
fjord

3

主题

2

回帖

20

积分

新手上路

积分
20
发表于 2025-4-1 08:53:24 | 显示全部楼层 |阅读模式
在 Flutter 三端分离模式下完成纯血鸿蒙混入的过程中，虽然官方文档提供了一定的指导，但实际操作中可能会遇到一些坑。以下是我在适配过程中的一些经验总结，供各位开发者参考 😄 如果有帮助点个赞。
在混入过程中是基于咸鱼团队 flutter_boost（这里不讨论和其他方案的差别） 和自定义 FlutterPlugin 实现的。
主要涉及内容：
    环境搭建Flutter module 创建Futter 引入 flutter_boostHarmony 引入 flutter_boostFlutter 与鸿蒙侧通信Flutter 调用鸿蒙原生
环境搭建

    Fluter 环境
准备支持鸿蒙的 Flutter 开发环境，flutter_fluter 仓库基于 Flutter SDK 对于 OpenHarmony 平台的兼容拓展，可支持 IDE 或者终端使用 Flutter Tools 指令编译和构建 OpenHarmony 应用程序。
    Harmonyos NEXT 环境
不再赘述，上链接。
Flutter module 创建

创建 Fluter 项目
  1. flutter create -t module --org xyz.zhousg demo_fluter
复制代码
打包 Fluter 项目
  1. flutter build har --debug
复制代码
Fluter 引入 flutter_boost

    安装依赖
  1. dependencies:
  2.   flutter:
  3.     sdk: flutter
  5.   # The following adds the Cupertino Icons font to your application.
  6.   # Use with the CupertinoIcons class for iOS style icons.
  7.   cupertino_icons: ^1.0.2
  8.   fl_chart: ^0.62.0
  9.   flutter_boost:
  10. +    git:
  11. +        url: 'https://github.com/alibaba/flutter_boost.git'
  12. +        ref: '4.6.5'
复制代码
    配置路由表
  1. import 'package:flutter/cupertino.dart';
  2. import 'package:flutter/material.dart';
  3. import 'package:flutter_boost/flutter_boost.dart';
  5. // 1. 创建一个自定义的Binding，继承和with的关系如下，里面什么都不用写
  6. class CustomFlutterBinding extends WidgetsFlutterBinding
  7.     with BoostFlutterBinding {
  8.    }
  10. void main() {
  12.   // 2. 这里的CustomFlutterBinding调用务必不可缺少，用于控制Boost状态的resume和pause
  13.   CustomFlutterBinding();
  14.   runApp(const MyApp());
  15. }
  17. class MyApp extends StatefulWidget {
  19.   const MyApp({
  20.    super.key});
  22.   @override
  23.   State createState() => _MyAppState();
  24. }
  26. class _MyAppState extends State {
  28.   // 3. 路由表
  29.   Map routerMap = {
  31.     'SettingsPage': (settings, isContainerPage, uniqueId) {
  33.       return CupertinoPageRoute(
  34.         settings: settings,
  35.         builder: (BuildContext ctx) {
  37.           return const Placeholder();
  38.         },
  39.       );
  40.     },
  41.     'DeviceStoragePage': (settings, isContainerPage, uniqueId) {
  43.       return CupertinoPageRoute(
  44.         settings: settings,
  45.         builder: (BuildContext ctx) {
  47.           return const Placeholder();
  48.         },
  49.       );
  50.     },
  51.     'AboutPage': (settings, isContainerPage, uniqueId) {
  53.       return CupertinoPageRoute(
  54.         settings: settings,
  55.         builder: (BuildContext ctx) {
  57.           return const Placeholder();
  58.         },
  59.       );
  60.     },
  61.     '/': (settings, isContainerPage, uniqueId) {
  63.       return CupertinoPageRoute(
  64.         settings: settings,
  65.         builder: (BuildContext ctx) {
  67.           return const Placeholder();
  68.         },
  69.       );
  70.     },
  71.   };
  73.   // 路由工厂函数
  74.   Route routeFactory(
  75.       RouteSettings settings, bool isContainerPage, String? uniqueId) {
  77.     FlutterBoostRouteFactory? fn = routerMap[settings.name];
  78.     if (fn == null) {
  80.       throw FlutterError(
  81.           'Route "${ settings.toString()}" is not defined in routerMap.');
  82.     }
  83.     return fn(settings, isContainerPage, uniqueId)!;
  84.   }
  86.   @override
  87.   Widget build(BuildContext context) {
  89.     // flutter_boost 接管
  90.     return FlutterBoostApp(
  91.       routeFactory,
  92.       // Flutter 侧直接预览需要，需要使用 Deveco Studio 导入 .ohos 项目进行自动签名预览至鸿蒙设备
  93.       initialRoute: 'SettingsPage',
  94.       appBuilder: (home) {
  96.         return MaterialApp(
  97.           builder: (context, child) => home,
  98.         );
  99.       },
  100.     );
  101.   }
  102. }
复制代码
Harmony 引入 flutter_boost

这里使用的是 router + FlutterPage 方式展示 Flutter 界面，Navigation 后续再说吧～
a. 先打包 Fluter 项目，会生成三个产物
  1. .ohos
  2.    |--har
  3.        |-- fluter_boost.har
  4.        |-- fluter_module.har
  5.        |-- fluter.har
复制代码
b. 在鸿蒙项目中，引入依赖
oh-package.json5
  1. "dependencies": {
  2.   "@ohos/flutter_module": "file:../demo_flutter/.ohos/har/flutter_module.har",
  3.   // 下面两个依赖我直接拷贝到了 libs 下
  4.   "@ohos/flutter_ohos": "file:./libs/flutter.har",
  5.   "flutter_boost": "file:./libs/flutter_boost.har"
  6. },
  7. "overrides": {
  8.   "@ohos/flutter_ohos": "file:./libs/flutter.har",
  9.   "flutter_boost": "file:./libs/flutter_boost.har"
  10. },
复制代码
c. 初始化 flutter_boost
entryAbility.ets
  1. import { AbilityConstant, ConfigurationConstant, UIAbility, Want } from '@kit.AbilityKit';
  2. import { router } from '@kit.ArkUI';
  3. import { FlutterManager } from '@ohos/flutter_ohos';
  4. import { FlutterBoostDelegate, FlutterBoostRouteOptions, FlutterBoost, FlutterBoostSetupOptionsBuilder } from 'flutter_boost';
  5. import { GeneratedPluginRegistrant } from '@ohos/flutter_module';
  8. export default class EntryAbility extends UIAbility implements  FlutterBoostDelegate{
  9.   pushNativeRoute(options: FlutterBoostRouteOptions): void {
  10.     // throw new Error('Method not implemented.');
  11.   }
  13.   pushFlutterRoute(options: FlutterBoostRouteOptions,): void {
  14.     // throw new Error('Method not implemented.');
  15.   }
  17.   popRoute(options: FlutterBoostRouteOptions): boolean {
  18.     // throw new Error('Method not implemented.');
  19.     router.back()
  20.     return true
  21.   }
  23.   async onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) {
  24.     FlutterManager.getInstance().pushUIAbility(this);
  25.   }
  27.   onDestroy(): void {
  28.     FlutterManager.getInstance().popUIAbility(this);
  29.   }
  31.   onWindowStageCreate(windowStage: window.WindowStage): void {
  32.     // Flutter bind in UIAbility
  33.     FlutterManager.getInstance().pushWindowStage(this, windowStage);
  34.     // Initial FlutterBoost
  35.     const optionsBuilder: FlutterBoostSetupOptionsBuilder = new FlutterBoostSetupOptionsBuilder()
  36.     FlutterBoost.getInstance().setup(this, this.context, (engine) => {
  37.       GeneratedPluginRegistrant.registerWith(engine)
  38.     }, optionsBuilder.build())
  40.     windowStage.loadContent('pages/Index');
  41.   }
  43.   onWindowStageDestroy(): void {
  44.     FlutterManager.getInstance().popWindowStage(this);
  45.   }
  47.   onForeground(): void {
  48.     logger.info('Ability onForeground');
  49.   }
  51.   onBackground(): void {
  52.     logger.info('Ability onBackground');
  53.   }
  54. }
复制代码
这里部分代码省略了～pushNativeRoute pushFlutterRoute popRoute 具体实现还是参考官方仓库
d. Flutter 容器与跳转
    FlutterPage 承载 Flutter 的页面
pages/FluterPage.ets
  1. import {
  2.     FlutterEntry, FlutterPage, FlutterView} from '@ohos/flutter_ohos';
  3. import {
  4.     FlutterBoost, FlutterBoostEntry } from 'flutter_boost';
  5. import {
  6.     router } from '@kit.ArkUI';
  8. @Entry
  9. @Component
  10. struct SettingsPage {
  12.   private flutterEntry?: FlutterEntry;
  13.   private flutterView?: FlutterView
  15.   aboutToAppear() {
  17.     this.flutterEntry = new FlutterBoostEntry(getContext(this), router.getParams())
  18.     this.flutterEntry?.aboutToAppear()
  19.     this.flutterView = this.flutterEntry?.getFlutterView()
  20.   }
  22.   aboutToDisappear() {
  24.     this.flutterEntry?.aboutToDisappear()
  25.   }
  27.   onPageShow() {
  29.     this.flutterEntry?.onPageShow()
  30.   }
  32.   onPageHide() {
  34.     this.flutterEntry?.onPageHide()
  35.   }
  37.   onBackPress(): boolean | void {
  39.     FlutterBoost.getInstance()
  40.       .getPlugin()?.onBackPressed();
  41.     return true;
  42.   }
  44.   build() {
  46.     Column() {
  48.       FlutterPage({
  49.     viewId: this.flutterView?.getId() })
  50.         .width('100%')
  51.         .height('100%')
  52.     }
  53.     .width('100%')
  54.     .height('100%')
  55.   }
  56. }
复制代码
    在 Index 中的跳转
pages/Index.ets
  1. // uri Flutter Module 中的路由表 KEY params 是传参
  2. router.pushUrl({
  3.     url: 'pages/FlutterPage', params: {
  4.     uri: 'DeviceStoragePage', params: {
  5.    } } })
  6. router.pushUrl({
  7.     url: 'pages/FlutterPage', params: {
  8.     uri: 'SettingPage', params: {
  9.    } } })
  10. router.pushUrl({
  11.     url: 'pages/FlutterPage', params: {
  12.     uri: 'AboutPage', params: {
  13.    } } })
复制代码
Flutter 与鸿蒙侧通信

    Flutter 侧
  1. TextButton(
  2.     onPressed: () {
  4.       Map data = {
  5.    'name': 'jack'};
  6.       BoostChannel.instance.sendEventToNative('updateUser', data);
  7.     },
  8.     child: const Text('发送消息'),
  9.   ),
复制代码
    鸿蒙侧
pages/FlutterPage.ets
  1. aboutToAppear() {
  3.   this.flutterEntry = new FlutterBoostEntry(getContext(this), router.getParams())
  4.   this.flutterEntry?.aboutToAppear()
  5.   this.flutterView = this.flutterEntry?.getFlutterView()
  7.   const plugin = FlutterBoost.getInstance()
  8.     .getPlugin()
  9.   if (plugin) {
  11.     // 通信
  12.     plugin.addEventListener('updateUser', {
  14.       onEvent: (key, args) => {
  16.         // logger.debug(`事件名称 ${key}`, JSON.stringify(args))
  17.         promptAction.showToast({
  18.     message: 'Flutter Data: ' + JSON.stringify(args) })
  19.       }
  20.     })
  21.   }
复制代码
Flutter 调用鸿蒙原生

    Flutter 侧
  1. final _platform = const MethodChannel('xyz.zhousg.interview_success_project');
复制代码
  1. TextButton(
  2.     onPressed: () {
  4.       _platform.invokeMethod('openCamera').then(
  5.             (value) => setState(() {
  7.               // value 鸿蒙侧回传数据
  8.             }),
  9.           );
  10.     },
  11.     child: Text('打开相机),
  12. ),
复制代码
    鸿蒙侧
定义 Flutter 插件
NativePlugin.ets
  1. import {
  2.     FlutterPlugin, FlutterPluginBinding, MethodChannel, MethodResult } from '@ohos/flutter_ohos';
  4. export class NativePlugin implements FlutterPlugin {
  6.   private channel?: MethodChannel;
  8.   getUniqueClassName(): string {
  10.     return 'CameraPlugin'
  11.   }
  13.   onAttachedToEngine(binding: FlutterPluginBinding): void {
  15.     this.channel = new MethodChannel(binding.getBinaryMessenger(), 'xyz.zhousg.interview_success_project')
  16.     this.channel.setMethodCallHandler({
  18.       onMethodCall: (call, result) => {
  20.         switch (call.method) {
  22.           case "openCamera":
  23.             this.openCamera(result)
  24.             break;
  25.           default:
  26.             result.notImplemented()
  27.             break;
  28.         }
  29.       }
  30.     })
  31.   }
  33.   onDetachedFromEngine(binding: FlutterPluginBinding): void {
  35.     this.channel?.setMethodCallHandler(null);
  36.   }
  39.   // native api
  40.   openCamera (result: MethodResult) {
  42.     // 回传数据给 Flutter
  43.     result.success('http://test.png')
  44.   }
  45. }
复制代码
注册插件
entryAbility.ets
  1. // Initial FlutterBoost
  2. const optionsBuilder: FlutterBoostSetupOptionsBuilder = new FlutterBoostSetupOptionsBuilder()
  3. FlutterBoost.getInstance().setup(this, this.context, (engine) => {
  5.   GeneratedPluginRegistrant.registerWith(engine)
  6.   // 打开相机
  7.   engine.getPlugins()?.add(new NativePlugin())
  8. }, optionsBuilder.build())
复制代码
总结

使用 flutter_boost 开发 Flutter 混合项目，在鸿蒙这边和混合 Web 组件进行混合开发很相似，搞定 Flutter 页面栈 + 鸿蒙页面栈跳转，搞定数据通信和原生调用，基本可以满足一般的开发，以上这里仅供参考哈～
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表