概述
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’}}
}