鸿蒙Flutter实战:12-使用模拟器开发调试

简介: 本文介绍了如何在 M 系列芯片的 Mac 电脑上使用模拟器进行鸿蒙 Flutter 开发和调试。主要内容包括:创建 Flutter 项目、签名、创建模拟器、运行 Flutter 项目以及常见问题的解决方法。适用于希望在鸿蒙系统上开发 Flutter 应用的开发者。

鸿蒙 Flutter 实战:使用模拟器开发调试

前提

开发电脑需为M系列芯片 (ARM架构) 的 Mac 电脑

目前 Flutter 鸿蒙开发,无法使用 X86 架构的模拟器,只能使用 ARM 架构的模拟器**

创建项目

等开发环境搭建成功,使用 flutter create 命令创建项目

新项目

flutter create --platforms ohos ohos_app

旧项目增加鸿蒙平台支持

flutter create --platforms ohos .

签名

使用 DevEco 打开上面项目中的 ohos 目录,也就是我们的鸿蒙项目目录

打开 File -> Project Structure..., 点击 Siging Configs, 勾选 Automatically generate signature,

点击 Sign In, 登录华为账号,点击右下角 Apply, OK, 完成签名。

观察控制台会输出 Process finished with exit code 0的提示

> hvigor WARN: The current module 'ohos' has dependency which is not installed at its oh-package.json5.
> hvigor Finished :entry:init... after 1 ms
> hvigor Finished ::init... after 1 ms

Process finished with exit code 0

创建模拟器

1.打开 DevEco 中的 Device Manager(可以从右上角的运行按钮左侧下拉找到)

image.png

2.在右下角点击 + New Emulator, 弹出选择模拟器窗口,如果镜像还没有下载,方框处会出现下载按钮,先点击下载,下载完成后点击 Next 创建模拟器,再点击 Previous 创建成功

image.png

3.回到模拟器列表窗口,列表中出现了新建的模拟器,点击运行按钮, 模拟器运行成功。

运动 Flutter 项目

Vscode中右下角应当出现模拟器的设备,行如 127.0.0.1:5555(ohos-arm64), 如果没有出现参考注意事项中的说明 2 操作。

回到 Vscode 中的Flutter 项目,像普通的 flutter 项目那行,点击运行按钮。

注意事项

1. Flutter 运行 App,打包安装成功, 运行闪退 从以下方面检查:

1.1 如果是 X86电脑架构的模拟器,尝试删除 main.dart 中的 FloatingActionButton
1.2 如果 Flutter SDK 使用的 ohos-3.22, 尝试关闭 impeller 渲染方式,打开或创建文件 ohos/entry/src/main/resources/rawfile/buildinfo.json5, 增加以下配置

{
   
   "string": [
      {
   
         "name": "enable_impeller",
         "value": "true"
      }
   ]
}

2.VSCode 中模拟器设备不显示

2.1 尝试使用 Deveco 打开项目的 ohos 目录(即鸿蒙项目文件),等待初始化分析成功
2.2 尝试重启 VSCode

3.使用 fvm 时,项目目录下 flutter --version 显示不正确,不是 ohos 版本

以次按以下的方式进行逐个尝试,直至成功。

3.1 尝试在 vscode 的命令行中运行 fvm use custom_3.22.0, 待命令创建 .vscode/setting.json 文件并在其中增加类似这样的配置

{
   
  "dart.flutterSdkPath": ".fvm/versions/custom_3.22.0"
}

项目根目录中出现 .fvm/version/custom_3.22.0 这样的目录文件,项目根目录出现 .fvmrc 文件,其内容类似如下

{
   
  "flutter": "custom_3.22.0"
}

3.2 尝试重启 VsCode 的命令行,或者重启整个 VsCode,待重新打开 VSCode 命令行以后,flutter --version 出现这样的输出

Flutter 3.22.0-ohos • channel oh-3.22.0 • https://gitee.com/harmonycommando_flutter/flutter.git
Framework • revision 85630b0330 (13 天前) • 2024-10-26 02:39:47 +0000
Engine • revision f6344b75dc
Tools • Dart 3.4.0 • DevTools 2.34.1

3.3 关闭全局 flutter 配置

~/.zshrc~/.bash_profile中,删除或者注释掉类似这样的配置,重启命令行/VSCode

#export PATH="/Users/zacksleo/flutter/bin:$PATH"

作者:星释
链接:https://www.nutpi.net/thread?topicId=92
來源:坚果派
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

