引言
在之前的文章鴻蒙Flutter實(shí)戰(zhàn)：09-現(xiàn)有Flutter項目支持鴻蒙中，介紹了如何改造項目，適配鴻蒙平臺。
文中講述了整體的理念和思路，本文更進(jìn)一步，結(jié)合可實(shí)操的項目代碼，詳細(xì)說明如何實(shí)施。
通過模塊化、鴻蒙殼工程，結(jié)合 FVM 管理多版本 Flutter SDK，最終，保持原 Flutter 代碼純凈，最小化修改，完成了鴻蒙化的適配示例。
本項目代碼地址: https://gitee.com/zacks/flutter-ohos-demo
準(zhǔn)備工作
1.安裝 FVM
dart pub global activate melos
2.使用 FVM 安裝 Flutter SDK
分別安裝官方的3.22版本，以及鴻蒙社區(qū)的 3.22.0 版本
3.搭建 Flutter鴻蒙開發(fā)環(huán)境
參考文章《鴻蒙Flutter實(shí)戰(zhàn)：01-搭建開發(fā)環(huán)境》
搭建項目架構(gòu)
創(chuàng)建目錄
# 創(chuàng)建項目目錄
mkdir flutter-ohos-demo
設(shè)置使用的 Flutter SDK 版本
推薦在 VsCode 的命令行中執(zhí)行以下命令，這將創(chuàng)建 .fvm 目錄, .vscode/setting.json 文件, 和.fvmrc 文件
fvm use 3.22.0
初始化工作區(qū)間
創(chuàng)建目錄，項目結(jié)構(gòu)如下所示：
.
├── packages
│ ├── apps #該目錄用于存放各端應(yīng)用殼工程
│ ├── common #該目錄用于存放公共庫，均為純 dart 代碼，不依賴于 ios/android 等原生實(shí)現(xiàn)
│ │ ├── domains #領(lǐng)域?qū)ο?，存放各類?shí)體文件，如枚舉/模型/vo/事件等
│ │ ├── extensions #存放擴(kuò)展類文件，對于類的擴(kuò)展方法/屬性
│ │ ├── services #服務(wù)類：如請求服務(wù)/授權(quán)服務(wù)/緩存服務(wù)/平臺調(diào)用服務(wù)/路由服務(wù)/工具類等
│ │ └── widgets #通用小型 widgets, 純dart編寫的 Flutter UI 組件
│ ├── components #封裝組件庫，可以依賴于第三方庫/第三方插件，或依賴于 plugins中的插件
│ │ ├── image_uploader
│ │ └── player
│ ├── modules
│ │ ├── address
│ │ ├── home
│ │ ├── me
│ │ ├── message
│ │ ├── order
│ │ ├── shop
│ │ └── support
│ └── plugins #插件庫，自行封裝的插件庫，依賴于原生平臺(ios/android)的代碼
│ └── printer
├── README.md
├── melos.yaml
└── pubspec.yaml
運(yùn)行 melos bootstrap
melos bootstrap
開始編寫代碼
在各個 package 初始化代碼，如在 packages/common/domains 目錄運(yùn)行
fvm flutter create --template package .
創(chuàng)建殼工程
新建兩個殼工程，一個為 app，另外一個為 ohos_app
App 殼工程
進(jìn)入 package/apps/app 目錄, 創(chuàng)建 app 項目，該項目為一個 App 項目，用于各平臺（ios/android/mac 等， 不包含鴻蒙）打包
fvm flutter create --template app --org com.moguyun.flutter app
增加依賴項
修改 pubspec.yaml，添加以下內(nèi)容
services:
path: '../../common/services'
domains:
path: '../../common/domains'
widgets:
path: '../../common/widgets'
home:
path: '../../modules/home'
me:
path: '../../modules/me'
support:
path: '../../modules/support'
安裝依賴
運(yùn)行以下命令，安裝依賴
fvm flutter pub get
鴻蒙殼工程
切換鴻蒙 Flutter SDK
首先在 flutter-ohos-demo 項目根目錄，將 Flutter 版本切換到鴻蒙化的版本
fvm use custom_3.22.0
SDK 變更以后，需要重啟 IDE (或者 Dart：Restart Analysis Server)，以便讓 Flutter 插件重啟
創(chuàng)建 ohos_app 項目
進(jìn)入 packages/apps 目錄，創(chuàng)建 ohos_app 項目
fvm flutter create --template app --platforms ohos --org com.moguyun.flutter ohos_app
增加依賴項
進(jìn)入 packages/apps/ohos_app 目錄中的 pubspec.yaml, 同樣增加依賴項
services:
path: '../../common/services'
domains:
path: '../../common/domains'
widgets:
path: '../../common/widgets'
home:
path: '../../modules/home'
me:
path: '../../modules/me'
support:
path: '../../modules/support'
三方庫鴻蒙化適配
編輯 pubspec.yaml文件，增加以下配置，通過 dependency_overrides 來替換鴻蒙化的三方庫，注意鴻蒙化的庫與原庫，保持版本統(tǒng)一
# 鴻蒙適配
dependency_overrides:
flutter_inappwebview:
git:
url: https://gitee.com/openharmony-sig/flutter_inappwebview.git
path: "flutter_inappwebview"
每次修改完 pubspec.yaml，使用
fvm flutter pub get更新下依賴安裝。
運(yùn)行調(diào)試
用 Deveco 打開apps/ohos_app/ohos 目錄。
在 Deveco 左上角 打開 File -> Project Structure..., 點(diǎn)擊 Siging Configs, 勾選 Automatically generate signature, 對鴻蒙項目簽名。
在 ohos_app 目錄下，使用 fvm flutter run，或者點(diǎn)擊運(yùn)行按鈕，運(yùn)行flutter項目。
注意事項
melos.yaml 文件中的
sdkPath: .fvm/flutter_sdk配置了 melos 使用的 flutter SDK 版本，即由FVM 配置的當(dāng)前項目版本每次切換 Flutter SDK 時，都會修改文件 .fvm/, vscode/settings.json 文件
ohos_app/pubsec.yaml 中的 dependency_overrides, 僅添加需要鴻蒙化的三方庫
ohos-3.22 在 build 時，有的 har 包可能確實(shí)，建議保持 ohos-Flutter 版本最新，如果還是不行，可以考慮手動復(fù)制 har 包（使用 3.7 構(gòu)建出來）
如何判斷三方庫是否需要鴻蒙化，簡而言之，如果三方庫由純 Dart 實(shí)現(xiàn)，則不需要單獨(dú)適配，直接使用；如果三方庫依賴系統(tǒng)底層實(shí)現(xiàn)，則需要鴻蒙化適配。
三方庫的適配情況，可以查詢 Gitee/Github，或者查閱表格 Flutter三方庫適配計劃
- 已知插件刪除問題，如果刪除插件，可能需要在ohos里面手動修改代碼，移除相關(guān)依賴
ohos/oh-package.json5
應(yīng)用截圖
總結(jié)
- 通過 FVM 管理多個 Flutter SDK 版本，僅在鴻蒙調(diào)測打包時，切換到 ohos-flutter SDK
- 通過 apps 殼工程，將鴻蒙化適配的代碼，盡量在 ohos_app 項目中完成。通過 pub 包管理的
dependency_overrides配置，逐個替換鴻蒙化的三方庫 - 通過 melos 管理多包項目，F(xiàn)lutter 項目進(jìn)行模塊化、組件化、插件化拆分，職責(zé)分離，平臺抽象，不同平臺組合打包，有效解決平臺不一致問題
