【鸿蒙HarmonyOS开发笔记】使用@Preview装饰器预览组件

概述

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

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

@Preview({title: 'FoodImage'
})
@Component
struct FoodImageDisplayPreview {build() {Flex() {FoodImageDisplay({ foodItem: getDefaultFoodData() })}}
}

以上示例的组件预览效果如下图所示：
在这里插入图片描述

组件预览默认的预览设备为Phone，若您想在不同的设备，或者不同的屏幕形状，或者不同设备语言等情况下的组件预览效果，可以通过设置@Preview的参数，指定预览设备的相关属性。若不设置@Preview的参数，默认的设备属性如下所示：

@Preview({title: 'Component1',  //预览组件的名称deviceType: 'phone',  //指定当前组件预览渲染的设备类型，默认为Phonewidth: 1080,  //预览设备的宽度，单位：pxheight: 2340,  //预览设备的长度，单位：pxcolorMode: 'light',  //显示的亮/暗模式，取值为light或darkdpi: 480,  //预览设备的屏幕DPI值locale: 'zh_CN',  //预览设备的语言，如zh_CN、en_US等orientation: 'portrait',  //预览设备的横竖屏状态，取值为portrait或landscaperoundScreen: false  //设备的屏幕形状是否为圆形
})

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

@Component
struct Title {context: stringbuild() {Text(this.context)}
}

建议按如下方式预览：

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