前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >用 Flutter 开发鸿蒙 PC 应用

用 Flutter 开发鸿蒙 PC 应用

作者头像
徐建国
发布于 2025-05-19 02:25:36
发布于 2025-05-19 02:25:36
24200
代码可运行
举报
文章被收录于专栏:个人路线个人路线
运行总次数:0
代码可运行

摘要

本文为开发者提供了使用 Flutter 开发鸿蒙 PC 应用的全面指南。涵盖开发环境搭建、项目创建与配置、界面设计、业务逻辑开发以及调试测试等环节,同时强调适配鸿蒙 PC 界面规范和调用系统能力的方法。还分享了实用的注意事项、相关资源链接,帮助开发者高效地使用Flutter构建鸿蒙 PC 应用。

一、开发环境搭建

安装依赖软件

在开始开发之前,需要确保电脑上已安装以下软件。对于鸿蒙系统开发,需要安装鸿蒙开发工具,如 DevEco Studio 等。同时,还需要安装 Git,它用于版本控制和获取 Flutter SDK 等资源。

配置 Flutter SDK

从官方指定地址下载 Flutter SDK,如在终端中执行命令

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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 命令检查是否配置成功。

比如我的:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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_URLFLUTTER_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.0ANDROID_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” 的项目。

创建多平台

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
flutter create myflutterapp

三、项目结构与配置

项目结构介绍

:Flutter 鸿蒙项目的主要结构包括 lib 目录存放 Dart 代码、pubspec.yaml 文件用于项目配置和依赖管理、ohos 目录存放鸿蒙平台特定的资源和配置文件等。其中,lib 目录下的 main.dart 文件是应用的入口文件。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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 文件

在这个文件中,可以添加项目所需的依赖,如 flutterflutter_test 等。还可以配置应用的名称、版本号、图标等信息。例如,添加一个新的依赖库,只需在 dependencies 节点下添加相应的库名称和版本号,然后执行 flutter pub get 命令来获取和安装依赖。

四、界面开发

使用 Flutter Widgets 构建界面

Flutter 提供了丰富的 Widgets,如 ContainerRowColumnTextButton 等,通过组合这些 Widgets 可以构建出各种复杂的用户界面。例如,创建一个包含文本和按钮的简单界面:

适配鸿蒙 PC 的界面设计规范

鸿蒙 PC 应用的界面设计应遵循鸿蒙的设计规范,提供良好的用户体验。例如,使用合适的字体大小、间距、颜色等,以确保界面在 PC 端的显示效果良好。同时,还需要考虑响应式布局,使应用能够适应不同的屏幕尺寸和分辨率。

五、业务逻辑开发

处理用户交互

通过为界面元素添加事件处理函数,如 onPressedonTap 等,来处理用户的交互操作。在事件处理函数中,可以执行相应的业务逻辑,如更新界面数据、发起网络请求等。例如,实现一个按钮点击后显示提示信息的功能

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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 的三方库去开发。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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 提供的测试框架编写测试用例。测试类型包括单元测试、小部件测试和集成测试等。例如,编写一个简单的单元测试来验证某个函数的返回值是否正确。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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 目录的配置中添加

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
   "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

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2025-05-19,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 大前端之旅 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 摘要
  • 一、开发环境搭建
    • 安装依赖软件
    • 配置 Flutter SDK
  • 二、创建项目
    • 使用命令行创建
  • 三、项目结构与配置
    • 项目结构介绍
    • 配置 pubspec.yaml 文件
  • 四、界面开发
    • 使用 Flutter Widgets 构建界面
    • 适配鸿蒙 PC 的界面设计规范
  • 五、业务逻辑开发
    • 处理用户交互
    • 调用鸿蒙系统能力
  • 六、调试与测试
    • 使用 Flutter DevTools 调试
    • 编写测试用例
  • 七、注意点
  • 八、相关链接
  • 九、总结
  • 坚果派
  • 代码托管平台
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档