一、关键字
1、@Entry
@Entry 表示这是个入口组件；
@Entry装饰的自定义组件用作页面的默认入口组件，加载页面时，将首先创建并呈现；自定义组件，组件只有放到被 @Entry修饰的组件内 才会在页面上显示
一个页面有且仅能有一个@Entry
2、@Component
@Component 表示这是个自定义组件；
@Component装饰的struct表示该结构体具有组件化能力能够成为一个独立的组件。
3、@State
@State装饰的变量，或称为状态变量，一旦变量拥有了状态属性，就和自定义组件的渲染绑定起来。当状态改变时，UI会发生对应的渲染改变。 在状态变量相关装饰器中，@State是最基础的，使变量拥有状态属性的装饰器，它也是大部分状态变量的数据源。 @State装饰的变量，与声明式范式中的其他被装饰变量一样，是私有的，只能从组件内部访问，在声明时必须指定其类型和本地初始化。初始化也可选择使用命名参数机制从父组件完成初始化。
二、页面预览与组件预览的操作
1.页面预览
ArkTS应用/服务支持页面预览:
然而页面预览必须通过在工程的ets文件头部添加@Entry才能实现。
2.组件预览
ArkTS应用/服务支持组件预览:
-
(1). 组件预览支持实时预览，不支持动态图和动态预览。组件预览通过在组件前添加注解@Preview实现，在单个源文件中，最多可以使用10个@Preview装饰自定义组件。
-
(2). 组件预览默认的预览设备为Phone，若您想查看不同的设备，或者不同的屏幕形状，或者不同设备语言等情况下的组件预览效果，可以通过设置@Preview的参数，指定预览设备的相关属性。若不设置@Preview的参数，默认的设备属性如下所示：
less
@Preview({
title: 'Component1', //预览组件的名称
deviceType: 'phone', //指定当前组件预览渲染的设备类型，默认为Phone
width: 1080, //预览设备的宽度，单位：px
height: 2340, //预览设备的长度，单位：px
colorMode: 'light', //显示的亮暗模式，当前支持取值为light
dpi: 480, //预览设备的屏幕DPI值
locale: 'zh_CN', //预览设备的语言，如zh_CN、en_US等
orientation: 'portrait', //预览设备的横竖屏状态，取值为portrait或landscape
roundScreen: false //设备的屏幕形状是否为圆形
})三、同时预览不同设备上的效果
- 开启Multi-profile preview 开关
- 可以看到不同的设备展示效果