目录
相关文章
|
12天前
|
存储 调度 数据安全/隐私保护
鸿蒙Flutter实战:13-鸿蒙应用打包上架流程
鸿蒙应用打包上架流程包括创建应用、打包签名和上传应用。首先,在AppGallery Connect中创建项目、APP ID和元服务。接着,使用Deveco进行手动签名,生成.p12和.csr文件,并在AppGallery Connect中上传CSR文件获取证书。最后,配置签名并打包生成.app文件,上传至应用市场。常见问题包括检查签名配置文件是否正确。参考资料:[应用/服务签名](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-signing-V5)。
39 3
鸿蒙Flutter实战:13-鸿蒙应用打包上架流程
|
9天前
|
监控 开发者
鸿蒙next版开发:使用HiDebug获取调试信息(ArkTS)
在HarmonyOS 5.0中,HiDebug是一个强大的应用调试工具,可帮助开发者获取系统的CPU使用率、内存信息等关键性能数据。本文详细介绍了如何在ArkTS中使用HiDebug,并提供了示例代码,帮助开发者进行性能分析和问题诊断。
27 7
|
16天前
|
开发工具 UED 容器
Flutter&鸿蒙next 实现长按录音按钮及动画特效
本文介绍了如何在 Flutter 中实现一个带有动画效果的长按录音按钮。通过使用 `GestureDetector` 监听长按手势,结合 `AnimatedContainer` 和 `AnimationController` 实现按钮的动画效果,以及 `flutter_sound` 插件完成录音功能。文章详细讲解了功能需求、实现思路和代码实现,帮助读者逐步掌握这一实用功能的开发方法。
92 5
|
16天前
|
容器
Flutter &&鸿蒙next中的 Stack 和 Positioned 用法详解
在 Flutter 中,Stack 和 Positioned 是创建层叠布局和灵活定位元素的常用组件。Stack 可以将多个子组件叠加在一起,允许子组件相互重叠;Positioned 用于在 Stack 内部精确控制子组件的位置。本文详细介绍了它们的基本用法、属性和应用场景,包括动画、弹出层和悬浮按钮等。
67 1
|
16天前
|
UED 开发者 容器
Flutter&鸿蒙next 的 Sliver 实现自定义滚动效果
Flutter 提供了强大的滚动组件,如 ListView 和 GridView,但当需要更复杂的滚动效果时,Sliver 组件是一个强大的工具。本文介绍了如何使用 Sliver 实现自定义滚动效果,包括 SliverAppBar、SliverList 等常用组件的使用方法,以及通过 CustomScrollView 组合多个 Sliver 组件实现复杂布局的示例。通过具体代码示例,展示了如何实现带有可伸缩 AppBar 和可滚动列表的页面。
79 1
|
16天前
|
UED 开发者 容器
Flutter&鸿蒙next 中的 Expanded 和 Flexible 使用技巧详解
在 Flutter 开发中,Expanded 和 Flexible 是两个常用的布局控件,用于管理 UI 布局的空间分配。Expanded 使子组件占据主轴上的所有剩余空间,而 Flexible 允许通过 flex 参数按比例分配空间。掌握两者的区别和使用场景,可以让你在构建复杂 UI 时更加得心应手。
68 1
|
16天前
|
UED
Flutter&鸿蒙next 中的 Drawer 导航栏
在 Flutter 中,Drawer 是一个常用的侧边栏导航组件,通过点击菜单按钮或滑动屏幕显示。它用于展示导航项、用户信息和应用设置等。本文通过一个简单的示例代码,介绍了如何使用 Drawer 实现多页面导航,包括 Drawer 的基本结构、ListView 和 ListTile 的使用,以及页面内容的切换。希望对理解和使用 Flutter 的 Drawer 组件有所帮助。
70 1
|
16天前
|
存储 Dart
Flutter&鸿蒙next 实现一个计算器应用
本文介绍了如何使用 Flutter 创建一个简单的计算器应用,包括基本的加减乘除运算。文章详细讲解了界面布局、计算逻辑和状态管理的实现步骤,通过具体的代码示例展示了如何构建计算器界面、处理用户输入和显示计算结果。
62 0
|
16天前
|
传感器 开发框架 物联网
鸿蒙next选择 Flutter 开发跨平台应用的原因
鸿蒙(HarmonyOS)是华为推出的一款旨在实现多设备无缝连接的操作系统。为了实现这一目标,鸿蒙选择了 Flutter 作为主要的跨平台应用开发框架。Flutter 的跨平台能力、高性能、丰富的生态支持和与鸿蒙系统的良好兼容性,使其成为理想的选择。通过 Flutter,开发者可以高效地构建和部署多平台应用,推动鸿蒙生态的快速发展。
128 0
|
16天前
|
Dart JavaScript 前端开发
Flutter 的 Widget 概述与常用 Widgets 与鸿蒙 Next 的对比
Flutter 是 Google 开发的开源 UI 框架,用于快速构建高性能的移动、Web 和桌面应用。Flutter 通过 Widget 构建 UI,每个 UI 元素都是 Widget,包括文本、按钮、图片等。Widget 不仅描述外观,还描述行为,是不可变的。常见的 Widget 包括结构型(Container、Column、Row)、呈现型(Text、Image)、交互型(ElevatedButton)和状态管理型(StatefulWidget)。Flutter 与鸿蒙 Next 在组件化架构、开发语言、布局系统、性能和跨平台支持方面各有优势
67 0