少湖说 | 科技自媒体

互联网,科技,数码,鸿蒙

个人介绍

少湖,独立开发者,全栈技术专家,HarmonyOS 开发者达人,华为开发者专家(HDE),坚果派专家,Openharmony 布道师。

社交媒体

公众号

少湖说:少胡说,多观察。

关注公众号,加入交流群。

Flutter 3.27 支持的 Dart 版本为 3.6,本文说明如何将 TPC中的 animations 库升级适配Flutter 3.27

升级步骤:

  1. 找到上有 animations 库的最新版本及源码,并下载至本地解压

打开 https://github.com/flutter/packages,点击 Doanlowd Zip,解压到本地。

  1. 克隆 TPC 中的 flutter_packages 仓库

克隆之前我们先 Fork 一份仓库至自己的组织中,以便后续提交 PR 使用。克隆成功后,将 Fork 后的仓库克隆至本地

1
git clone https://gitcode.com/nutpi/flutter_packages.git
  1. 新建一个分支

按照命名规则,新建分支为:br_animations-v2.0.11_ohos

  1. 将解压的 animations 中的文件同步覆盖到 TPC 中的 flutter_packages/animations 文件夹下

需要注意的是,这里需要逐个文件覆盖,需要保留 TPC 仓库中的 ohos 相关文件目录

  1. 测试代码

5.1 打开 example 目录,首先对 ohos 项目进行签名配置

5.2 使用 Deveco 打开 example/ohos 目录,然后修改配置签名

5.3 运行 lib/main.dart 代码,测试功能是否正常

  1. 提交代码至自己的组织中

  2. 提交 PR

近日,OpenHarmony 社区的 Flutter 仓库创建了 Flutter 3.27.4-dev 分支,这标志着 鸿蒙版 Flutter SDK 3.27 进入开发阶段。

值得注意的是,Flutter 等三方框架从 SIG 组织中分离出来,使用单独的 TPC(Third Party Components)来管理,专门存放开源三方库,代码管理更加清晰,但社区管理上,TPC 仍然由 OpenHarmony SIG 主导。

准备工作

这里我们使用 FVM 管理Flutter SDK

首先进入 fvm/versions 目录下,克隆 3.27.4-dev 分支的 flutter_flutter 仓库

1
2
cd ~/fvm/versions
git clone -b oh-3.27.4-dev https://gitcode.com/openharmony-tpc/flutter_flutter.git custom_3.27.4

切换 Flutter SDK

接下来进入自己的项目,使用 fvm 切换版本

1
fvm use custom_3.27.4

参考资料

开通 WAF

首先找到 Web应用防火墙,然后点击开通。

添加域名

开通后打开接入管理,点击 CNAME 接入

本文章中的示例域名为 api.baidu.com,不代表实际域名,请自行替换。

alt text

接下来输入需要接入的域名

alt text

回到域名解析管理中,按照提示添加 TXT 记录

alt text

接下来,添加服务器地址,这里的地址就是防护的服务器/负载均衡的公网 IP地址

alt text

点击提交后,同样根据页面提示,添加 CNAME 记录

alt text

回到域名解析控制台,添加 CNAME 记录

alt text

检测 CNAME 是否生效

  1. 在 Window 上,可以使用 nslookup 进行测试
1
nslookup -qt=CNAME api.baidu.com

如果看到 api.baidu.com.c.yundunwaf5.com. 相关的输出,则说明 CNAME 配置成功。

  1. 在 Linux/Mac 上,可以使用 dig 进行测试
1
dig api.baidu.com CNAME
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
➜ dig api.baidu.com CNAME

; <<>> DiG 9.10.6 <<>> api.baidu.com CNAME
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 50094
;; flags: qr rd ra; QUERY: 1, ANSWER: 1, AUTHORITY: 0, ADDITIONAL: 0

;; QUESTION SECTION:
;api.baidu.com. IN CNAME

;; ANSWER SECTION:
api.baidu.com. 10 IN CNAME api.baidu.com.c.yundunwaf5.com.

;; Query time: 41 msec
;; SERVER: 100.100.2.136#53(100.100.2.136)
;; WHEN: Wed Jun 25 19:34:27 CST 2025
;; MSG SIZE rcvd: 91

