声明式UI语法

一、ArkTS的基本组成

1、装饰器：用于装饰类、结构、方法以及变量，并赋予其特殊的含义。如上述示例中@Entry、@Component和@State都是装饰器，@Component表示自定义组件，@Entry表示该自定义组件为入口组件，@State表示组件中的状态变量，状态变量变化会触发UI刷新。

2、UI描述：以声明式的方式来描述UI的结构，例如build()方法中的代码块。

3、系统组件：ArkUI框架中默认内置的基础和容器组件，可直接被开发者调用，比如示例中的Column、Text、Divider、Button。

4、属性方法：组件可以通过链式调用配置多项属性，如fontSize()、width()、height()、backgroundColor()等。

5、事件方法：组件可以通过链式调用设置多个事件的响应逻辑，如跟随在Button后面的onClick()。

二、自定义组件的基本结构

1、struct：自定义组件基于struct实现，struct + 自定义组件名 + {...}的组合构成自定义组件，不能有继承关系。对于struct的实例化，可以省略new。

2、@Component：@Component装饰器仅能装饰struct关键字声明的数据结构。struct被@Component装饰后具备组件化的能力，需要实现build方法描述UI，一个struct只能被一个@Component装饰。

3、build()函数：build()函数用于定义自定义组件的声明式UI描述，自定义组件必须定义build()函数。

4、@Entry：@Entry装饰的自定义组件将作为UI页面的入口。在单个UI页面中，最多可以使用@Entry装饰一个自定义组件。

5、build()函数：所有声明在build()函数的语句，我们统称为UI描述，UI描述需要遵循以下规则：

• @Component装饰的自定义组件，其build()函数下的根节点唯一且必要，可以为非容器组件，其中ForEach禁止作为根节点。
• 不允许声明本地变量
• 不允许在UI描述里直接使用console.info，但允许在方法或者函数里使用
• 不允许创建本地的作用域
• 不允许调用没有用@Builder装饰的方法，允许系统组件的参数是TS方法的返回值。

原文地址：https://blog.csdn.net/weixin_44196561/article/details/142705414

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！