• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# UI预览
2
3<!--Kit: ArkUI-->
4<!--Subsystem: ArkUI-->
5<!--Owner: @huyisuo-->
6<!--Designer: @zhangboren-->
7<!--Tester: @TerryTsao-->
8<!--Adviser: @zhang_yixin13-->
9
10DevEco Studio为开发者提供了UI预览功能，方便查看UI效果并随时调整页面布局。预览支持页面预览和组件预览。图1中左侧图标![ide_previewer_002](figures/ide_previewer_002.png)表示页面预览，右侧图标![ide_previewer_003](figures/ide_previewer_003.png)表示组件预览。
11
12> **说明：**
13>
14> 操作系统和真机设备的差异可能导致预览效果与真机效果不同。预览效果仅作参考，实际效果以真机为准。
15
16**图1** 预览图标
17
18![ide_previewer_001](figures/ide_previewer_001.png)
19
20## 页面预览
21
22ArkTS应用/原子化服务均支持页面预览。页面预览通过在工程的ets文件中，给自定义组件添加@Entry装饰器，即可以查看当前UI页面效果。
23
24- 启动方式：选中需要预览的ets页面，点击右侧侧边栏的Previewer按钮，启动页面预览。
25
26- 热加载：在启动页面预览的前提下，添加、删除或修改UI组件后，通过`Ctrl+S`保存，预览器会同步刷新预览效果，无需重新启动预览。
27
28- 路由能力：支持通过路由能力进行页面切换查看其它页面预览效果。
29
30在页面预览的基础上，提供了极速预览和Inspector双向预览两种特性。下面将详细说明这两种特性。
31
32### 极速预览
33
34支持在修改组件的属性时，无需使用`Ctrl+S`进行保存，可以直接观察到修改后的预览效果。极速预览默认开启，若需关闭，点击预览器右上角按钮![ide_previewer_004](figures/ide_previewer_004.png)即可。
35
36> **注意：**
37>
38> 部分应用场景不支持极速预览：
39> - 不显示的组件。
40> - 新增或删除组件。
41> - 包含private变量或无类型的controller的组件。
42> - 使用了@Builder、@Style、@Extend等装饰器的组件。
43> - 修改使用import导入外部组件/模块的组件。
44> - 修改状态变量。
45
46效果如图2所示：
47
48**图2** 极速预览演示图
49
50![ide_previewer_001](figures/ide_previewer_001.gif)
51
52### inspector双向预览
53
54支持ets文件与预览器的双向预览。使用时，点击预览器界面图标![ide_previewer_006](figures/ide_previewer_006.png)开启双向预览功能。
55
56开启双向预览功能后，支持代码编辑器、UI界面和组件树之间的联动：
57
581. 选中预览器界面中的组件，组件树上对应的组件将被选中，同时代码编辑器中的布局文件中对应的代码块高亮显示。
59
602. 选中布局文件中的代码块，预览器界面将高亮显示，组件树上的组件节点将呈现被选中的状态。
61
623. 选中组件树中的组件，对应的代码块和预览器界面将高亮显示。
63
644. 在预览界面，通过组件的属性面板修改可修改的属性或样式。预览界面的修改会自动同步到代码编辑器中，并实时刷新预览器界面。代码编辑器中的源码修改也会实时刷新预览器界面，并更新组件树信息及组件属性。
65
66效果如图3所示：
67
68**图3** inspector双向预览演示图
69
70![ide_previewer_002](figures/ide_previewer_002.gif)
71
72## 组件预览
73
74ArkTS应用/原子化服务支持组件预览功能。组件预览通过在自定义组件前添加[`@Preview`](../reference/apis-arkui/arkui-ts/ts-universal-component-previewer.md#preview装饰器)装饰器实现。在单个源文件中，最多可以使用10个`@Preview`装饰自定义组件。启动方式：
75- 当组件被\@Entry和\@Preview装饰时，点击右侧侧边栏的Previewer按钮，启动页面预览，页面加载成功后，点击![ide_previewer_003](figures/ide_previewer_003.png)，切换到组件预览。
76- 当组件仅被\@Preview装饰时，点击右侧侧边栏的Previewer按钮，则默认为组件预览。
77
78组件预览时，使用@Preview装饰器的默认属性（请参考[\@Preview装饰器](../reference/apis-arkui/arkui-ts/ts-universal-component-previewer.md#previewparams9)）进行效果显示。可以通过设置@Preview的参数，指定预览设备的相关属性，包括设备类型、屏幕形状等。
79
80@Preview的使用参考如下示例：
81
82```ts
83@Preview
84@Component
85struct ComponentPreviewOne {
86  build() {
87    Column() {
88      Text('this is component previewer One')
89        .height(80)
90        .fontSize(30)
91      // $r('app.media.startIcon')需要替换为开发者所需的图像资源文件
92      Image($r('app.media.startIcon'))
93        .height(300)
94        .width(300)
95    }
96  }
97}
98@Preview
99@Component
100struct ComponentPreviewTwo {
101  build() {
102    Column() {
103      Text('this is component previewer Two')
104        .height(80)
105        .fontSize(30)
106        .fontColor(Color.Pink)
107      // $r('app.media.startIcon')需要替换为开发者所需的图像资源文件
108      Image($r('app.media.startIcon'))
109        .height(300)
110        .width(300)
111    }
112  }
113}
114```
115
116效果如图4所示：
117
118**图4** 组件预览效果图
119
120![ide_previewer_005](figures/ide_previewer_005.png)
121
122## 动态修改分辨率
123
124同一个应用/元服务可以运行在多个设备上，因不同设备的屏幕分辨率、形状、大小等不同，开发者需要在不同的设备上查看应用/元服务的UI布局和交互效果。预览支持动态修改分辨率，方便开发者随时查看不同设备上的页面显示效果。启动方式：启动页面预览后，点击右上角![ide_preview_007](figures/ide_previewer_007.png)，即可拖动页面选中框动态修改当前设备的屏幕大小。
125
126效果如图5所示：
127
128**图5** 动态修改分辨率效果图
129
130![ide_previewer_003](figures/ide_previewer_003.gif)
131