如上所示,看到 api.baidu.com.c.yundunwaf5.com. 输出,则说明 CNAME 配置成功。

腾讯 CloudBase 可以用于托管静态网站,服务开通之后,使用 CloudBase CLI 可以将本地静态网站上传到 CloudBase,并生成相应的访问域名。

配置 Workflow

创建 .github/workflows/deploy.yml 文件, 编辑内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
name: Deploy to CloudBase Static Hosting

on:
workflow_dispatch:
push:
branches:
- main

jobs:

deploy:
runs-on: ubuntu-latest

steps:
- name: Set up Node.js
uses: actions/setup-node@v4
with:
node-version: '18' # 根据您的项目需求选择Node.js版本

- name: Install CloudBase CLI
run: npm install -g @cloudbase/cli

- name: Deploy to CloudBase Static Hosting
run: |
tcb login --apiKeyId ${{ secrets.TCB_SECRET_ID }} --apiKey ${{ secrets.TCB_SECRET_KEY }}
tcb hosting deploy ./dist --envId ${{ secrets.TCB_ENV_ID }}

这里,我们首先配置好 node 环境,然后安装 CloudBase CLI,通过 tcb login 命令登录 CloudBase,然后使用 tcb hosting deploy 命令将静态网站部署到 CloudBase。

可以看到,这里用到了几个环境变量,如 TCB_SECRET_ID、TCB_SECRET_KEY、TCB_ENV_ID。 接下来,我们需要在项目设置中添加环境变量。

配置

  1. 点击 Settings 按钮,进入项目设置页面。找到 Secrets and Variables 选项展开,点击 Actions,在 Repository secrets 处点击

New repository secret 按钮,准备添加变量。

alt text

  1. 添加变量,分别添加 TCB_SECRET_ID、TCB_SECRET_KEY、TCB_ENV_ID。

alt text

TCB_SECRET_ID、TCB_SECRET_KEY,通过控制台/访问管理,找到访问密钥管理,添加。

TCB_ENV_ID 为服务创建好之后的环境 ID。

参考资料

准备工作

1.安装 DevEco Studio NEXT IDE, 注意版本应该是 Next,当前最新的是 Beta3

2.安装Git, 如果要同时适配安卓,需要安装Android Studio; 如果要适配ios,需要安装Xcode

Mac 安装(推荐)

环境变量配置

1
2
3
4
5
6
7
8
9
10
# Flutter Mirror
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

# HarmonyOS SDK
export TOOL_HOME=/Applications/DevEco-Studio.app/Contents/
export DEVECO_SDK_HOME=$TOOL_HOME/sdk # command-line-tools/sdk
export PATH=$TOOL_HOME/tools/ohpm/bin:$PATH # command-line-tools/ohpm/bin
export PATH=$TOOL_HOME/tools/hvigor/bin:$PATH # command-line-tools/hvigor/bin
export PATH=$TOOL_HOME/tools/node/bin:$PATH # command-line-tools/tool/node/bin

Windows 安装

配置用户变量

1
2
3
4
5
6
7
FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

PUB_HOSTED_URL=https://pub.flutter-io.cn

DEVECO_SDK_HOME=C:\Program Files\Huawei\DevEco Studio\sdk

JAVA_HOME=C:\Program Files\Huawei\DevEco Studio\jbr

配置环境变量

编辑 PATH,添加以下路径

1
2
3
4
5
6
7
C:\Program Files\Huawei\DevEco Studio\tools\ohpm\bin

C:\Program Files\Huawei\DevEco Studio\tools\hvigor\bin

C:\Program Files\Huawei\DevEco Studio\tools\node

C:\Program Files\Huawei\DevEco Studio\jbr\bin

管理多个 Flutter 版本

如果在项目开发中,需要使用多个 Flutter 版本,可以考虑使用 fvm

  1. 安装 FVM
  2. 使用 fvm 官方 flutter 版本
1
fvm install 3.22.0
  1. 安装自定义鸿蒙版本,进入 fvm/version 目录,通常位于用户目录下,如 ~/fvm/versions/3.22.0,
    拷贝仓库并重命名为 custom_x.y.z的名字
1
git clone -b dev https://gitcode.com/openharmony-sig/flutter_flutter.git custom_3.7.12

