鸿蒙 Flutter 实战：现有 Flutter 项目支持鸿蒙
背景
原来使用 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
复制代码
plugins 是依赖于原生平台的插件，
components 是平台无关的组件，
common 里面是领域对象，小组件，服务类，扩展等，平台无关，里面均为纯 Dart 代码。
apps 是应用外套，通过组合不同的模块，向不同的平台打包。
使用 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 查看系统日志。
评论