用Flutter开发鸿蒙PC应用
用Flutter开发鸿蒙PC应用
摘要
本文为开发者提供了使用 Flutter 开发鸿蒙 PC 应用的全面指南。涵盖开发环境搭建、项目创建与配置、界面设计、业务逻辑开发以及调试测试等环节，同时强调适配鸿蒙 PC 界面规范和调用系统能力的方法。还分享了实用的注意事项、相关资源链接，并介绍了坚果派团队及其技术资源，帮助开发者高效地构建鸿蒙 PC 应用。
一、开发环境搭建
安装依赖软件
在开始开发之前，需要确保电脑上已安装以下软件。对于鸿蒙系统开发，需要安装鸿蒙开发工具，如 DevEco Studio 等。同时，还需要安装 Git，它用于版本控制和获取 Flutter SDK 等资源。
配置 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 %
配置 pubspec.yaml 文件
在这个文件中，可以添加项目所需的依赖，如 flutter、flutter_test 等。还可以配置应用的名称、版本号、图标等信息。例如，添加一个新的依赖库，只需在 dependencies 节点下添加相应的库名称和版本号，然后执行 flutter pub get 命令来获取和安装依赖。
四、界面开发
使用 Flutter Widgets 构建界面
Flutter 提供了丰富的 Widgets，如 Container、Row、Column、Text、Button 等，通过组合这些 Widgets 可以构建出各种复杂的用户界面。例如，创建一个包含文本和按钮的简单界面：
适配鸿蒙 PC 的界面设计规范
鸿蒙 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 DevTools 调试
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。
八、相关链接
欢迎大家一起共建。
布局设计：设计合理美观的针对性布局，充分利用大尺寸屏幕，同时展示更多信息。
窗口适配：通过支持PC/2in1的自由窗口，满足用户的多样化体验。
交互体验：在应用中增加键鼠的交互体验支持。
特殊事项：若应用中涉及相机调用，需要注意在PC/2in1上的不同场景和摄像头支持情况。
九、总结
本文详细介绍了如何使用 Flutter 开发鸿蒙 PC 应用。从开发环境搭建开始，包括安装依赖软件、配置 Flutter SDK 等步骤，为开发做好前期准备。接着讲述了如何创建项目，介绍了项目结构与配置，强调了 pubspec.yaml 文件的重要性。在界面开发部分，讲解了使用 Flutter Widgets 构建界面的方法，并指出要适配鸿蒙 PC 的界面设计规范。业务逻辑开发方面，阐述了处理用户交互和调用鸿蒙系统能力的方式。调试与测试部分则介绍了 Flutter DevTools 的使用和编写测试用例的方法。最后，还给出了相关的注意事项和链接，以及介绍了坚果派团队及其资源，为开发者提供了丰富的参考资料和实践指导，助力开发者顺利创建鸿蒙 PC 应用。
坚果派
坚果派由坚果等人创建，团队拥有若干华为HDE，以及若干其他领域的三十余位万粉博主运营。专注于分享的技术包括HarmonyOS/OpenHarmony，ArkUI-X，元服务，服务卡片，华为自研语言，BlueOS操作系统、团队成员聚集在北京、上海、广州、深圳、南京、杭州、苏州、宁夏等地。 聚焦“鸿蒙原生应用”、“智能物联”和“AI赋能”、“人工智能”四大业务领域，依托华为开发者专家等强大的技术团队，以及涵盖需求、开发、测试、运维于一体的综合服务体系，赋能文旅、媒体、社交、家居、消费电子等行业客户，满足社区客户数字化升级转型的需求，帮助客户实现价值提升。 目前上架鸿蒙原生应用40款，三方库80个。
- Flutter鸿蒙化 在鸿蒙应用中添加Flutter页面
- 鸿蒙5网页开发实战：用 ArkWeb 打造超酷应用的三个绝招
- Flutter开发的鸿蒙二十四节气应用
- 鸿蒙Flutter实战：03-鸿蒙Flutter开发中集成Webview
- 鸿蒙Flutter实战：06-使用ArkTs开发Flutter鸿蒙插件
- 鸿蒙版Flutter开发相关
- HarmonyOS 5.0.5 (17) Release 发布：重磅更新，鸿蒙 PC 时代开启！
- 用Cocos Creator 3.8.5 构建一个HarmonyOS NEXT应用
- 鸿蒙Flutter实战：07-混合开发
- 鸿蒙Flutter实战：13-鸿蒙应用打包上架流程
- 鸿蒙Flutter实战：01-搭建开发环境
- Flutter 鸿蒙化 flutter和鸿蒙next混和渲染
- Flutter加密货币应用
- Flutter鸿蒙入门
- Flutter鸿蒙实战