#跟着坚果学鸿蒙#使用鸿蒙版Flutter3.27.4构建鸿蒙应用
·
使用鸿蒙版Flutter3.27.4构建鸿蒙应用
前言
随着鸿蒙系统的不断发展，越来越多的开发者开始关注如何使用 Flutter 来构建鸿蒙应用。本文将详细介绍如何使用鸿蒙版 Flutter 3.27.4 来构建鸿蒙应用，帮助大家快速上手。
一、环境准备
1.1 安装 FVM
FVM（Flutter Version Management）是一个 Flutter SDK 版本管理工具，它可以帮助我们轻松地管理和切换不同版本的 Flutter SDK。可以查看鸿蒙版Flutter专栏
1.2 检查 FVM 目录
安装好 FVM 后，需要检查是否存在 /Users/jianguo/fvm/versions 这个目录。如果不存在，则创建该目录：
大家需要先安装好FVM然后查看是否有fvm/versions这个目录
没有目录则创建。
mkdir /Users/jianguo/fvm/versions
二、配置 Flutter 3.27.4
2.1 克隆 Flutter 3.27.4 仓库
使用以下命令克隆 Flutter 3.27.4 的仓库到本地
git clone --branch oh-3.27.4-dev git@gitcode.com:openharmony-sig/flutter_flutter.git custom_3.27.4
2.2 查看 Flutter 版本
克隆完成后，使用 fvm list 命令查看已安装的 Flutter 版本：
fvm list Cache directory: /Users/jianguo/fvm/versions Directory Size: 4.36 GB ┌───────────────┬─────────┬───────────────────┬──────────────┬──────────────┬────────┬───────┐ │ Version │ Channel │ Flutter Version │ Dart Version │ Release Date │ Global │ Local │ ├───────────────┼─────────┼───────────────────┼──────────────┼──────────────┼────────┼───────┤ │ custom_3.27.4 │ │ Need setup │ │ │ │ │ ├───────────────┼─────────┼───────────────────┼──────────────┼──────────────┼────────┼───────┤ │ custom_3.22.1 │ │ 3.22.1-ohos-1.0.0 │ 3.4.0 │ │ │ │ └───────────────┴─────────┴───────────────────┴──────────────┴──────────────┴────────┴───────┘ jianguo@nutpi versions %
下载完sdk后
2.3 使用 Flutter 3.27.4
使用以下命令切换到 Flutter 3.27.4 版本：
fvm use custom_3.27.4，这样的话，重新运行fvm list的时候，就如下面所示。
fvm list Cache directory: /Users/jianguo/fvm/versions Directory Size: 9.98 GB ┌───────────────┬─────────┬───────────────────┬──────────────┬──────────────┬────────┬───────┐ │ Version │ Channel │ Flutter Version │ Dart Version │ Release Date │ Global │ Local │ ├───────────────┼─────────┼───────────────────┼──────────────┼──────────────┼────────┼───────┤ │ custom_3.27.4 │ │ 3.27.4-ohos-0.0.1 │ 3.6.2 │ │ │ ● │ ├───────────────┼─────────┼───────────────────┼──────────────┼──────────────┼────────┼───────┤ │ custom_3.22.1 │ │ 3.22.1-ohos-1.0.0 │ 3.4.0 │ │ │ │ ├───────────────┼─────────┼───────────────────┼──────────────┼──────────────┼────────┼───────┤ │ .fvm │ │ │ │ │ │ │ └───────────────┴─────────┴───────────────────┴──────────────┴──────────────┴────────┴───────┘ jianguo@nutpi versions % open .
三、创建项目
3.1 使用自定义 SDK 创建项目
在项目目录下，先使用以下命令指定使用自定义的 Flutter SDK：
fvm use custom_3.27.4
然后，使用以下命令创建 Flutter 项目：
fvm flutter create --platforms=ohos --project-name ohosdemo .
或者：
fvm flutter create fvmdemo
执行上述命令后，会在控制台看到 Flutter 创建项目的相关输出信息，如下载资源、创建项目结构等。
jianguo@jianguodeMacBook-Pro-2 my_app % tree -L 3 . ├── README.md ├── analysis_options.yaml ├── android │ ├── app │ │ ├── build.gradle │ │ └── src │ ├── build.gradle │ ├── gradle │ │ └── wrapper │ ├── gradle.properties │ ├── gradlew │ ├── gradlew.bat │ ├── local.properties │ ├── my_app_android.iml │ └── settings.gradle ├── build │ ├── 11ee55180268f2469c49c88e2119b930 │ │ ├── _composite.stamp │ │ ├── gen_dart_plugin_registrant.stamp │ │ └── gen_localizations.stamp │ └── ohos │ └── flutter_assets ├── ios │ ├── Flutter │ │ ├── AppFrameworkInfo.plist │ │ ├── Debug.xcconfig │ │ ├── Generated.xcconfig │ │ ├── Release.xcconfig │ │ └── flutter_export_environment.sh │ ├── Runner │ │ ├── AppDelegate.swift │ │ ├── Assets.xcassets │ │ ├── Base.lproj │ │ ├── GeneratedPluginRegistrant.h │ │ ├── GeneratedPluginRegistrant.m │ │ ├── Info.plist │ │ └── Runner-Bridging-Header.h │ ├── Runner.xcodeproj │ │ ├── project.pbxproj │ │ ├── project.xcworkspace │ │ └── xcshareddata │ ├── Runner.xcworkspace │ │ ├── contents.xcworkspacedata │ │ └── xcshareddata │ └── RunnerTests │ └── RunnerTests.swift ├── lib │ └── main.dart ├── linux │ ├── CMakeLists.txt │ ├── flutter │ │ ├── CMakeLists.txt │ │ ├── generated_plugin_registrant.cc │ │ ├── generated_plugin_registrant.h │ │ └── generated_plugins.cmake │ ├── main.cc │ ├── my_application.cc │ └── my_application.h ├── macos │ ├── Flutter │ │ ├── Flutter-Debug.xcconfig │ │ ├── Flutter-Release.xcconfig │ │ ├── GeneratedPluginRegistrant.swift │ │ └── ephemeral │ ├── Runner │ │ ├── AppDelegate.swift │ │ ├── Assets.xcassets │ │ ├── Base.lproj │ │ ├── Configs │ │ ├── DebugProfile.entitlements │ │ ├── Info.plist │ │ ├── MainFlutterWindow.swift │ │ └── Release.entitlements │ ├── Runner.xcodeproj │ │ ├── project.pbxproj │ │ ├── project.xcworkspace │ │ └── xcshareddata │ ├── Runner.xcworkspace │ │ ├── contents.xcworkspacedata │ │ └── xcshareddata │ └── RunnerTests │ └── RunnerTests.swift ├── my_app.iml ├── ohos │ ├── AppScope │ │ ├── app.json5 │ │ └── resources │ ├── build-profile.json5 │ ├── entry │ │ ├── build │ │ ├── build-profile.json5 │ │ ├── hvigorfile.ts │ │ ├── oh-package.json5 │ │ └── src │ ├── har │ │ └── flutter.har │ ├── hvigor │ │ └── hvigor-config.json5 │ ├── hvigorfile.ts │ ├── local.properties │ ├── oh-package-lock.json5 │ ├── oh-package.json5 │ └── oh_modules │ └── @ohos ├── pubspec.lock ├── pubspec.yaml ├── test │ └── widget_test.dart ├── web │ ├── favicon.png │ ├── icons │ │ ├── Icon-192.png │ │ ├── Icon-512.png │ │ ├── Icon-maskable-192.png │ │ └── Icon-maskable-512.png │ ├── index.html │ └── manifest.json └── windows ├── CMakeLists.txt ├── flutter │ ├── CMakeLists.txt │ ├── generated_plugin_registrant.cc │ ├── generated_plugin_registrant.h │ └── generated_plugins.cmake └── runner ├── CMakeLists.txt ├── Runner.rc ├── flutter_window.cpp ├── flutter_window.h ├── main.cpp ├── resource.h ├── resources ├── runner.exe.manifest ├── utils.cpp ├── utils.h ├── win32_window.cpp └── win32_window.h 54 directories, 84 files
会在控制台看到：
fvm flutter create fvmdemo [WARN] Not checking for version mismatch as custom version is being used. ╔════════════════════════════════════════════════════════════════════════════╗ ║ Welcome to Flutter! - https://flutter.dev ║ ║ ║ ║ The Flutter tool uses Google Analytics to anonymously report feature usage ║ ║ statistics and basic crash reports. This data is used to help improve ║ ║ Flutter tools over time. ║ ║ ║ ║ Flutter tool analytics are not sent on the very first run. To disable ║ ║ reporting, type 'flutter config --no-analytics'. To display the current ║ ║ setting, type 'flutter config'. If you opt out of analytics, an opt-out ║ ║ event will be sent, and then no further information will be sent by the ║ ║ Flutter tool. ║ ║ ║ ║ By downloading the Flutter SDK, you agree to the Google Terms of Service. ║ ║ The Google Privacy Policy describes how data is handled in this service. ║ ║ ║ ║ Moreover, Flutter includes the Dart SDK, which may send usage metrics and ║ ║ crash reports to Google. ║ ║ ║ ║ Read about data we send with crash reports: ║ ║ https://flutter.dev/to/crash-reporting ║ ║ ║ ║ See Google's privacy policy: ║ ║ https://policies.google.com/privacy ║ ║ ║ ║ To disable animations in this tool, use ║ ║ 'flutter config --no-cli-animations'. ║ ╚════════════════════════════════════════════════════════════════════════════╝ Flutter assets will be downloaded from https://storage.flutter-io.cn. Make sure you trust this source! Downloading Material fonts... 817ms Downloading Gradle Wrapper... 28ms Downloading package sky_engine... 422ms Downloading package flutter_gpu... 37ms Downloading flutter_patched_sdk tools... 425ms Downloading flutter_patched_sdk_product tools... 952ms Downloading darwin-arm64 tools... 4.8s Downloading libimobiledevice... 43ms Downloading usbmuxd... 26ms Downloading libplist... 27ms Downloading openssl... 204ms Downloading ios-deploy... 43ms Downloading darwin-arm64/font-subset tools... 283ms Creating project fvmdemo... Resolving dependencies in `fvmdemo`... Downloading packages... Got dependencies in `fvmdemo`. Wrote 162 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 fvmdemo $ flutter run Your application code is in fvmdemo/lib/main.dart.
执行
tree -L 2 .fvm
四、IDE / 编辑器配置
4.1 VSCode 配置
在项目目录下的 .vscode/settings.json 文件中配置 Flutter SDK 的路径：
创建以后, 目录中会出现 .fvm(软链接到 SDK 实际位置) 和 .fvmrc(配置文件)
tree -L 2 .fvm
执行 tree -L 2 .fvm (仅参考)
.fvm
├── flutter_sdk -> /Users/jianguo/fvm/versions/custom_3.27.4
├── fvm_config.json
├── release
├── version
└── versions
└── custom_3.27.4 -> /Users/jianguo/fvm/versions/custom_3.27.4
4 directories, 3 files
可发现, 其中 .fvm/flutter_sdk 和 .fvm/versions 下的文件均软链接到 SDK 实际缓存位置, 复用
在项目目录下的 .vscode/settings.json 里配置 SDK 位置即可，示例如下
{
"dart.flutterSdkPath": ".fvm/versions/custom_3.27.4", # 也可以是 `.fvm/flutter_sdk`
"dart.addSdkToTerminalPath": true, # 表示将当前 SDK 添加到 VSCode 集成终端的 PATH
"dart.env": {
"PUB_HOSTED_URL": "https://pub.flutter-io.cn" # 根据情况设置(国内推荐)
},
}
五、签名配置
5.1 签名的重要性
在运行项目前，必须对项目进行签名，否则在运行过程中会出现错误。可以通过 DevEco Studio 打开 ohos 工程后配置调试签名。
5.2 使用 DevEco Studio 配置签名
用 DevEco 打开项目下的 ohos 目录，然后依次点击 File -> Project Structure -> Signing Configs，勾选 “Automatically generate signature” 选项，点击自动签名即可。
5.3 签名成功后的变化
签名成功后，ohos/build-profile.json5 文件会自动更新，其中的 signingConfigs 字段会出现相应的签名配置信息。
1.在运行项目前，先对项目进行签名，否则在运行过程中会出现这样的错误
请通过DevEco Studio打开ohos工程后配置调试签名(File -> Project Structure -> Signing Configs 勾选Automatically generate signature)
2.用 DevEco 打开上面的 ohos 目录，注意不是项目目录，是项目下面的 ohos 鸿蒙目录，然后根据提示依次打开 File -> Project Structure -> Signing Configs, 点击自动签名即可。
3.签名成功后，文件 ohos/build-profile.json5 会自动更新，里面的字段 signingConfigs 出现相应的签名配置信息。
六、运行项目
6.1 真机运行
使用 flutter run 命令即可在真机上运行项目。
| 真机 | PC模拟器 | 手机模拟器 | |
|---|---|---|---|
 |
 |
 |
