本文为开发者提供了使用 Flutter 开发鸿蒙 PC 应用的全面指南。涵盖开发环境搭建、项目创建与配置、界面设计、业务逻辑开发以及调试测试等环节,同时强调适配鸿蒙 PC 界面规范和调用系统能力的方法。还分享了实用的注意事项、相关资源链接,帮助开发者高效地使用Flutter构建鸿蒙 PC 应用。
在开始开发之前,需要确保电脑上已安装以下软件。对于鸿蒙系统开发,需要安装鸿蒙开发工具,如 DevEco Studio 等。同时,还需要安装 Git,它用于版本控制和获取 Flutter SDK 等资源。
从官方指定地址下载 Flutter SDK,如在终端中执行命令
git clone https://gitcode.com/openharmony-sig/flutter_flutter
git checkout -b 3.22.0-ohos origin/3.22.0-ohos
克隆 Flutter SDK 到指定目录。接着,配置环境变量,在 ~/.bash_profile
文件中增加相应的 Flutter Mirror、HarmonyOS SDK 等环境变量,如 export PUB_HOSTED_URL=https://pub.flutter-io.cn
等,配置完成后,通过 flutter doctor
命令检查是否配置成功。
比如我的:
jianguo@nutpi flutter % flutter doctor -v
[!] Flutter (Channel [user-branch], 3.22.1-ohos-1.0.0, on macOS 13.4.1 22F82 darwin-arm64, locale zh-Hans-CN)
! Flutter version 3.22.1-ohos-1.0.0 on channel [user-branch] at /Users/jianguo/huawei/flutter
Currently on an unknown channel. Run `flutter channel` to switch to an official channel.
If that doesn't fix the issue, reinstall Flutter by following instructions at https://flutter.dev/docs/get-started/install.
! Upstream repository git@gitcode.com:openharmony-sig/flutter_flutter.git is not the same as FLUTTER_GIT_URL
• FLUTTER_GIT_URL = https://gitcode.com/openharmony-sig/flutter_flutter.git
• Framework revision 13a3494e71 (2 minutes ago), 2025-05-15 21:21:44 +0800
• Engine revision f6344b75dc
• Dart version 3.4.0
• DevTools version 2.34.1
• Pub download mirror https://pub.flutter-io.cn
• Flutter download mirror https://storage.flutter-io.cn
• If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.
[✓] HarmonyOS toolchain - develop for HarmonyOS devices
• OpenHarmony Sdk at /Users/jianguo/Library/OpenHarmony/Sdk, available api versions has [15:15, 12:12]
• Ohpm version 5.0.16
• Node version v18.20.1
• Hvigorw binary at /Applications/DevEco-Studio.app/Contents/tools/hvigor/bin/hvigorw
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
• Android SDK at /Users/jianguo/Library/Android/sdk
• Platform android-34, build-tools 34.0.0
• ANDROID_HOME = /Users/jianguo/Library/Android/sdk
• Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231)
• All Android licenses accepted.
[!] Xcode - develop for iOS and macOS (Xcode 14.3.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 14E300c
! Flutter recommends a minimum Xcode version of 15.
Download the latest version or update via the Mac App Store.
• CocoaPods version 1.16.2
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2022.3)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231)
[✓] VS Code (version 1.100.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.110.0
⣾
在终端中进入项目存放目录,执行命令 flutter create --platforms ohos 项目名称
创建新的 Flutter 项目,该命令会生成一个包含鸿蒙平台相关配置的项目结构。例如,执行 flutter create --platforms ohos my_harmony_app
,就会创建一个名为 “my_harmony_app” 的项目。
创建多平台
flutter create myflutterapp
:Flutter 鸿蒙项目的主要结构包括 lib
目录存放 Dart 代码、pubspec.yaml
文件用于项目配置和依赖管理、ohos
目录存放鸿蒙平台特定的资源和配置文件等。其中,lib
目录下的 main.dart
文件是应用的入口文件。
jianguo@nutpi % tree -L 2
.
├── LICENSE
├── README.md
├── analysis_options.yaml
├── android
│ ├── app
│ ├── build.gradle
│ ├── gradle
│ ├── gradle.properties
│ ├── local.properties
│ └── settings.gradle
├── build
│ ├── 1bcac9131f185b5e8bd0f600f6ffecf8.cache.dill.track.dill
│ ├── eaa3fb6bcb4ef7f7f7d2474c436521fe
│ └── ohos
├── ios
│ ├── Flutter
│ ├── Podfile
│ ├── Runner
│ ├── Runner.xcodeproj
│ ├── Runner.xcworkspace
│ └── RunnerTests
├── lib
│ ├── main.dart
│ ├── models
│ ├── pages
│ └── services
├── linux
│ ├── CMakeLists.txt
│ ├── flutter
│ ├── main.cc
│ ├── my_application.cc
│ └── my_application.h
├── macos
│ ├── Flutter
│ ├── Podfile
│ ├── Runner
│ ├── Runner.xcodeproj
│ ├── Runner.xcworkspace
│ └── RunnerTests
├── ohos
│ ├── AppScope
│ ├── build-profile.json5
│ ├── entry
│ ├── har
│ ├── hvigor
│ ├── hvigorfile.ts
│ ├── local.properties
│ ├── oh-package-lock.json5
│ ├── oh-package.json5
│ └── oh_modules
├── pubspec.lock
├── pubspec.yaml
├── test
│ └── widget_test.dart
├── web
│ ├── favicon.png
│ ├── icons
│ ├── index.html
│ └── manifest.json
└── windows
├── CMakeLists.txt
├── flutter
└── runner
37 directories, 27 files
jianguo@nutpi %
在这个文件中,可以添加项目所需的依赖,如 flutter
、flutter_test
等。还可以配置应用的名称、版本号、图标等信息。例如,添加一个新的依赖库,只需在 dependencies
节点下添加相应的库名称和版本号,然后执行 flutter pub get
命令来获取和安装依赖。
Flutter 提供了丰富的 Widgets,如 Container
、Row
、Column
、Text
、Button
等,通过组合这些 Widgets 可以构建出各种复杂的用户界面。例如,创建一个包含文本和按钮的简单界面:
鸿蒙 PC 应用的界面设计应遵循鸿蒙的设计规范,提供良好的用户体验。例如,使用合适的字体大小、间距、颜色等,以确保界面在 PC 端的显示效果良好。同时,还需要考虑响应式布局,使应用能够适应不同的屏幕尺寸和分辨率。
通过为界面元素添加事件处理函数,如 onPressed
、onTap
等,来处理用户的交互操作。在事件处理函数中,可以执行相应的业务逻辑,如更新界面数据、发起网络请求等。例如,实现一个按钮点击后显示提示信息的功能
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Button Demo'),
),
body: const Center(
child: MyButton(),
),
),
);
}
}
class MyButton extends StatelessWidget {
const MyButton({super.key});
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: () {
print('Button pressed');
showDialog(
context: context,
builder: (context) => AlertDialog(
title: const Text('Button Pressed'),
content: const Text('You pressed the button!'),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: const Text('OK'),
),
],
),
);
},
child: const Text('Press Me'),
);
}
}
鸿蒙提供了丰富的系统能力,如文件管理、设备传感器、多媒体等,可以通过 Flutter 的平台通道调用这些系统能力。例如,调用鸿蒙的相册选择功能,获取用户选择的图片并显示在界面上。需要先在 pubspec.yaml
文件中添加相应的依赖,然后在代码中通过 MethodChannel
与原生代码进行通信,实现系统能力的调用。以及直接使用鸿蒙版 Flutter 的三方库去开发。
import 'package:flutter/material.dart';
import'package:flutter/services.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('System Ability Demo'),
),
body: const Center(
child: MySystemAbilityButton(),
),
),
);
}
}
class MySystemAbilityButton extends StatelessWidget {
const MySystemAbilityButton({super.key});
final MethodChannel _channel = const MethodChannel('com.example/system_ability');
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: () async {
try {
final result = await _channel.invokeMethod('invokeSystemAbility');
print('System ability result: $result');
} catch (e) {
print('Error invoking system ability: $e');
}
},
child: const Text('Invoke System Ability'),
);
}
}
Flutter 提供了一个强大的调试工具 Flutter DevTools,它可以帮助开发者分析和调试应用的性能、内存使用、Widget 树等问题。在开发过程中,可以通过 flutter run -- Observatory
启动 DevTools,并连接到正在运行的应用进行调试。
为了确保应用的质量和稳定性,可以使用 Flutter 提供的测试框架编写测试用例。测试类型包括单元测试、小部件测试和集成测试等。例如,编写一个简单的单元测试来验证某个函数的返回值是否正确。
import 'package:test/test.dart';
void main() {
test('calculate function returns correct value', () {
expect(calculate(2, 3), 5);
});
}
int calculate(int a, int b) {
return a + b;
}
大家创建的项目,默认是不支持 pc 设备的,所以需要在 ohos 目录的配置中添加
"deviceTypes": [
"2in1"
],
这样就可以适配鸿蒙 PC。
坚果派[1]
PC/2in1 开发实践[2]
flutter_flutter[3]
flutter_packages[4]
flutter_samples[5]
坚果派三方库汇总[6]
欢迎大家一起共建。
布局设计[7]:设计合理美观的针对性布局,充分利用大尺寸屏幕,同时展示更多信息。
窗口适配[8]:通过支持 PC/2in1 的自由窗口,满足用户的多样化体验。
交互体验[9]:在应用中增加键鼠的交互体验支持。
特殊事项[10]:若应用中涉及相机调用,需要注意在 PC/2in1 上的不同场景和摄像头支持情况。
本文详细介绍了如何使用 Flutter 开发鸿蒙 PC 应用。从开发环境搭建开始,包括安装依赖软件、配置 Flutter SDK 等步骤,为开发做好前期准备。接着讲述了如何创建项目,介绍了项目结构与配置,强调了 pubspec.yaml 文件的重要性。在界面开发部分,讲解了使用 Flutter Widgets 构建界面的方法,并指出要适配鸿蒙 PC 的界面设计规范。业务逻辑开发方面,阐述了处理用户交互和调用鸿蒙系统能力的方式。调试与测试部分则介绍了 Flutter DevTools 的使用和编写测试用例的方法。最后,还给出了相关的注意事项和链接,以及介绍了坚果派团队及其资源,为开发者提供了丰富的参考资料和实践指导,助力开发者顺利创建鸿蒙 PC 应用。
坚果派由坚果等人创建,团队拥有若干华为 HDE,以及若干其他领域的三十余位万粉博主运营。专注于分享的技术包括 HarmonyOS/OpenHarmony,ArkUI-X,元服务,服务卡片,仓颉,BlueOS 操作系统、团队成员聚集在北京、上海、广州、深圳、南京、杭州、苏州、宁夏,天津,福建,武汉等地。 聚焦“鸿蒙原生应用”、“智能物联”和“AI 赋能”、“人工智能”四大业务领域,依托华为开发者专家等强大的技术团队,以及涵盖需求、开发、测试、运维于一体的综合服务体系,赋能文旅、媒体、社交、家居、消费电子等行业客户,满足社区客户数字化升级转型的需求,帮助客户实现价值提升。 目前上架鸿蒙原生应用 40 款,三方库 80 个。官网:https://www.nutpi.net/,
Atomgit[11]
Gitcode[12]
Gitee[13]
参考资料
[1]
坚果派: https://www.nutpi.net/?tagId=46883630868679
[2]
PC/2in1开发实践: https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-pc-guide
[3]
flutter_flutter: https://gitcode.com/openharmony-sig/flutter_flutter/
[4]
flutter_packages: https://gitcode.com/openharmony-sig/flutter_packages
[5]
flutter_samples: https://gitcode.com/openharmony-sig/flutter_samples/
[6]
坚果派三方库汇总: https://docs.qq.com/sheet/DYnl1dUxhV21JTWNl?tab=BB08J2
[7]
布局设计: https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-pc-guide#section583511558587
[8]
窗口适配: https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-pc-guide#section17328172392610
[9]
交互体验: https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-pc-guide#section1634505165912
[10]
特殊事项: https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-pc-guide#section109821524194213
[11]
Atomgit: https://atomgit.com/nutpi
[12]
Gitcode: https://gitcode.com/nutpi
[13]
Gitee: https://giteee.com/nutpi
扫码关注腾讯云开发者
领取腾讯云代金券
Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号:粤B2-20090059 深公网安备号 44030502008569
腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287
Copyright © 2013 - 2025 Tencent Cloud.
All Rights Reserved. 腾讯云 版权所有