ArkTs声明式UI描述

1 创建组件

声明式UI描述

ArKTS以声明方式组合和扩展组件来描述应用程序的UI，同时还提供了基本的属性、事件和子组件配置方法，帮助开发者实现应用交互逻辑

创建组件

根据组件构造方法的不同，创建组件包含有参数和无参数两种方式，

无参数

如果组件的接口定义没有包含必选构造参数，则组件后面的"0"不需要配置任何内容。例如，Divider组件不包含构造参数:

Column() {
    //文字组件  无参数
    Text()
    //分割线组件  无参数
    Divider()
}

有参数

如果组件的接口定义包含构造参数，则在组件后面的“()“配置相应参数。

• Image组件的必选参数src。

 //图片组件，必须要参数，否则报错
Image('https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png')

• Text组件的非必选参数content。

//文字组件  有参数
Text('HELLO') 

• 变量或表达式也可以用于参数赋值，其中表达式返回的结果类型必须满足参数类型要求。

例如，设置变量或表达式来构造lmage和Text组件的参数。

@Entry
@Component
struct Index { 
  @State title:string ="你好！";
  img_src:string= 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png';
  public p:string ='p'; //公共的
  private n:number=10; //私有的
  protected flag:boolean = true; //受保护的
  //UI描述
  build() {
    Row() {//容器组件：水平方向布局容器
      Column() {//容器组件：垂直方向布局容器
        Text(`${this.title}${this.n}`);
        Image(this.img_src);
      }
      .width('100%')
    }
    .height('100%')
  }
}

2 配置属性

属性方法以".“链式调用的方式配置系统组件的样式和其他属性，建议每个属性方法单独写一行。

• 配置Text组件的字体大小。

Text('text')
   .fontSize(30) 

• 配置组件的多个属性

Image(this.img_src)
  .width(300)
  .height(100)

• 除了直接传递常量参数外，还可以传递变量或表达式

Text('he11o')
.fontSize(this.size)
Image('test.jpg')
.width(this.count%2===0?100:200)//表达式定义宽度
.height(this.offset + 100)

• 对于系统组件，ArkUl还为其属性预定义了一些枚举类型供开发者调用，枚举类型可以作为参数传递，但必须满足参数类型要求。

例如，可以按以下方式配置Text组件的颜色和字体样式

Text('he11o')
.fontsize(20)
.fontcolor(color.Red)//枚举类型定义颜色
.fontweight(fontweight.Bo1d)//枚举类型加粗

3 配置事件

事件方法以”.“链式调用的方式配置系统组件支持的事件，建议每个事件方法单独写一行。

• 使用箭头函数配置组件的事件方法。

Button('click me')
          //箭头函数配置事件，点击按钮改变title变量的值
          .onClick(()=>{
            this.title = '按钮点击了'
          })

• 使用匿名函数表达式配置组件的事件方法，要求使用bind，以确保函数体中的this指向当前组件

Button('click me')

            // 普通函数配置事件，this指向不对会直接写报错，所以需要设置bind属性
          .onClick(function(){
            this.title = "标题点击"
          }.bind(this))

使用组件的成员函数配置组件的事件方法。

普通函数

//函数的定义
  myHandler():void{
    this.title = "myHandler"
  }
...
.onClick(this.myHandler.bind(this))

箭头函数

//函数的定义
myHandler2 = ():void=>{
    this.title = "myHandler2"
  }
...
.onClick(this.myHandler2)