用Flutter开发鸿蒙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 等，来处理用户的交互操作。在事件处理函数中，可以执行相应的业务逻辑，如更新界面数据、发起网络请求等。例如，实现一个按钮点击后显示提示信息的功能：

  • 调用鸿蒙系统能力 ：鸿蒙提供了丰富的系统能力，如文件管理、设备传感器、多媒体等，可以通过 Flutter 的平台通道调用这些系统能力。例如，调用鸿蒙的相册选择功能，获取用户选择的图片并显示在界面上。需要先在 pubspec.yaml 文件中添加相应的依赖，然后在代码中通过 MethodChannel 与原生代码进行通信，实现系统能力的调用。以及直接使用鸿蒙版Flutter的三方库去开发。

调试与测试

  • 使用 Flutter DevTools 调试 ：Flutter 提供了一个强大的调试工具 Flutter DevTools，它可以帮助开发者分析和调试应用的性能、内存使用、Widget 树等问题。在开发过程中，可以通过 flutter run -- Observatory 启动 DevTools，并连接到正在运行的应用进行调试。

  • 编写测试用例 ：为了确保应用的质量和稳定性，可以使用 Flutter 提供的测试框架编写测试用例。测试类型包括单元测试、小部件测试和集成测试等。例如，编写一个简单的单元测试来验证某个函数的返回值是否正确。

 

注意点

大家创建的项目，默认是不支持pc设备的，所以需要在ohos目录的配置中添加

   "deviceTypes": [
      "2in1"
    ],

这样就可以适配鸿蒙PC。

相关链接

坚果派

PC/2in1开发实践

flutter_flutter

flutter_packages

flutter_samples

坚果派三方库汇总

欢迎大家一起共建。

布局设计：设计合理美观的针对性布局，充分利用大尺寸屏幕，同时展示更多信息。

窗口适配：通过支持PC/2in1的自由窗口，满足用户的多样化体验。

交互体验：在应用中增加键鼠的交互体验支持。

特殊事项：若应用中涉及相机调用，需要注意在PC/2in1上的不同场景和摄像头支持情况。

 

坚果派

坚果派由坚果等人创建，团队拥有若干华为HDE，以及若干其他领域的三十余位万粉博主运营。专注于分享的技术包括HarmonyOS/OpenHarmony，ArkUI-X，元服务，服务卡片，华为自研语言，BlueOS操作系统、团队成员聚集在北京、上海、广州、深圳、南京、杭州、苏州、宁夏等地。 聚焦“鸿蒙原生应用”、“智能物联”和“AI赋能”、“人工智能”四大业务领域，依托华为开发者专家等强大的技术团队，以及涵盖需求、开发、测试、运维于一体的综合服务体系，赋能文旅、媒体、社交、家居、消费电子等行业客户，满足社区客户数字化升级转型的需求，帮助客户实现价值提升。 目前上架鸿蒙原生应用40款，三方库80个。

地址：https://atomgit.com/nutpi

https://gitcode.com/nutpi

Logo
HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

鸿蒙 状态变量更改通知@Watch解析

本文介绍了ArkTS中的@Watch装饰器，它用于监听状态变量变化并执行回调函数。@Watch只能装饰@State、@Prop、@Link等状态变量，通过严格相等(===)判断变化，初始化不触发。回调函数同步执行，应避免无限循环和耗时操作。文章通过计数器修改和购物车示例展示了@Watch的典型用法，强调其适合处理状态变化的副作用逻辑，但需注意性能和循环引用问题。@Watch是ArkTS状态管理的重

avatar HarmonyOS开发者社区
cover

华为数字化实战指南：从顶层设计到行业落地的系统方法论

avatar HarmonyOS开发者社区

HarmonyOS动态照片，简易环境助力高效开发

HarmonyOS动态照片的拍摄采用分段式拍照统一出图流程，旨在让相机类应用的用户体验与系统相机一致，通过统一拍照流程提升拍照体验。在图库和三方应用访问新拍摄动态照片的场景中，媒体库会高优先级触发动态照片的二段式任务。媒体库为应用提供了统一的动态照片访问接口requestMovingPhoto和MovingPhoto对象，支持应用读取动态照片。HarmonyOS允许用户在设备上查看和处理动态照片，

avatar HarmonyOS开发者社区