注意命名格式必须为 custom_x.y.z,即必须以 custom_ 开头,后面跟三位数字版本号,如 custom_3.7.12

  1. 在项目中使用单独的 flutter sdk 版本, 在项目目录中执行:
1
fvm use custom_3.7.12

常见问题

  1. 运行 flutter doctor 出现 Error: Unable to find git in your PATH.

执行以下命令

1
git config --global --add safe.directory '*'

案例

Flutter 鸿蒙交流群

【flutter鸿蒙技术交流群】

目前 Flutter 鸿蒙已经跑通,但仍然存在一些潜在的坑需要解决和处理,欢迎大家一起分享交流

请扫码加小助手进群:
备注:鸿蒙Flutter
wx:zacksleo

alt text

参考资料

环境搭建

1. 下载Flutter SDK,配置环境变量

鸿蒙 Flutter SDK 需要在 Gitee 下载。目前建议下载 dev 分支代码。

需要配置以下用户变量

注意鸿蒙开发需要安装Java和配置相关变量

1
2
3
4
5
6
7
8
# flutter sdk 镜像
FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
# pub 镜像
PUB_HOSTED_URL=https://pub.flutter-io.cn

DEVECO_SDK_HOME=C:\Program Files\Huawei\DevEco Studio\sdk
# Java SDK
JAVA_HOME=C:\Program Files\Huawei\DevEco Studio\jbr

配置环境变量

编辑 PATH,添加以下路径,鸿蒙开发需要配置ohpm, hvigor及node

1
2
3
4
5
6
7
C:\Program Files\Huawei\DevEco Studio\tools\ohpm\bin

C:\Program Files\Huawei\DevEco Studio\tools\hvigor\bin

C:\Program Files\Huawei\DevEco Studio\tools\node

C:\Program Files\Huawei\DevEco Studio\jbr\bin

SDK 下载完成,环境变量配置妥当后,使用 flutter doctor 检查各项是否通过。

在命令行中,运行 ohpm -v, hvigorw -v, node -v 查看是否能使用,确保各个依赖的工具,其 PATH 配置正确。

使用 echo %DEVECO_SDK_HOME%, echo %JAVA_HOME% 等检查用户变量是否生效。

环境变量发生变化时,需要重启命令行工具。

另外,需要注意的是,优先添加用户环境变量,如果是系统环境变量,可能需要注销登录或者重启系统,否则配置可能不生效。

2. 为了避免意外情况,将新建项目位置,与SDK使用相同的磁盘,如D盘。

否则可能出现 package 找不到的情况。

另外,项目目录不要过深,不然会因路径太长导致编译可能失败。

3. VsCode 无法识别设备

用 DevEco 打开项目,待项目分析完成后,Vscode 中的设备应该可以出来了。

4. 插件Har包找不到

打开DevEco运行时,出现类似以下错误

1
2
3
4
5
6
7
8
9
10
11
12
13
hpm ERROR: missing: flutter_inappwebview_ohos@/.../ohos/har/flutter_inappwebview_ohos.har, required by entry@1.0.0
ohpm ERROR: Found exception: Error: Fetch local file package error, /.../ohos/har/flutter_inappwebview_ohos.har does not exist., reached retry limit or non retryable error encountered.
ohpm ERROR: missing: video_player_ohos@/.../ohos/har/video_player_ohos.har, required by entry@1.0.0
ohpm ERROR: Found exception: Error: Fetch local file package error, /.../ohos/har/video_player_ohos.har does not exist., reached retry limit or non retryable error encountered.
ohpm ERROR: missing: path_provider_ohos@/.../ohos/har/path_provider_ohos.har, required by entry@1.0.0
ohpm ERROR: Found exception: Error: Fetch local file package error, /.../ohos/har/path_provider_ohos.har does not exist., reached retry limit or non retryable error encountered.
ohpm ERROR: missing: shared_preferences_ohos@/.../ohos/har/shared_preferences_ohos.har, required by entry@1.0.0
ohpm ERROR: Found exception: Error: Fetch local file package error, /.../ohos/har/shared_preferences_ohos.har does not exist., reached retry limit or non retryable error encountered.
ohpm ERROR: missing: image_picker_ohos@/.../ohos/har/image_picker_ohos.har, required by entry@1.0.0
ohpm ERROR: Found exception: Error: Fetch local file package error, /.../ohos/har/image_picker_ohos.har does not exist., reached retry limit or non retryable error encountered.
ohpm ERROR: missing: @ohos/flutter_ohos@/.../ohos/har/flutter.har, required by @
ohpm ERROR: Found exception: Error: Fetch local file package error, /.../ohos/har/flutter.har does not exist., reached retry limit or non retryable error encountered.
ohpm ERROR: Install failed, detail: Error: Fetch local file package error, /.../ohos/har/flutter_inappwebview_ohos.har does not exist.

