上一节我们完成了环境的配置,接下来我们开始项目的创建。

Flutter鸿蒙项目创建

创建工程与编译命令,编译产物在${projectName}/ohos/entry/build/default/outputs/default/entry-default-signed.hap下

# 创建工程 方式一 该方式只创建了ohos平台
flutter create --platforms ohos <projectName> 

# 创建工程 方式二 该方式创建了android,ios,ohos三个平台
flutter create  <projectName> 

# 进入工程根目录编译hap包
flutter build hap --local-engine=/Users/lihui/Documents/flutter_engine/src/out/ohos_debug_unopt_arm64 --debug

只创建ohos平台

这里我采用第一种,

flutter create --platforms ohos fluttertoharmony

如下图所示,项目创建成功。

image-20240713172714711

jianguo@jianguodeMacBook-Pro-2 teaching % flutter create --platforms ohos harmonyflutter
Creating project harmonyflutter...
Running "flutter pub get" in harmonyflutter...
Resolving dependencies in harmonyflutter... 
+ async 2.10.0 (2.11.0 available)
+ boolean_selector 2.1.1
+ characters 1.2.1 (1.3.0 available)
+ clock 1.1.1
+ collection 1.17.0 (1.19.0 available)
+ cupertino_icons 1.0.6 (1.0.8 available)
+ fake_async 1.3.1
+ flutter 0.0.0 from sdk flutter
+ flutter_lints 2.0.3 (4.0.0 available)
+ flutter_test 0.0.0 from sdk flutter
+ js 0.6.5 (0.7.1 available)
+ lints 2.0.1 (4.0.0 available)
+ matcher 0.12.13 (0.12.16+1 available)
+ material_color_utilities 0.2.0 (0.12.0 available)
+ meta 1.8.0 (1.15.0 available)
+ path 1.8.2 (1.9.0 available)
+ sky_engine 0.0.99 from sdk flutter
+ source_span 1.9.1 (1.10.0 available)
+ stack_trace 1.11.0 (1.11.1 available)
+ stream_channel 2.1.1 (2.1.2 available)
+ string_scanner 1.2.0 (1.3.0 available)
+ term_glyph 1.2.1
+ test_api 0.4.16 (0.7.3 available)
+ vector_math 2.1.4
Changed 24 dependencies in harmonyflutter!
Wrote 43 files.

All done!
You can find general documentation for Flutter at: https://docs.flutter.dev/
Detailed API documentation is available at: https://api.flutter.dev/
If you prefer video documentation, consider: https://www.youtube.com/c/flutterdev

In order to run your application, type:

  $ cd harmonyflutter
  $ flutter run

Your application code is in harmonyflutter/lib/main.dart.
flutter build hap --local-engine=/Users/jianguo/huawei/flutter_engine/src/out/ohos_debug_unopt_arm64 --debug

项目编译与运行

通过flutter devices指令发现真机设备之后,获取device-id

方式一:进入项目目录指定构建方式编译hap包并安装到鸿蒙手机中

 flutter run --debug --local-engine=/Users/jianguo/huawei/flutter_engine/src/out/ohos_debug_unopt_arm64  -d <deviceId>

方式二:进入工程根目录编译hap包,然后安装到鸿蒙手机中

flutter build hap --local-engine=/Users/jianguo/huawei/flutter_engine/src/out/ohos_debug_unopt_arm64  --debug

hdc -t <deviceId> install <hap file path>

方式三:使用DevEcoStudio 选择设备为真机,点击启动

运行后的效果,如图所示

接下来我们再来看一下第二种方式

创建多平台

flutter create  <projectName> 

比如

flutter create myflutterapp

因为我用的mac,所以支持的平台会多一些。

