ArKTs项目中基础知识点（一）

90后的晨仔2024-07-27 20:35

一、关键字

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 开关

可以看到不同的设备展示效果