鸿蒙-flutter 混合开发

步骤

  • flutter create --template =module my_flutter_module
  • 签名 模拟器或真机
  • flutter build har --debug
  • 新建ohos_app工程
  • 导入Har包
  • 修改配置文件: /oh-package.json5
  • 修改配置文件: /entry/oh-package.json5
  • 修改文件: EntryAbility, FlutterContainerPage,Index
  • 签名运行真机

脚本

js 复制代码
flutter create --template=module my_flutter_module
flutter clean
flutter pub get
flutter build har --debug

oh-package.json5

json 复制代码
"overrides": {
  "@ohos/flutter_ohos": "file:./har/flutter_embedding_debug.har",
  "flutter_native_arm64_v8a": "file:./har/arm64_v8a_debug.har",
  "@ohos/flutter_module": "file:./har/flutter_module.har",
}

entry/oh-package.json5

json 复制代码
"dependencies": {
  "@ohos/flutter_ohos": "file:../har/flutter_embedding_debug.har",
  "flutter_native_arm64_v8a": "file:../har/arm64_v8a_debug.har",
  "@ohos/flutter_module": "file:../har/flutter_module.har"
}

EntryAbility

java 复制代码
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);
  }
}

index

java 复制代码
import { router } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('Hello World').fontSize('50fp').fontWeight(FontWeight.Bold)
      Blank().height(80)
      Button('跳转Flutter').onClick(() => {
        router.pushUrl({ url: 'pages/FlutterContainerPage'})
      })
    }.justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
    .width('100%')
    .height('100%')
  }
}

FlutterContainerPage

java 复制代码
import { FlutterEntry, FlutterPage, FlutterView } from '@ohos/flutter_ohos'

@Entry
@Component
struct FlutterContainerPage {

  private flutterEntry?: FlutterEntry;
  private flutterView?: FlutterView;

  aboutToAppear() {
    this.flutterEntry = new FlutterEntry(getContext(this));
    this.flutterEntry.aboutToAppear();
    this.flutterView = this.flutterEntry.getFlutterView();
  }

  aboutToDisappear() {
    this.flutterEntry?.aboutToDisappear();
  }

  onPageShow() {
    this.flutterEntry?.onPageShow();
  }

  onPageHide() {
    this.flutterEntry?.onPageHide();
  }

  build() {
    RelativeContainer() {
      FlutterPage({ viewId: this.flutterView?.getId()})
    }
  }
}
相关推荐
特立独行的猫a3 小时前
HarmonyOS应用开发之界面列表不刷新问题Bug排查记:从现象到解决完整记录
华为·bug·harmonyos·ui刷新
安卓开发者5 小时前
鸿蒙Next的UI国际化与无障碍适老化实践:构建全球包容的数字世界
ui·华为·harmonyos
爱笑的眼睛1118 小时前
深入剖析 HarmonyOS ArkUI 声明式开发:状态管理艺术与最佳实践
华为·harmonyos
安卓开发者19 小时前
鸿蒙NEXT交互机制解析:从输入设备到手势响应的全面指南
microsoft·交互·harmonyos
奶糖不太甜。21 小时前
鸿蒙分布式数据同步失败全解
分布式·华为·harmonyos·数据同步
小小小小小星2 天前
鸿蒙权限相关问题之应用访问网络、文件等功能时崩溃或无响应,日志提示'权限被拒绝'
harmonyos
leon_teacher2 天前
ArkUI核心功能组件使用
android·java·开发语言·javascript·harmonyos·鸿蒙
lisir92 天前
鸿蒙手势实战解析+手势冲突解决策略总结
harmonyos
安卓开发者2 天前
鸿蒙Next图形绘制指南:从基础几何图形到复杂UI设计
ui·华为·harmonyos