jianguo@nutpi myflutterapp % tree -L 2
.
├── README.md
├── analysis_options.yaml
├── android
│   ├── app
│   ├── build.gradle
│   ├── gradle
│   ├── gradle.properties
│   ├── gradlew
│   ├── gradlew.bat
│   ├── local.properties
│   ├── myflutterapp_android.iml
│   └── settings.gradle
├── ios
│   ├── Flutter
│   ├── Runner
│   ├── Runner.xcodeproj
│   ├── Runner.xcworkspace
│   └── RunnerTests
├── lib
│   └── main.dart
├── linux
│   ├── CMakeLists.txt
│   ├── flutter
│   ├── main.cc
│   ├── my_application.cc
│   └── my_application.h
├── macos
│   ├── Flutter
│   ├── Runner
│   ├── Runner.xcodeproj
│   ├── Runner.xcworkspace
│   └── RunnerTests
├── myflutterapp.iml
├── ohos
│   ├── AppScope
│   ├── build-profile.json5
│   ├── entry
│   ├── hvigor
│   ├── hvigorfile.ts
│   ├── local.properties
│   └── oh-package.json5
├── pubspec.lock
├── pubspec.yaml
├── test
│   └── widget_test.dart
├── web
│   ├── favicon.png
│   ├── icons
│   ├── index.html
│   └── manifest.json
└── windows
    ├── CMakeLists.txt
    ├── flutter
    └── runner

29 directories, 26 files

鸿蒙Flutter开发

鸿蒙Flutter开发有两种模式,一种是以纯Flutter工程为主,即上面的这种模式,鸿蒙代码写在Flutter工程中,另一种是和Android、iOS开发类似,通过依赖鸿蒙Flutter的编译产物har来进行开发。

从技术的角度来看,第一种方案会更加简单,因为鸿蒙的Native代码已经是申明式了,类似Compose了,所以在鸿蒙Native代码中使用Flutter页面是非常简单的一件事,甚至可以直接将FlutterPage()当作一个View直接使用,所以鸿蒙Flutter混编会比Android、iOS方便很多。

而另一种方式,通过产物进行依赖,这种方式更加符合三端统一的目标,也更适合团队进行解耦和协作。不过这种方式也有一些问题,那就是Flutter依赖的一些第三方库,同样是需要适配鸿蒙版的,所以在yaml中,相对正常的Flutter项目来说同样需要进行区分。这里最后我也给大家列出了Flutter的三方库的适配计划。

已兼容OpenHarmony开发的指令列表

指令名称指令描述使用说明
doctor环境检测flutter doctor
config环境配置flutter config --
create创建新项目flutter create --platforms ohos,android,ios --org
create创建module模板flutter create -t module
create创建plugin模板flutter create -t plugin --platforms ohos,android,ios
create创建plugin_ffi模板flutter create -t plugin_ffi --platforms ohos,android,ios
devices已连接设备查找flutter devices
install应用安装flutter install -t <hap文件路径>
assemble资源打包flutter assemble
build测试应用构建flutter build hap --debug [--target-platform ohos-arm64] [--local-engine=<兼容ohos的debug engine产物路径>]
build正式应用构建flutter build hap --release [--target-platform ohos-arm64] [--local-engine=<兼容ohos的release engine产物路径>]
run应用运行flutter run [--local-engine=<兼容ohos的engine产物路径>]
attach调试模式flutter attach
screenshot截屏flutter screenshot

参考

Flutter相关:
文档:https://gitee.com/openharmony-sig/flutter_samples/tree/master/ohos/docs
flutter sdk库
https://gitee.com/openharmony-sig/flutter_flutter
flutter engine扩展库
https://gitee.com/openharmony-sig/flutter_engine
flutter packages仓
https://gitee.com/openharmony-sig/flutter_packages
flutter sample
https://gitee.com/openharmony-sig/flutter_samples

对于Flutter的第三方库来说,社区也给出了适配的计划表

https://docs.qq.com/sheet/DVVJDWWt1V09zUFN2?tab=BB08J2

https://www.yuque.com/xuyisheng

Logo

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

更多推荐