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

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

前言

本文将全面介绍在 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',  //指定当前组件预览渲染的设备类型，默认为Phone
  width: 1080,  //预览设备的宽度，单位：px
  height: 2340,  //预览设备的长度，单位：px
  colorMode: 'light',  //显示的亮暗模式，当前支持取值为light
  dpi: 480,  //预览设备的屏幕DPI值
  locale: 'zh_CN',  //预览设备的语言，如zh_CN、en_US等
  orientation: 'portrait',  //预览设备的横竖屏状态，取值为portrait或landscape
  roundScreen: 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 类型调整。并非所有的HarmonyOS/OpenHarmony API都能在预览器中完全模拟或生效。

总结

DevEco Studio 提供了高效的预览工具链，包括实时预览、多设备适配、组件双向联动及模拟测试能力。通过灵活使用这些功能，开发者可以在不依赖真机的情况下，快速迭代 UI 设计，验证逻辑效果，极大地提升了开发效率和体验。

开发过程中遇到问题？随时私信我，一起探讨解决方案~