HarmonyOS(Flutter)

最近更新时间:2025-04-01 15:44:02

我的收藏

功能概述

Flutter 海外版的 UIKit 支持鸿蒙(HarmonyOS NEXT)平台,基于鸿蒙系统支持的 Flutter 3.22 版本开发。

环境要求

环境
版本
Flutter
鸿蒙系统支持的 Flutter 版本 3.22.1-0.0.pre.32,Dart 3.4.0 版本

源码集成

1. 从 Github 上下载 UIKit 源码,让组件与自己的工程文件夹同级,例如:

2. 在项目根目录中(如示例中的 MyApplication)创建鸿蒙平台。
flutter create --platforms ohos .
# OR (using FVM)
# fvm flutter create --platform oho .
注意:
不要忘记后面的符号点“.”,该符号指当前目录。
3. 添加 UIKit 组件以及第三方库的依赖。
在项目根目录下的 pubspec.yaml 中依赖本地的组件库如下:
dependencies:
flutter:
sdk: flutter
tencent_cloud_chat_common:
path: ../TIMCommon
tencent_cloud_chat_intl:
path: ../TUIInternational
tencent_cloud_chat_conversation:
path: ../TUIConversation
tencent_cloud_chat_message:
path: ../TUIMessage
tencent_cloud_chat_contact:
path: ../TUIContact
tencent_cloud_chat_sticker:
path: ../TUIEmoji
tencent_cloud_chat_message_reaction:
path: ../TUIEmojiPlugin
tencent_cloud_chat_search:
path: ../TUISearch
tencent_cloud_chat_text_translate:
path: ../TUITranslationPlugin
tencent_cloud_chat_sound_to_text:
path: ../TUIVoiceToTextPlugin
tencent_cloud_chat_push: ^8.4.6667
依赖重写 UIKit 使用的且鸿蒙官方已经适配的第三方库如下:
dependency_overrides:
path_provider:
git:
url: "https://gitee.com/openharmony-sig/flutter_packages.git"
path: "packages/path_provider/path_provider"
shared_preferences:
git:
url: "https://gitee.com/openharmony-sig/flutter_packages.git"
path: "packages/shared_preferences/shared_preferences"
file_picker_ohos:
git:
url: "https://gitee.com/openharmony-sig/fluttertpc_file_picker.git"
path: "ohos"
image_picker:
git:
url: "https://gitee.com/openharmony-sig/flutter_packages.git"
path: "packages/image_picker/image_picker"
permission_handler:
git:
url: "https://gitee.com/openharmony-sig/flutter_permission_handler.git"
path: "permission_handler"
video_thumbnail_ohos:
git:
url: "https://gitee.com/openharmony-sig/fluttertpc_video_thumbnail.git"
path: "ohos"
record:
git:
url: "https://gitee.com/openharmony-sig/fluttertpc_record.git"
path: "record"
audioplayers:
git:
url: "https://gitee.com/openharmony-sig/flutter_audioplayers.git"
path: "packages/audioplayers"
video_player:
git:
url: "https://gitee.com/openharmony-sig/flutter_packages.git"
path: "packages/video_player/video_player"
# extended_text 和 extended_text_field 需要替换为 Flutter 3.22 适配的版本
extended_text: ^13.0.0
extended_text_field: ^15.0.0
4. 由于第三方库 extended_text_field 中判断平台使用的 switch case 语句没有加 default 导致在鸿蒙上编译报错:

需要本地修改下 extended_text_field 的代码逻辑。首先找到报错的库位置,建议用 VS Code 打开 extended_text_field-15.0.0 文件夹:

搜索并替换 switch case 出现的地方。
4.1 搜索框(选择正则表达式)填正则表达式:
^( +?)case TargetPlatform.android:
替换框填:
$1case TargetPlatform.android:
$1case TargetPlatform.ohos:
替换后的效果:

4.2 搜索框(右边选择全字匹配)填:
TargetPlatform.android ||
替换框填:
TargetPlatform.android || TargetPlatform.ohos ||
替换后的效果:

5. 修改完后,执行下 flutter pub get,然后再编译运行到真机上。
注意:
建议使用鸿蒙系统真机测试。