UI预览
====

DevEco Studio为开发者提供了UI预览功能，方便查看UI效果并随时调整页面布局。预览支持页面预览和组件预览。图1中左侧图标![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/96/v3/UScpOA0aQkGUkm11n-E7jw/zh-cn_image_0000002633848884.png?HW-CC-KV=V1&HW-CC-Date=20260709T132325Z&HW-CC-Expire=86400&HW-CC-Sign=64BCADB396EC4A2B4FDCAA8C13B3E75FD1DEDABC4339B58AC0906D406D76980A)表示页面预览，右侧图标![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/71/v3/9OL9wt0HSAqcRL8aD7usLQ/zh-cn_image_0000002634008788.png?HW-CC-KV=V1&HW-CC-Date=20260709T132325Z&HW-CC-Expire=86400&HW-CC-Sign=F1FC6E132CECB9C7CFDF49CB97F2F8E467D86EF93DC2AA77B66622DB197AC28A)表示组件预览。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/57/v3/3NaUyI7IQcuRonp0RpJ-jA/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260709T132325Z&HW-CC-Expire=86400&HW-CC-Sign=FEF250350B1383ED1F40F645A0D5A99050FD02096B64E63CA41EDCC274A8ECBF)

操作系统和真机设备的差异可能导致预览效果与真机效果不同。预览效果仅作参考，实际效果以真机为准。

**图1** 预览图标

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/5a/v3/8-EJZ2JvTMKvjSpEMLpW-A/zh-cn_image_0000002664207935.png?HW-CC-KV=V1&HW-CC-Date=20260709T132325Z&HW-CC-Expire=86400&HW-CC-Sign=7BCAFCD3BC55092CE87BFACC3C1F394291C85C23E1C00BA1A609E3136941036A)

#### 页面预览

ArkTS应用/元服务均支持页面预览。页面预览通过在工程的ets文件中，给自定义组件添加[@Entry](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-create-custom-components#entry)装饰器，即可以查看当前UI页面效果。

*   启动方式：选中需要预览的ets页面，点击右侧侧边栏的Previewer按钮，启动页面预览。
    
*   热加载：在启动页面预览的前提下，添加、删除或修改UI组件后，通过Ctrl+S保存，预览器会同步刷新预览效果，无需重新启动预览。
    
*   路由能力：支持通过路由能力进行页面切换查看其它页面预览效果。
    

在页面预览的基础上，提供了极速预览和Inspector双向预览两种特性。下面将详细说明这两种特性。

#### \[h2\]极速预览

支持在修改组件的属性时，无需使用Ctrl+S进行保存，可以直接观察到修改后的预览效果。极速预览默认开启，若需关闭，点击预览器右上角按钮![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/38/v3/hlN2V3HTQP2I1sLYvVEbRw/zh-cn_image_0000002664327995.png?HW-CC-KV=V1&HW-CC-Date=20260709T132325Z&HW-CC-Expire=86400&HW-CC-Sign=A53864733373B1F0DE9D3D5BA000A951B99DB0A5485DFE39F041E155E04EE239)即可。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/14/v3/u5BRNU_iQ4KrOLkiL6XMXg/caution_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260709T132325Z&HW-CC-Expire=86400&HW-CC-Sign=68DE4D82BC6F2BA4CE6C0F7B009A47EE3EEAE95B1034F8F2AA0FEB69144A1045)

部分应用场景不支持极速预览：

*   不显示的组件。
*   新增或删除组件。
*   包含private变量或无类型的controller的组件。
*   使用了[@Builder](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-builder)、[@Style](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-style)、[@Extend](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-extend)等装饰器的组件。
*   修改使用import导入外部组件/模块的组件。
*   修改状态变量。

效果如图2所示：

**图2** 极速预览演示图

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/9b/v3/ZFOeRoXhTLebc9plMzfZSw/zh-cn_image_0000002633848886.gif?HW-CC-KV=V1&HW-CC-Date=20260709T132325Z&HW-CC-Expire=86400&HW-CC-Sign=2BC80BAB0EE4AD16A8C4E5F7F0A3F91AD1022B010C69284ADC25C42EEF69C47F)

#### \[h2\]inspector双向预览

支持ets文件与预览器的双向预览。使用时，点击预览器界面图标![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/e0/v3/R-zKul4_Qh6LvyuAEPr6zA/zh-cn_image_0000002634008790.png?HW-CC-KV=V1&HW-CC-Date=20260709T132325Z&HW-CC-Expire=86400&HW-CC-Sign=509DFB1D6DA644D7E4B1D83D96F5ADB2CF5B834A12A89DB9494DFC996E6FF700)开启双向预览功能。

