ArkTs快速入门

一、声明式UI

声明式UI是一种编写用户界面的范式。

1.1 声明组件

build() {
      Column() {
        Button({type:ButtonType.Circle}){
          Image('src/main/ets/pages/3.png')
            .width(25)
            .height(25)
        }
        .width(50)
        .height(50)
        .backgroundColor(Color.Red)
        .onClick(() =>{
          console.log('删除');
        })
      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center);
 
  }
}

1.2 自定义组件

使用自定义组件，可以使代码结构更加清晰，并且能提高代码的复用性

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  build() {
      Column() {
        RedButton({color:Color.Red}) //给自定义组件传参，必须是一个对象
        .onClick(() =>{
          console.log('删除');
        })
      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center);
  }
}
@Component
struct RedButton {
  color:Color = Color.Black;
 
  build() {
    Button({type:ButtonType.Circle}){
      Image('src/main/ets/pages/3.png')
        .width(25)
        .height(25)
    }
    .width(50)
    .height(50)
    .backgroundColor(this.color)
  }
}

1.3 渲染控制

1.3.1 条件渲染

条件渲染可根据应用的不同状态渲染不同的UI界面

1.3.2 循环渲染

循环渲染可使用ForEach语句基于一个数组来快速渲染一个组件列表

二、常用组件

2.1 图片

2.1.1图片参数

Image组件的参数类型为string | Resource | media PixeMap

Resource类型:

media PixeMap：

指的是像素位图，其通常是一个二维数组，数组中的每个元素对应着图片中的一个像素，其包含了该像素的颜色等信息。

2.1.2 常用属性

参数有string、number、Resource类型

2.1.3 图片缩放

2.1.4 图片插值

是图像过渡更加平滑