HarmonyOS4.0系列——03、声明式UI、链式编程、事件方法、以及自定义组件简单案例

HarmonyOS4.0系列——03、声明式UI、链式编程、事件方法、以及自定义组件简单案例

声明式 UI

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

如果组件的接口定义没有包含必选构造参数,则组件后面的“()”不需要配置任何内容。例如,Divider组件不包含构造参数(下划线组件

$r`形式引入应用资源,可应用于多语言场景

struct 内部无需用 let 声明,外部需要用 let 声明

使用 Stage 模型的应用,需要在module.json5配置文件中声明权限。
例如加载网络图片,语法:

Image(src: string | Resource | media.PixelMap)

加载本地资源

Image("images/view.jpg").width(200);

加载网络图片需要申请权限
HarmonyOS4.0系列——03、声明式UI、链式编程、事件方法、以及自定义组件简单案例_第1张图片

Image(
  "https://profile-avatar.csdnimg.cn/63cdb1329d9e45b49ccbc25c10e23baf_nanchen_j.jpg!1"
); // 实际使用时请替换为真实地址
@Entry
@Component
struct DeclarativeUi {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text('声明式UI')
        Divider()
        Image('https://profile-avatar.csdnimg.cn/63cdb1329d9e45b49ccbc25c10e23baf_nanchen_j.jpg!1')
          .width(100)
          .height(100)

      }
      .width('100%')
    }
    .height('100%')
  }
}

实际效果:
HarmonyOS4.0系列——03、声明式UI、链式编程、事件方法、以及自定义组件简单案例_第2张图片

Resource 资源
使用资源格式可以跨包/跨模块引入图片,resources 文件夹下的图片都可以通过$r 资源接口读取到并转换到 Resource 格式。

Image($r("app.media.icon"));

也可以将图片放在rawfile文件夹下
其中:$r代表的是资源类型,app.media为应用程序下的媒体资源

链式编程

一条一条编写,类似于JQuery

Text("声明式UI").fontSize(40).fontColor(Color.Green);

事件方法

动态监听值的变化,例:

@Entry
@Component
struct DeclarativeUi {
  @State num:number = 3
  build() {
    Row() {
      Column() {
        Text('声明式UI'+this.num)
          .fontSize(40)
          .fontColor(Color.Green)
        Divider()

        Button('click++').onClick(()=>{
          this.num++
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

@Entry
@Component
struct DeclarativeUi {
  num:number = 3 // 不会具有响应式
}

注意:在struct中声明变量动态绑定需要用到@Struct,否则不会是响应式

private

定义私有变量,写法:

private content:string = 'Southern Wind'

自定义组件

当我们需要写多个文本不同但样式相同的效果,需要使用自定义组件来实现,下面是需要注意的几点

  1. @Component:@Component装饰器仅能装饰struct关键字声明的数据结构。struct被@Component装饰后具备组件化的能力,需要实现build方法描述UI,一个struct只能被一个@Component装饰。
  2. @Entry 放在哪个组件前面,哪个就在页面上显示
  3. Entry组件中,build()中必须有且只有一个更组件
  4. 自定义组件必须定义build()函数

定义一个itemComponent的组件

@Component
struct itemComponent{
  //  private私有变量
  private content:string = 'Southern Wind'
  build(){
    // @ts-ignore
    Row(){
      Image($r('app.media.gray'))
        .width(30)
        .height(30)
        .margin(15)
      Text(this.content)
        .fontSize(30)
        .fontColor(Color.White)

    }
    .backgroundColor(Color.Gray)
    .borderRadius(20)
    .padding({
      right:20
    })
    .margin({
      top:15
    })
  }
}

在主组件中渲染


@Entry
@Component
struct Index {
  build() {
    Row() {
      Column() {
        Divider()
        itemComponent()
        itemComponent({
          content:'我是第二个文本'
        })
        itemComponent()
        itemComponent()
      }
      .width('100%')
    }
    .height('100%')
  }
}

效果:

HarmonyOS4.0系列——03、声明式UI、链式编程、事件方法、以及自定义组件简单案例_第3张图片

这里可以看到,自定义组件定义的变量在渲染第二次的时候可以被赋值替换

自定义组件具有以下特点

可组合:允许开发者使用系统组件、及其属性和方法

可复用:自定义组件可以被其他组件复用,并作为不同的实例在不同的父组件或容器中使用。

数据驱动UI更新:通过状态变量的改变,来驱动UI的刷新。

@Component
struct itemComponent{
  //  private私有变量
  private content:string = 'Southern Wind'

  @State isStatus:boolean = false

  build(){
    // @ts-ignore
    Row(){
      Image(this.isStatus ?$r('app.media.gray'):$r('app.media.gou'))
        .width(30)
        .height(30)
        .margin(15)
      Text(this.content)
        .fontSize(30)
        .fontColor(Color.White)

    }
    .backgroundColor(Color.Gray)
    .borderRadius(20)
    .padding({
      right:20
    })
    .margin({
      top:15
    })
    .onClick(()=>{
      this.isStatus = !this.isStatus
    })
  }
}

图片交互时渲染可以采用三元表达式的写法进行书写

效果:

HarmonyOS4.0系列——03、声明式UI、链式编程、事件方法、以及自定义组件简单案例_第4张图片

添加下滑线:TextDecorationType文本枚举类型

  .decoration({
    type:TextDecorationType.None
  })

请添加图片描述

完整代码及效果:


@Entry
@Component
struct Index {
  build() {
    Row() {
      Column() {
        Divider()
        itemComponent()
        itemComponent({
          content:'我是第二个文本'
        })
        itemComponent()
        itemComponent()
      }
      .width('100%')
    }
    .height('100%')
  }
}



@Component
struct itemComponent{
  //  private私有变量
  private content:string = 'Southern Wind'

  @State isStatus:boolean = true

  build(){
    // @ts-ignore
    Row(){
      Image(this.isStatus ?$r('app.media.gray'):$r('app.media.gou'))
        .width(30)
        .height(30)
        .margin(15)
      Text(this.content)
        .fontSize(30)
        .fontColor(Color.White)
        .decoration({
          type:this.isStatus ?TextDecorationType.LineThrough :TextDecorationType.None,
          color:Color.Black
        })

    }
    .backgroundColor(Color.Gray)
    .borderRadius(20)
    .padding({
      right:20
    })
    .margin({
      top:15
    })
    .onClick(()=>{
      this.isStatus = !this.isStatus
    })
  }
}


图标:HarmonyOS4.0系列——03、声明式UI、链式编程、事件方法、以及自定义组件简单案例_第5张图片
HarmonyOS4.0系列——03、声明式UI、链式编程、事件方法、以及自定义组件简单案例_第6张图片

你可能感兴趣的:(HarmonyOS,TS,前端,typescript,鸿蒙,harmonyos)