Harmony OS ---Remark 2

Harmony OS学习 — 声明式UI

Arkts 声明式UI 框架

装饰器 – 注解@

声明式UI —的灵魂，也是现代开发代码的灵魂，主要通过注解，自动生成可执行代码，达到快速开发的效果。（主要通过 编译时的apt技术 自动生成想要的对应的类）

自定义组件 – ui

自定义组件为ui，可方便快速移植和开发 ui 。ui—代码化—
基础使用

1. 声明装饰器 @Component
2. 给相应的组件名 Struct 组件名{}

@Component
Struct Hello{
}

UI 描述

具体的UI怎么描述

build( ) {

}

内置组件

框架中默认内置的基础和布局组件，可直接被开发者调用，比如示例中的 Column、Text、Divider、Button。

事件方法

用于添加组件对事件的响应逻辑，统一通过事件方法进行设置，如跟随在Button后面的onClick()。

属性方法

用于组件属性的配置，统一通过属性方法进行设置，如fontSize()、width()、height()、color() 等，可通过链式调用的方式设置多项属性。

自定义组件的组成

@Entry

页面入口 – 加入这个标记为这个page 的入口。—会有多出几个生命周期

@Component

组件 ---- 这个 为 自定义组件的 注解

配置属性与布局

组件有相对的方法通过 点（.）去设置对应的值

Text('Hello World')
  .fontSize(50)

改变组件状态

当你需要改变ui的时候，使用@State 变量值改变时 – 这时的UI在State的本级与下级目录的ui会发生重组。–从而导致ui的刷新

@State

@State isComplete : boolean = false;

if (this.isComplete) {
  Text("完成")
} else {
 	Text("未完成")
}

@Builder

重构当前代码。

@Link

用于页面 和 组件中的 State 交互 。

循环渲染列表数据

ForEach(this.totalTasks,(item) => {
           TodoItem({content:item})