此时需要在Flutter项目下运行 flutter runflutter build 以生成插件的 har 包

4. 如何自定义显示 DevEco 打开 ohos 后的项目名称

每个鸿蒙Flutter项目,用DevEco打开ohos工程后,默认显示的工程名称为 ohos,如果想自定义显示的工程名称,可以参考以下步骤:

在 ohos/.idea 目录下,新建一个 .name 文件,写入项目名称即可。

主要有两种方案

使用第三方库

如 使用flutter_inappwebview插件,在 pubspec.lock 文件中配置:

1
2
3
4
flutter_inappwebview:
git:
url: https://gitcode.com/openharmony-sig/flutter_inappwebview.git
path: "flutter_inappwebview"

或者使用 webview_flutter 插件

1
2
3
4
webview_flutter:
git:
url: https://gitcode.com/openharmony-sig/flutter_packages.git
path: "packages/webview_flutter/webview_flutter"

编写原生 ArkTS 代码实现 PlatformView

创建 entryablitiy

在 src/main/module.json5中配置ablitiy

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
"abilities": [
{
"name": "EntryAbility",
"srcEntry": "./ets/entryability/EntryAbility.ets",
"description": "$string:EntryAbility_desc",
"icon": "$media:icon",
"label": "$string:EntryAbility_label",
"startWindowIcon": "$media:icon",
"startWindowBackground": "$color:start_window_background",
"exported": true,
"skills": [
{
"entities": [
"entity.system.home"
],
"actions": [
"action.system.home"
]
}
],
"orientation": "landscape"
}
],

cat src/main/entryablity/CustomFactory.ets

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { BinaryMessenger } from '@ohos/flutter_ohos/src/main/ets/plugin/common/BinaryMessenger';
import MessageCodec from '@ohos/flutter_ohos/src/main/ets/plugin/common/MessageCodec';
import PlatformViewFactory from '@ohos/flutter_ohos/src/main/ets/plugin/platform/PlatformViewFactory';
import { CustomView } from './CustomView';
import common from '@ohos.app.ability.common';
import PlatformView from '@ohos/flutter_ohos/src/main/ets/plugin/platform/PlatformView';

export class CustomFactory extends PlatformViewFactory {
message: BinaryMessenger;

constructor(message: BinaryMessenger, createArgsCodes: MessageCodec<Object>) {
super(createArgsCodes);
this.message = message;
}

public create(context: common.Context, viewId: number, args: Object): PlatformView {
return new CustomView(context, viewId, args, this.message);
}
}

cat src/main/entryablity/CustomPlugin.ets

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import  { FlutterPlugin,
FlutterPluginBinding } from '@ohos/flutter_ohos/src/main/ets/embedding/engine/plugins/FlutterPlugin';
import StandardMessageCodec from '@ohos/flutter_ohos/src/main/ets/plugin/common/StandardMessageCodec';
import { CustomFactory } from './CustomFactory';

export class CustomPlugin implements FlutterPlugin {
getUniqueClassName(): string {
return 'CustomPlugin';
}

onAttachedToEngine(binding: FlutterPluginBinding): void {
binding.getPlatformViewRegistry()?.
registerViewFactory('com.rex.custom.ohos/customView', new CustomFactory(binding.getBinaryMessenger(), StandardMessageCodec.INSTANCE));
}

onDetachedFromEngine(binding: FlutterPluginBinding): void {}
}

