4. ArkUI

声明式开发范式

• 装饰器：
  • @Component表示自定义组件；
  • @Entry表示该自定义组件为入口组件；
  • @State表示组件中的状态变量，状态变量变化会触发UI刷新
• UI描述

声明式UI描述

创建组件

无参数

Divider() 没有参数

有参数

例如：Image('https://xyz/test.jpg')

配置属性

Text('test')
  .fontSize(12)

配置事件

Button('Click me')
  .onClick(() => {
    this.myText = 'ArkUI';
  })

Button('add counter')
  .onClick(() => {
    this.counter += 2;
  })

配置子组件

Column() {
  Text('Hello')
    .fontSize(100)
  Divider()
  Text(this.myText)
    .fontSize(100)
    .fontColor(Color.Red)
}

创建自定义组件

？自定义组件的基本用法

HelloComponent.ets

@Component  
export  struct HelloComponent{  
  @State message:string = 'hello ,world!';  
  build() {  
    Row(){  
      Text(this.message)  
        .onClick(()=>{  
          this.message = 'Hello ArkUI!';  
        })  
    }  
  }}

ParentComponent.ets

import './HelloComponent'  
import { HelloComponent } from './HelloComponent'  
  
@Entry  
@Component  
struct ParentComponent{  
  build() {  
    Column(){  
      Text('ArkUI message')  
      HelloComponent({message:'Hello world!'})  
      Divider()  
      HelloComponent({message:'Hello ArkTS!'})  
    }  
  }}

自定义组件的基本结构

struct

自定义组件基于struct实现

@Component

此装饰器仅修饰struct关键字声明的数据结构

build()

用于自定义组件的声明式UI描述

@Entry

自定义组件作为UI页面的入口

build()函数

在build()函数中声明的语句统称为UI描述

• @Entry装饰的自定义组件，其build()函数下的根节点唯一且必要，且必须为容器组件。
• @Component装饰的自定义组件，其build()函数下的根节点唯一且必要，可以为非容器组件。
• 不允许声明本地变量
• 不允许使用console.info
• 不允许创建本地作用域

页面和自定义组件生命周期

自定义组件的创建和渲染流程

if/else条件渲染

ForEach循环渲染