鸿蒙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
來源:坚果派
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

目录
相关文章
|
9天前
鸿蒙应用开发从入门到实战(十六):线性布局案例
ArkUI提供了丰富的系统组件,用于制作鸿蒙原生应用APP的UI,本文通过简单案例演示如何使用Column和Row组件实现线性布局。
|
12天前
|
开发者 容器
鸿蒙应用开发从入门到实战(十四):ArkUI组件Column&Row&线性布局
ArkUI提供了丰富的系统组件,用于制作鸿蒙原生应用APP的UI,本文主要讲解Column和Row组件的使用以及线性布局的方法。
105 12
|
13天前
|
API 数据处理
鸿蒙应用开发从入门到实战(十三):ArkUI组件Slider&Progress
ArkUI提供滑块Slider与进度条Progress组件,用于鸿蒙原生APP开发。Slider支持拖动调节音量、亮度等,可设步长、方向及提示气泡;Progress支持线性、环形等多种样式,可自定义颜色、宽度与刻度,实时显示任务进度。
107 2
|
13天前
|
API 数据处理
鸿蒙应用开发从入门到实战(十三):ArkUI组件Slider&Progress
ArkUI提供了丰富的系统组件,用于制作鸿蒙原生应用APP的UI,本文主要讲解滑块Slider和进度条Progress组件的使用。
|
14天前
|
开发者
鸿蒙应用开发从入门到实战(十二):ArkUI组件Button&Toggle
ArkUI提供了丰富的系统组件,用于制作鸿蒙原生应用APP的UI,本文主要讲解按钮组件Button和Toggle的使用。
106 2
|
15天前
|
数据安全/隐私保护 开发者
鸿蒙应用开发从入门到实战(十一):ArkUI组件Text&TextInput
ArkUI提供了丰富的系统组件,用于制作鸿蒙原生应用APP的UI,本文主要讲解文本组件Text和TextInput的使用。
107 3
|
16天前
|
存储 编解码 JSON
鸿蒙应用开发从入门到实战(十):ArkUI图片组件Image
ArkUI提供了丰富的系统组件,用于制作鸿蒙原生应用APP的UI,本文主要讲解Image图片组件的使用。
119 1
|
18天前
|
JavaScript 开发者 索引
鸿蒙应用开发从入门到实战(九):ArkTS渲染控制
ArkTS拓展了TypeScript,可以结合ArkUI进行渲染控制,是的界面设计具有可编程性。本文简要描述鸿蒙应用开发中的条件渲染和循环渲染。
|
19天前
|
JavaScript
鸿蒙应用开发从入门到实战(八):ArkTS自定义组件语法
ArkUI除系统预置的组件外,还支持自定义组件。使用自定义组件,可使代码的结构更加清晰,并且能提高代码的复用性。
|
20天前
|
API
鸿蒙应用开发从入门到实战(七):ArkTS组件声明语法
《鸿蒙应用开发从入门到项目实战》系列文章持续更新中,陆续更新AI+编程、企业级项目实战等原创内容、欢迎关注!​本文从界面制作从组件声明开始,通过一个相对简单的案例来系统的学习 ArkTS 声明组件的语法。