cat src/main/entryablity/CustomView.ets

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
import MethodChannel, {
MethodCallHandler,
MethodResult
} from '@ohos/flutter_ohos/src/main/ets/plugin/common/MethodChannel';
import PlatformView, { Params } from '@ohos/flutter_ohos/src/main/ets/plugin/platform/PlatformView';
import common from '@ohos.app.ability.common';
import { BinaryMessenger } from '@ohos/flutter_ohos/src/main/ets/plugin/common/BinaryMessenger';
import StandardMethodCodec from '@ohos/flutter_ohos/src/main/ets/plugin/common/StandardMethodCodec';
import MethodCall from '@ohos/flutter_ohos/src/main/ets/plugin/common/MethodCall';
import { webview } from '@kit.ArkWeb';

@Component
struct ButtonComponent {
@Prop params: Params
customView: CustomView = this.params.platformView as CustomView
@StorageLink('numValue') storageLink: string = "first"
@State bkColor: Color = Color.Red

private webviewController: WebviewController = new webview.WebviewController()

build() {
Web({src: 'https://baidu.com', controller: this.webviewController})
.domStorageAccess(true)
.fileAccess(true)
.mixedMode(MixedMode.All)
.databaseAccess(true)
.userAgent("Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36")
}
}

@Builder
function ButtonBuilder(params: Params) {
ButtonComponent({ params: params })
.backgroundColor(Color.Transparent)
}

AppStorage.setOrCreate('numValue', 'test')

@Observed
export class CustomView extends PlatformView implements MethodCallHandler {
numValue: string = "test";

methodChannel: MethodChannel;
index: number = 1;

constructor(context: common.Context, viewId: number, args: ESObject, message: BinaryMessenger) {
super();
// 注册消息通道
this.methodChannel = new MethodChannel(message, `com.rex.custom.ohos/customView${viewId}`, StandardMethodCodec.INSTANCE);
this.methodChannel.setMethodCallHandler(this);
}

onMethodCall(call: MethodCall, result: MethodResult): void {
// 接受Dart侧发来的消息
let method: string = call.method;
let link1: SubscribedAbstractProperty<number> = AppStorage.link('numValue');
switch (method) {
case 'getMessageFromFlutterView':
let value: ESObject = call.args;
this.numValue = value;
link1.set(value)
console.log("nodeController receive message from dart: " + this.numValue);
result.success(true);
break;
}
}

public sendMessage = () => {
console.log("nodeController sendMessage")
//向Dart侧发送消息
this.methodChannel.invokeMethod('getMessageFromOhosView', 'natvie - ' + this.index++);
}

getView(): WrappedBuilder<[Params]> {
return new WrappedBuilder(ButtonBuilder);
}

dispose(): void {
}
}

cat src/main/entryablity/EntryAbility.ets

1
2
3
4
5
6
7
8
9
10
11
12
import { FlutterAbility, FlutterEngine } from '@ohos/flutter_ohos';
import { GeneratedPluginRegistrant } from '../plugins/GeneratedPluginRegistrant';
import { CustomPlugin } from './CustomPlugin';

export default class EntryAbility extends FlutterAbility {
configureFlutterEngine(flutterEngine: FlutterEngine) {
super.configureFlutterEngine(flutterEngine)
GeneratedPluginRegistrant.registerWith(flutterEngine)
this.addPlugin(new CustomPlugin())
}
}

创建 pages

cat src/main/ets/pages/index.ets

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import common from '@ohos.app.ability.common';
import { FlutterPage } from '@ohos/flutter_ohos'

let storage = LocalStorage.getShared()
const EVENT_BACK_PRESS = 'EVENT_BACK_PRESS'

@Entry(storage)
@Component
struct Index {
private context = getContext(this) as common.UIAbilityContext
@LocalStorageLink('viewId') viewId: string = "";

build() {
Column() {
FlutterPage({ viewId: this.viewId })
}
}

onBackPress(): boolean {
this.context.eventHub.emit(EVENT_BACK_PRESS)
return true
}
}

在src/main/resources/base/profile/main_page.json中配置路由

1
2
3
4
5
{
"src": [
"pages/Index"
]
}

在 Dart 侧调用该 PlatformView

