【HarmonyOS Next之旅】DevEco Studio使用指南(二十)

枫叶丹

发布于 2025-05-07 14:20:13

4300

文章被收录于专栏：C++C++

1 -> 查看ArkTS/JS预览效果

预览器支持ArkTS/JS应用/元服务“实时预览”和“动态预览”。

说明

预览支持Phone、Tablet、2in1、Car设备的ArkTS工程，支持Litewearable设备的JS工程。
预览器功能依赖于电脑显卡的OpenGL版本，OpenGL版本要求为3.2及以上。
预览时将不会运行Ability生命周期。
预览不支持引用HSP。引用了HSP的模块不支持预览，请直接在HSP内预览或模拟HSP。
预览场景下，不支持通过相对路径及绝对路径的方式访问resources目录下的文件。
预览不支持组件拖拽。
部分API不支持预览，如Ability、App、MultiMedia等模块。
Richtext、Web、Video、XComponent组件不支持预览。
不支持调用C++库的预览。
har在被应用/元服务使用时真机效果有区别，真机上实际效果应用不显示menubar，元服务显示menubar，但预览器都以不显示menubar为准。若开发har模块时，请注意被元服务使用时预览器效果与真机效果的不同。
实时预览：在开发界面UI代码过程中，如果添加或删除了UI组件，您只需Ctrl+S进行保存，然后预览器就会立即刷新预览结果。如果修改了组件的属性，则预览器会实时(亚秒级)刷新预览结果，达到极速预览的效果(当前版本极速预览仅支持ArkTS组件。支持部分数据绑定场景，如@State装饰的变量)。实时预览默认开启，如果不需要实时预览，请单击预览器右上角按钮，关闭实时预览功能。说明修改resources/base/profile目录下的配置文件(如main_pages.json/form_config.json)，不支持触发实时预览，需要点击重新加载。

动态预览：在预览器界面，可以在预览器中操作应用/元服务的界面交互动作，如单击、跳转、滑动等，与应用/元服务运行在真机设备上的界面交互体验一致。

以ArkTS为例，使用预览器的方法如下：

创建或打开一个ArkTS应用/元服务工程。本示例以打开一个本地ArkTS Demo工程为例。
在工程目录下，打开任意一个.ets文件(JS工程请打开.hml/.css/.js页面)。
可以通过如下任意一种方式打开预览器开关，显示效果如下图所示：

通过菜单栏，单击View > Tool Windows > Previewer打开预览器。
在编辑窗口右上角的侧边工具栏，单击Previewer，打开预览器。

2 -> 查看ArkUI预览效果

ArkUI预览支持页面预览与组件预览，下图中左侧图标

为页面预览，右侧图标

为组件预览。

2.1 -> 页面预览

ArkTS应用/元服务支持页面预览。页面预览通过在工程的ets文件头部添加@Entry实现。

@Entry的使用参考如下示例：

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

2.2 -> 组件预览

ArkTS应用/元服务支持组件预览。组件预览支持实时预览，不支持动态图和动态预览。组件预览通过在组件前添加注解@Preview实现，在单个源文件中，最多可以使用10个@Preview装饰自定义组件。

@Preview的使用参考如下示例：

@Preview({
  title: 'ContentTable'
})
@Component
struct ContentTablePreview {
  build() {
    Flex() {
      ContentTable({ foodItem: getDefaultFoodData() })
    }
  }
}

组件预览默认的预览设备为Phone，若您想查看不同的设备，或者不同的屏幕形状，或者不同设备语言等情况下的组件预览效果，可以通过设置@Preview的参数，指定预览设备的相关属性。若不设置@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  //设备的屏幕形状是否为圆形
})

请注意，如果被预览的组件是依赖参数注入的组件，建议的预览方式是：定义一个组件片段，在该片段中声明将要预览的组件，以及该组件依赖的入参，并在组件片段上标注@Preview注解，以表明将预览该片段中的内容。例如，要预览如下组件：

@Component
struct Title {
  @Prop context: string; 
  build() {
    Text(this.context)
  }
}

建议按如下方式预览：

@Preview
@Component    //定义组件片段TitlePreview
struct TitlePreview {
  build() {
    Title({ context: 'MyTitle' })    //在该片段中声明将要预览的组件Title，以及该组件依赖的入参 {context: 'MyTitle'}
  }
}

3 -> Profile Manager

由于真机设备有丰富的设备型号，不同设备型号的屏幕分辨率可能不一样。因此，在HarmonyOS应用/元服务开发过程中，由于设备类型繁多，可能需要查看在不同设备上的界面显示效果。对此，DevEco Studio的预览器提供了Profile Manager功能，支持自定义预览设备Profile(包含分辨率和语言)，从而可以通过定义不同的预览设备Profile，查看HarmonyOS应用/元服务在不同设备上的预览显示效果。当前支持自定义设备分辨率及系统语言。

定义设备后，可以在Previewer右上角，单击

按钮，打开Profile管理器，切换预览设备。

同时，Profile Manager还支持多设备预览功能。

下面以自定义一款Phone设备为例，介绍设备Profile Manager的使用方法。

1. 在预览器界面，打开Profile Manager界面。

2. 在Profile Manager界面，单击+ New Profile按钮，添加设备。

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