6.2 模拟器运行
在模拟器上运行时，可能会遇到以下错误：
Error connecting to the service protocol: failed to connect to http://127.0.0.1:57827/Zj4TvmhQT38=/ HttpException: Connection closed before full header was received, uri = http://127.0.0.1:57827/Zj4TvmhQT38=/ws
遇到这种情况，可以尝试注释掉 main.dart 文件中的浮动按钮代码：
七、FAQ
7.1 模拟器运行出错
如果在模拟器上运行时出现连接服务协议错误，可以参考上述方法注释掉相关的浮动按钮代码，然后重新运行项目。
八、总结
通过本文的介绍，相信大家已经掌握了使用鸿蒙版 Flutter 3.27.4 构建鸿蒙应用的方法。从环境准备、配置 Flutter 版本、创建项目、IDE 配置、签名配置到运行项目，每一步都有详细的说明。在实际开发过程中，如果遇到问题，可以参考 FAQ 部分或者查阅相关文档。希望大家能够顺利构建出优秀的鸿蒙应用
坚果派
坚果派由坚果等人创建，团队拥有若干华为HDE，以及若干其他领域的三十余位万粉博主运营。专注于分享的技术包括HarmonyOS/OpenHarmony，ArkUI-X，元服务，服务卡片，华为自研语言，BlueOS操作系统、团队成员聚集在北京、上海、广州、深圳、南京、杭州、苏州、宁夏等地。 聚焦“鸿蒙原生应用”、“智能物联”和“AI赋能”、“人工智能”四大业务领域，依托华为开发者专家等强大的技术团队，以及涵盖需求、开发、测试、运维于一体的综合服务体系，赋能文旅、媒体、社交、家居、消费电子等行业客户，满足社区客户数字化升级转型的需求，帮助客户实现价值提升。 目前上架鸿蒙原生应用40款，三方库72个。
讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。
更多推荐
0
0- 0
已为社区贡献7条内容
所有评论(0)