开启双向预览功能后，支持代码编辑器、UI界面和组件树之间的联动：

1.  选中预览器界面中的组件，组件树上对应的组件将被选中，同时代码编辑器中的布局文件中对应的代码块高亮显示。
    
2.  选中布局文件中的代码块，预览器界面将高亮显示，组件树上的组件节点将呈现被选中的状态。
    
3.  选中组件树中的组件，对应的代码块和预览器界面将高亮显示。
    
4.  在预览界面，通过组件的属性面板修改可修改的属性或样式。预览界面的修改会自动同步到代码编辑器中，并实时刷新预览器界面。代码编辑器中的源码修改也会实时刷新预览器界面，并更新组件树信息及组件属性。
    

效果如图3所示：

**图3** inspector双向预览演示图

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/9a/v3/VEhoLOBaQKGYuxmpJ4Iq3Q/zh-cn_image_0000002664207937.gif?HW-CC-KV=V1&HW-CC-Date=20260709T132325Z&HW-CC-Expire=86400&HW-CC-Sign=8A9BFDDBD5CFFDE984295619EBFE756B17E9647A32E27D204A6E395FDE8376B5)

#### 组件预览

ArkTS应用/元服务支持组件预览功能。组件预览通过在自定义组件前添加[@Preview](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-component-previewer#preview装饰器)装饰器实现。在单个源文件中，最多可以使用10个@Preview装饰自定义组件。启动方式：

*   当组件被@Entry和@Preview装饰时，点击右侧侧边栏的Previewer按钮，启动页面预览，页面加载成功后，点击![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/06/v3/Fbd5J68eQUu2jArTfNSkKQ/zh-cn_image_0000002634008788.png?HW-CC-KV=V1&HW-CC-Date=20260709T132325Z&HW-CC-Expire=86400&HW-CC-Sign=961A1D5D2047EF1441B61599AC684230328D4A4BCADCB46D0E4858098CE77EA6)，切换到组件预览。
*   当组件仅被@Preview装饰时，点击右侧侧边栏的Previewer按钮，则默认为组件预览。

组件预览时，使用@Preview装饰器的默认属性（请参考[PreviewParams](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-component-previewer#previewparams9)）进行效果显示。可以通过设置@Preview的参数，指定预览设备的相关属性，包括设备类型、屏幕形状等。

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

@Entry
@Preview
@Component
struct ComponentPreviewOne {
  build() {
    Column() {
      Text('this is component previewer One')
        .height(80)
        .fontSize(30)
      // $r('app.media.startIcon')需要替换为开发者所需的图像资源文件
      Image($r('app.media.startIcon'))
        .height(300)
        .width(300)
    }
  }
}

@Preview
@Component
struct ComponentPreviewTwo {
  build() {
    Column() {
      Text('this is component previewer Two')
        .height(80)
        .fontSize(30)
        .fontColor(Color.Pink)
      // $r('app.media.startIcon')需要替换为开发者所需的图像资源文件
      Image($r('app.media.startIcon'))
        .height(300)
        .width(300)
    }
  }
}

效果如图4所示：

**图4** 组件预览效果图

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/ff/v3/nGVNE0elQwmxLy4C7cbb4w/zh-cn_image_0000002664327997.png?HW-CC-KV=V1&HW-CC-Date=20260709T132325Z&HW-CC-Expire=86400&HW-CC-Sign=16B91572C3C9A56AADF2BEF8EEF222E19256456E5676DC854BDED9309AB0DE03)

#### 动态修改分辨率

同一个应用/元服务可以运行在多个设备上，因不同设备的屏幕分辨率、形状、大小等不同，开发者需要在不同的设备上查看应用/元服务的UI布局和交互效果。预览支持动态修改分辨率，方便开发者随时查看不同设备上的页面显示效果。启动方式：启动页面预览后，点击右上角![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/17/v3/qfIRrzcXTcSeMWKX9oRgHA/zh-cn_image_0000002633848888.png?HW-CC-KV=V1&HW-CC-Date=20260709T132325Z&HW-CC-Expire=86400&HW-CC-Sign=778DC1CAC249C1E38C95ED6116C00C192605FC8C3285A3CEBEDD7A59C56684C8)，即可拖动页面选中框动态修改当前设备的屏幕大小。

效果如图5所示：

**图5** 动态修改分辨率效果图

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/d1/v3/jZ0tjg33R065ZQHhCsUYYQ/zh-cn_image_0000002634008792.gif?HW-CC-KV=V1&HW-CC-Date=20260709T132325Z&HW-CC-Expire=86400&HW-CC-Sign=7F76C79E3787883EB79CBD66DE7599CCEA5B03D081BB1DB9C7264A6C58D3A023)