1
2
3
4
5
6
7
8
Scaffold(
appBar: AppBar(title: Text('code')),
body: OhosView(
viewType: 'com.rex.custom.ohos/customView',
// onPlatformViewCreated: _onPlatformViewCreated,
creationParams: const <String, dynamic>{'initParams': 'hello world'},
creationParamsCodec: const StandardMessageCodec(),
)

参考资料

在《鸿蒙 Flutter 开发中集成 Webview》,介绍了如果在 Flutter 中集成 Webview. 本文则为 Webview 的调试方法。

配置 Webview

CustomView.ets 文件中,在生命周期aboutToAppear处配置允许调试:

1
2
3
aboutToAppear() {
webview.WebviewController.setWebDebuggingAccess(true);
}

找到 devtools 的端口

运行 App,使用 hdc 命令连接设备,查找相关端口

1
2
3
4
5
6
7
8
# 连接设备
hdc shell

# 找到相关进程
cat /proc/net/unix | grep devtools

#0: 00000002 0 10000 1 1 2318187 @webview_devtools_remote_43406
#0: 00000002 0 10000 1 1 20785 @webview_devtools_remote_6312

如上面所示,webview_devtools_remote_43406 即为我们要调试的页面

开启端口转发

将设备中的端口转发到开发电脑上

1
2
3
hdc fport tcp:9222 localabstract:webview_devtools_remote_43406

# Forwardport result:OK

在 Chrome 中找打 Webview 并开始调试

在 Chrome 中打开 chrome://inspect/#devices页面,观察页面中RemoteTarget 处出现了相关页面

选择需要调度的页面,点击 inspect,弹出 DevTools 窗口,开启页面调度

devtools

其他

如果要在 Webview 注入 js 代码,可在 Web 组件配置处使用runJavaScript方法注入 JavaScript 脚本,如

1
2
3
4
5
6
7
8
9
Web({src: 'https://baidu.com', controller: this.webviewController})
.domStorageAccess(true)
.fileAccess(true)
.mixedMode(MixedMode.All)
.databaseAccess(true)
.javaScriptAccess(true)
.onPageEnd(() => {
this.webviewController.runJavaScript("document.querySelector('meta[http-equiv=\"Content-Security-Policy\"]').remove()");
})

参考资料

在鸿蒙Flutter开发中,如果涉及到使用原生功能,就要使用插件。使用插件有两种方式,一种是自己编写原生ArkTS代码,在Dart侧调用。另外一种是使用第三方代码。

方式一:编写原生 ArkTS 代码

该方案可以使用 PlatformView 或者 MethodChannel 调用。

  1. PlatformView 即为在 Flutter 侧创建一个 View,然后在 Native 侧渲染。PlatformView 封装了底层的 View。

  2. MethodChannel 即通过 MethodClannel 调用原生Native 方法。

具体操作可以分别参考文章 鸿蒙 Flutter 开发中集成 Webview使用 ArkTs 开发 Flutter 鸿蒙平台插件

方式二:使用第三方代码

1.在pub.flutter.dev/github/gitee/ophm查找使用的插件,如果插件已经适配鸿蒙,则可以像其他Flutter插件一样正常使用。

2.如果插件尚未适配鸿蒙,则需要寻找适配的插件库。配置方法如下

3.如果使用的第三方插件,其底层以的库没有适配鸿蒙,则需要通过overrider配置其鸿蒙化的替代插件,否则会在运行时报错。如下面所示:

1
2
3
4
5
6
7
8
9
dependencies:
path_provider: ^2.1.0

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

这里需要注意的时,如果不存在依赖冲突,dependency_overrides 可能不生效。也就是说,查看 pubspec.lock 文件,发现依赖的插件库,不存在 **_ohos 库,则说明 overrides不生效,此时使用以下方式,修改 pubspec_overrides.yaml 文件,手动添加文件。

如果 overrides 不生效, 打开 pubspec_overrides.yaml,添加以下内容,再次运行 pub get, 发现 pubspec.lock 成功添加了 **_ohos 库。

1
2
3
4
5
6
dependency_overrides:
# ohos
path_provider:
git:
url: "https://gitcode.com/openharmony-sig/flutter_packages.git"
path: "packages/path_provider/path_provider"

另外,如果没有找到使用的鸿蒙化插件,则可以考虑自行编写垮端调用代码,或者编写新的插件库,作为原插件库的特定平台实现。

参考资料

0%