鸿蒙Flutter实战:09-现有Flutter项目支持鸿蒙

简介: 本文介绍了将现有Flutter项目适配鸿蒙系统的步骤。首先,根据[鸿蒙Flutter适配指南]搭建开发环境,并使用fvm管理多版本SDK。项目采用模块化设计,包括apps、common、components、modules和plugins等目录,分别对应不同功能模块。重点在于在apps目录下创建新的鸿蒙项目,逐步添加依赖并解决版本兼容性问题。最后,通过配置pubspec.yaml文件和特定插件的鸿蒙化适配,完成项目的编译与运行测试。

背景

原来使用Flutter开发的项目,需要适配鸿蒙。

环境搭建

见文章[鸿蒙Flutter适配指南],搭建开发环境,使用fvm管理多版本SDK。

模块化

原有项目保持模块化,拆分为 apps/common/components/modules/plugins等目录,如下所示:

.
├── README.md
├── analysis_options.yaml
├── melos.yaml
├── melos_ogw-flutter.iml
├── node_modules
├── packages
│   ├── README.md
│   ├── apps
│   │   ├── app
│   │   ├── dsm_app
│   │   ├── ohos_app
│   │   └── web
│   ├── common
│   │   ├── domains
│   │   ├── extensions
│   │   ├── services
│   │   └── widgets
│   ├── components
│   │   ├── image_uploader
│   │   ├── player
│   │   └── scroll_banner
│   ├── modules
│   │   ├── address
│   │   ├── community
│   │   ├── home
│   │   ├── invoice
│   │   ├── me
│   │   ├── message
│   │   ├── order
│   │   ├── shop
│   │   ├── support
│   │   ├── updater
│   └── plugins
│       ├── image_picker
│       ├── printer
├── pubspec.lock
├── pubspec.yaml
└── yarn.lock
  1. plugins 是依赖于原生平台的插件,

  2. components 是平台无关的组件,

  3. common 里面是领域对象,小组件,服务类,扩展等,平台无关,里面均为纯 Dart 代码。

  4. apps 是应用外套,通过组合不同的模块,向不同的平台打包。

  5. 使用 melos 管理多包仓库。

其中apps下的项目,则为需要打包成各平台,各app的入口项目。里面主要为项目配置代码,模块依赖配置,以及特定的平台适配代码。

在apps目录下新建鸿蒙项目,先把壳项目在鸿蒙中跑起来,确保没有问题。依次再添加依赖项,首先添加纯dart编写的包,再添加依赖于原生代码/插件的包。注意挨个添加依赖,不要一次添加太多依赖,方便排查定位问题,

解决版本依赖问题,鸿蒙Flutter项目目前需要依赖于3.7版本,如果原项目使用了更低的版本,则可将原项目SDK依赖升级至3.7;如果原项目SDK版本高于3.7,则有两种方案:一种是降级原项目SDK依赖为3.7;另外一种是使用多分支方案。

特定平台工程

在 apps 目录下新建一个项目,该项目运行鸿蒙平台适配和打包。

flutter create --platforms ohos ohos_app

目录结构如下所示:

.
├── README.md
├── analysis_options.yaml
├── assets
│   ├── icons
│   │   ├── 2.0x
│   │   ├── 3.0x
│   │   └── placeholder.png
│   └── images
│       ├── 2.0x
│       └── 3.0x
├── build
│   ├── ...
├── env
├── lib
│   ├── config
│   │   ├── easy_refresh.dart
│   │   ├── routes.dart
│   │   └── theme.dart
│   └── main.dart
├── ohos
│   ├── AppScope
│   │   ├── app.json5
│   │   └── resources
│   ├── build-profile.json5
│   ├── entry
│   │   ├── build
│   │   ├── build-profile.json5
│   │   ├── hvigorfile.ts
│   │   ├── oh-package-lock.json5
│   │   ├── oh-package.json5
│   │   ├── oh_modules
│   │   └── src
│   ├── har
│   │   ├── ...
│   ├── hvigor
│   │   └── hvigor-config.json5
│   ├── hvigorfile.ts
│   ├── local.properties
│   ├── oh-package-lock.json5
│   ├── oh-package.json5
│   └── oh_modules
│       └── ...
├── pubspec.lock
└── pubspec.yaml

可以看到,该项目只是一个壳工程,没有太多代码,主要为项目的一些特定配置,如主题、路由等,以及App入口初始化配置。

编辑 pubspec.yaml 文件,添加组件和模块依赖。

environment:
  sdk: '>=2.19.6 <3.0.0'
dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  # 下拉刷新
  easy_refresh: ^3.0.4+2
  flutter_dotenv: ^5.1.0
  go_router: ^6.0.0

  # 领域对象
  domains:
    path: '../../common/domains'
  services:
    path: '../../common/services'
  widgets:
    path: '../../common/widgets'
  address:
    path: '../../modules/address'
  support:
    path: '../../modules/support'
  me:
    path: '../../modules/me'
  message:
    path: '../../modules/message'
  order:
    path: '../../modules/order'
  shop:
    path: '../../modules/shop'
  home:
    path: '../../modules/home'

配置对特定插件进行鸿蒙化适配

部分第三方插件以及插件依赖的其他库,如果没有适配鸿蒙,则可以通过 override配置鸿蒙化的版本

dependency_overrides:
  # ohos
  path_provider:
    git:
      url: "https://gitee.com/openharmony-sig/flutter_packages.git"
      path: "packages/path_provider/path_provider"

编译运行

运行 Flutter 项目,查看相关日志和运行界面,针对出现的问题再单独处理。

