当前位置：首页 > news >正文

【HarmonyOS5】DevEco Studio 预览器与模拟工具详解

news 2025/5/31 16:45:32

在这里插入图片描述

⭐本期内容：【HarmonyOS5】DevEco Studio 预览器与模拟工具详解
🏆系列专栏：鸿蒙HarmonyOS：探索未来智能生态新纪元

文章目录

前言
查看ArkTS/JS预览效果
查看ArkUI预览效果
Profile Manager
查看多端设备预览效果
Inspector双向预览
预览数据模拟
支持使用预览器的API清单
总结

前言

本文将全面介绍在 DevEco Studio 中使用预览器进行 ArkTS/JS 与 ArkUI 界面开发的相关技巧与实践，帮助开发者更高效地完成 UI 设计、调试和多端适配。

查看ArkTS/JS预览效果

在开发 UI 代码过程中，无需复杂的调试流程：

添加或删除 UI 组件后，按 Ctrl + S 保存，即可立即刷新预览；

修改组件属性时，预览器会在亚秒级别内自动刷新，实现极速预览体验（目前仅支持 ArkTS 组件，支持部分数据绑定场景，如使用 @State 修饰的变量）。

预览器默认启用“实时预览”功能。如需关闭，可点击预览器右上角按钮手动关闭。

在这里插入图片描述

查看ArkUI预览效果

ArkUI 支持“页面预览”与“组件预览”两种模式：左侧图标为页面预览，右侧图标为组件预览。
在这里插入图片描述
页面预览通过在工程的ets文件头部添加@Entry实现。

组件预览通过在组件前添加注解@Preview实现，在单个源文件中，最多可以使用10个@Preview装饰自定义组件。

示例代码如下：

@Entry
@Component
struct Index {build(): void {Column() {Text('猜你喜欢111').fontColor('#FFFFFF').width('100%').margin({ bottom: 10 })List() {ListItem() {Row() {Text('内容示例').fontColor('#FFFFFF')}.width('100%').height(80).backgroundColor(Color.Blue).margin({ bottom: 10 })}}CardList()}.width('100%').height('100%').backgroundColor('#FF151414').padding({ left: 10, right: 10 }).expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])}
}@Component
struct CardList {private cards: Array<string> = ['商品1', '商品2', '商品3', '商品4']build(): void {Column() {Text('推荐商品').fontSize(20).fontColor('#FFFFFF').margin({ bottom: 15 })List({ space: 10 }) {ForEach(this.cards, (item: string, index: number) => {ListItem() {Text(item).fontSize(16).fontColor('#333333').textAlign(TextAlign.Center).width('100%').height(80)}.borderRadius(8).backgroundColor('#FFFFFF')})}.width('100%').layoutWeight(1)}.width('100%').height('100%').backgroundColor('#FF222222').padding(15)}
}@Preview({width: 360,height: 640,deviceType: 'phone'
})
@Component
struct IndexPreview {build(): void {Index()}
}@Preview({width: 360,height: 640,deviceType: 'phone'
})
@Component
struct CardListPreview {build(): void {CardList()}
}

如需预览不同设备形态或语言环境下的效果，可自定义 @Preview 参数。

@Preview({title: 'Component1',  //预览组件的名称deviceType: 'phone',  //指定当前组件预览渲染的设备类型，默认为Phonewidth: 1080,  //预览设备的宽度，单位：pxheight: 2340,  //预览设备的长度，单位：pxcolorMode: 'light',  //显示的亮暗模式，当前支持取值为lightdpi: 480,  //预览设备的屏幕DPI值locale: 'zh_CN',  //预览设备的语言，如zh_CN、en_US等orientation: 'portrait',  //预览设备的横竖屏状态，取值为portrait或landscaperoundScreen: false  //设备的屏幕形状是否为圆形
})

Profile Manager

Profile Manager 是用于管理不同预览设备配置的工具。点击预览器工具栏中的 Profile Manager 图标即可进入。
在这里插入图片描述
单击+ New Profile按钮，添加设备。

在Create Profile界面，填写新增设备的信息，如Profile ID（设备型号）、Device type（设备类型）、Resolution（分辨率）和Language and region（语言和区域）等。其中Device type只能选择module.json5中deviceTypes字段已定义的设备。

设备信息填写完成后，单击OK即可。

在这里插入图片描述

查看多端设备预览效果

通过开启 Profile Manager 中的 Multi-profile preview，可同时查看多个设备上的预览效果，提升跨端适配效率。

多端设备预览不支持动画的预览，如果需要查看动画在设备上的预览效果，请关闭Multi-device preview功能后在单设备预览界面进行查看。

在这里插入图片描述

Inspector双向预览

启用双向预览功能后，实现代码编辑、UI 界面与组件树之间的高效联动。选中 UI 中组件，代码及组件树联动高亮；修改属性或样式，自动同步到源代码；支持实时双向同步与联动查看，提高开发效率。
在这里插入图片描述

注意事项：

使用了数据绑定的组件属性无法在属性面板中修改；
含动画或带动画效果的组件不支持属性面板修改；
多设备预览模式下不支持开启双向预览功能。

预览数据模拟

由于预览场景与真机运行环境存在差异，部分接口无法返回真实数据（如电池电量、电压等），可使用 Hamock 提供的模拟功能。

在 oh-package.json5 中引入依赖，通过模拟接口或变量返回值，即可模拟不同场景下的 UI 展示效果，不影响业务逻辑。

"devDependencies": {"@ohos/hamock": "1.0.0"
}

在这里插入图片描述

支持使用预览器的API清单

支持等级	API 类型
✅ 完全支持	UI 组件、动画、布局、状态管理（`@State`, `@Prop`, `@Link`）、路由导航、基本存储等
⚠️ 部分支持	网络请求（需模拟数据）、媒体播放、部分传感器数据
❌ 不支持	摄像头、指纹识别、系统服务、需要权限的 API

注意：表格内容需根据实际支持的 API 类型调整。并非所有的HarmonyOS/OpenHarmony API都能在预览器中完全模拟或生效。