1# 组件预览 2 3<!--Kit: ArkUI--> 4<!--Subsystem: ArkUI--> 5<!--Owner: @huyisuo--> 6<!--Designer: @zhangboren--> 7<!--Tester: @TerryTsao--> 8<!--Adviser: @zhang_yixin13--> 9 10组件预览支持以自定义组件为最小单位进行预览，方便开发者查看单个自定义组件UI效果。 11 12> **说明：** 13> 14> 从API version 7 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 15> 16> 组件预览详情，请查看[组件预览特性文档](../../../ui/ui-ide-previewer.md#组件预览)。 17 18## @Preview装饰器 19 20@Preview装饰器用来装饰自定义组件，从而实现组件预览。 21 22> **说明：** 23> 24> 该接口支持在ArkTS卡片中使用，但是ArkTS卡片中暂不支持组件预览。 25 26**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 27 28**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 29 30**系统能力：** SystemCapability.ArkUI.ArkUI.Full 31 32## PreviewParams<sup>9+</sup> 33 34@Preview参数对象。 35 36设置@Preview的参数，指定预览设备的相关属性，如不同设备、不同屏幕状态等。 37 38**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 39 40**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 41 42**系统能力：** SystemCapability.ArkUI.ArkUI.Full 43 44| 参数名 | 类型 | 必填 | 说明 | 45| ------ | ------ | ---- | ------------------------------------------------------------ | 46| title | string | 否 | 组件预览模块名，默认为自定义组件名称。 | 47| width| number | 否 | 预览设备的宽度，单位：px，默认为1080px。 | 48| height | number | 否 | 预览设备的高度，单位：px，默认为2340px。 | 49| locale| string | 否 | 预览设备的语言，如zh_CN、en_US等，默认为zh_CN。 | 50| colorMode | string | 否 | 显示的亮暗模式，当前支持的取值为light或dark，默认为light。 | 51| deviceType | string | 否 | 组件预览渲染的设备类型，默认为Phone。 | 52| dpi | number | 否 | 预览设备的屏幕DPI值，默认为480。 | 53| orientation | string | 否 | 预览设备的横竖屏状态，取值为portrait或landscape，默认为portrait。 | 54| roundScreen | boolean | 否 | 预览的屏幕形状是否为圆形，默认为false。true为圆形，false为非圆形。 | 55 56## 示例 57 58该示例分别使用了不传参@Preview和传参的@Preview。 59 60```ts 61@Entry 62@Preview 63@Component 64struct Index { 65 @State message: string = 'default Preview'; 66 67 build() { 68 RelativeContainer() { 69 Text(this.message) 70 .fontSize(50) 71 .fontWeight(FontWeight.Bold) 72 } 73 .height('100%') 74 .width('100%') 75 } 76} 77 78@Preview({ 79 title: 'PreviewParams', 80 width: 540, 81 height: 1170 82}) 83@Component 84struct Test { 85 @State message: string = 'PreviewParams'; 86 87 build() { 88 RelativeContainer() { 89 Text(this.message) 90 .fontSize(40) 91 .fontWeight(FontWeight.Bold) 92 } 93 .height('100%') 94 .width('100%') 95 } 96} 97``` 98