查看日志,可以在运行Flutter处的IDE调试控制台查看 Flutter 项目日志,可以使用 hdc hilog 命令或DevEco 查看系统日志。

目录
相关文章
|
1天前
|
开发者
HarmonyOS NEXT 实战系列09-生命周期
页面与组件生命周期介绍:页面生命周期(@Entry装饰)包含onPageShow、onPageHide、onBackPress等接口,分别在页面显示、隐藏和返回按钮点击时触发;组件生命周期(@Component装饰)包含aboutToAppear和aboutToDisappear,在组件创建与销毁时回调。示例代码展示了生命周期函数的使用场景及执行时机,帮助开发者更好地管理页面和组件状态。
HarmonyOS NEXT 实战系列09-生命周期
|
1天前
|
JSON 前端开发 JavaScript
HarmonyOS NEXT 实战系列10-网络通信
本文介绍了网络通信相关知识,包括HTTP协议的工作原理、鸿蒙系统中HTTP模块的使用方法、Promise异步操作处理机制及async/await语法糖的应用,以及JSON数据格式的语法规则与转换方法。重点讲解了HTTP请求响应流程、鸿蒙开发中的网络权限申请与代码实现、Promise三种状态及创建方式,并通过示例说明异步编程技巧和JSON在数据传递中的应用。
24 10
|
23天前
|
存储 人工智能 编译器
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
50 10
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
|
1天前
|
IDE API 开发工具
HarmonyOS NEXT-Flutter混合开发之鸿蒙-代码实践
本文介绍了在Flutter三端分离模式下,将纯血鸿蒙混入Flutter项目的实践经验。基于咸鱼团队的flutter_boost和自定义FlutterPlugin实现,涵盖环境搭建、Flutter模块创建、flutter_boost集成、鸿蒙侧适配、双端通信及原生调用等内容。详细说明了Flutter与鸿蒙间的页面跳转、数据传递及方法调用的实现方式,为开发者提供参考。总结指出,通过管理页面栈和实现双端交互,可满足常规开发需求。
|
20天前
|
前端开发 JavaScript 开发工具
【04】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-正确安装鸿蒙SDK-结构目录介绍-路由介绍-帧动画(ohos.animator)书写介绍-能够正常使用依赖库等-ArkUI基础组件介绍-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
【04】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-正确安装鸿蒙SDK-结构目录介绍-路由介绍-帧动画(ohos.animator)书写介绍-能够正常使用依赖库等-ArkUI基础组件介绍-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
98 5
【04】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-正确安装鸿蒙SDK-结构目录介绍-路由介绍-帧动画(ohos.animator)书写介绍-能够正常使用依赖库等-ArkUI基础组件介绍-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
|
1天前
|
5G API
HarmonyOS NEXT 实战系列-综合案例新闻页
本示例展示了如何通过 `ForEach` 遍历数据并结合 HTTP 请求动态渲染新闻列表。首先定义了 `News` 接口描述数据结构,接着在组件中使用 `List` 和 `ForEach` 渲染新闻项,包含标题、来源、评论数、时间和图片等信息。同时,通过 `http.createHttp()` 获取远程数据并更新列表。代码结构清晰,适配动态数据展示需求。
|
1天前
|
JavaScript 开发者
HarmonyOS NEXT 实战系列01-ArkTS基础
ArkTS是HarmonyOS应用开发的首选语言,基于TypeScript扩展而成,保留了TS风格并强化静态检查与分析能力,提升程序稳定性和性能。它支持声明式UI开发、状态管理等功能,简化应用构建。语法涵盖变量、常量、数组、对象、语句(如if、switch)、函数(含箭头函数与泛型)、类和模块等特性,同时提供联合类型、字面量联合类型及枚举类型等丰富类型支持,助力开发者高效编写高质量代码。
|
1天前
|
程序员
HarmonyOS NEXT 实战系列05-案例回关粉丝
本文介绍了一个基于HarmonyOS的组件化设计案例,通过提取 `FansItemComp` 组件实现复用,使用 `@Prop` 动态接收数据渲染UI。示例中包含关注与互关功能:父组件 `TestPage` 提供粉丝列表数据,封装 `getFansAndFollowCount` 方法统计互关人数;子组件通过按钮交互更新关注状态,并利用 `onChange` 回调通知父组件同步数据变化。代码结构清晰,展示了组件间通信及动态渲染的实现方式。
|
1天前
|
程序员
HarmonyOS NEXT 实战系列03-案例粉丝列表
本文通过一个案例展示了使用 Interface 定义对象类型约束、华为资源类型 Resource、数组类型 FansItem[] 的定义,以及通过 ForEach 实现循环渲染和 @Extend 扩展组件属性的方法。代码实现了一个列表界面,包含头像、名称、标题和关注按钮,按钮样式根据是否已关注动态变化。此示例未涉及动态交互,后续文章将补充相关内容。
|
1天前
|
开发框架 缓存 自然语言处理
HarmonyOS ArkTS声明式UI开发实战教程
本文深入探讨了ArkTS作为HarmonyOS生态中新一代声明式UI开发框架的优势与应用。首先对比了声明式与命令式开发的区别,展示了ArkTS如何通过直观高效的代码提升可维护性。接着分析了其核心三要素:数据驱动、组件化和状态管理,并通过具体案例解析布局体系、交互组件开发技巧及复杂状态管理方案。最后,通过构建完整TODO应用实战,结合调试优化指南,帮助开发者掌握声明式UI设计精髓,感受ArkTS的独特魅力。文章鼓励读者通过“破坏性实验”建立声明式编程思维,共同推动HarmonyOS生态发展。
19 3

热门文章

最新文章