ArkTS-自定义组件学习

文章目录

这个ArkTS-自定义component引入只是一个入坑

创建自定义组件

ts 复制代码
@Component
export  struct compTest{
  @State one:string = "Test"
  build(){
    // Row(){} //build中只能一个Row(横向)或者是Column(纵向)
    Column(){
      Text(this.one)//Text文本和文本内容
        .fontSize(25)//文本字体大小
        .fontColor("#f00")//文本字体颜色
        .onClick(()=>{//文本字体的点击事件
          this.one = 'hello ArkTS' //改变文本
        })
    }
  }
}

创建组件,以上三个是关键信息,意思就是组件就要有@Component装饰器和struct(跟java中的class一个性质),在ArkTS中必须要定义build(){}固定格式

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

自定义组件和页面的区别
  • 自定义组件:@Component装饰的UI单元,可以组合多个系统组件实现UI的复用。
  • 页面 :即应用的UI页面。可以由一个或者多个自定义组件组成,@Entry装饰的自定义组件为页面的入口组件,即页面的根节点,一个页面有且仅能有一个@Entry。只有被@Entry装饰的组件才可以调用页面的生命周期
页面生命周期(即被@Entry修饰的组件)
ts 复制代码
@Entry
@Component
struct Index {

  onPageShow(){
    console.info("Index页面显示了")
  }

  build() {
    Row() {
      //...
    }
  }
}
组件生命周期(即被@Component修饰的组件)
  • aboutToAppear :组件即将出现时回调该接口,具体时机为在创建自定义组件的新实例后,在执行其build()函数之前执行
  • aboutToDisappear在自定义组件即将析构销毁时执行
ts 复制代码
@Component
export  struct compTest{
  @State one:string = "Test"

  aboutToAppear(){
    console.info("自定义组件compTest调用了")
  }

  build(){
    // Row(){} //build中只能一个Row(横向)或者是Column(纵向)
    Column(){
      //...
    }
  }

@Builder装饰器:自定义构建函数

官方@Builder装饰器使用说明

按引用传递参数
ts 复制代码
ABuilder( $$ : { paramA1: string, paramB1 : string } );

示例

ts 复制代码
@Builder function myBuilderTest($$: { param: string }){
  Row(){
    Text(`${$$.param}`)
  }
}

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  
  build() {
    Row() {
      Column(){
        myBuilderTest({param:this.message})
      }
      .width('100%')
    }
    .height('100%')
    .backgroundColor('#fff')
  }
}
按值传递参数
ts 复制代码
@Builder function myBuilderTest(param: string){
  Row(){
    Text(`${param}`)
  }
}

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  
  build() {
    Row() {
      Column(){
        myBuilderTest(this.message)
      }
      .width('100%')
    }
    .height('100%')
    .backgroundColor('#fff')
  }
}

也是上面的效果,但是按引用传递参数可以传入对象形式的参数

@BuilderParam装饰器:引用@Builder函数

意思就是自定义组件中添加跳转操作和事件方法会导致引入所有引入该组件的自定义组件都会添加这个功能。为了解决这个问题所以出现了@BuilderParam装饰器

ts 复制代码
@Builder function myBuilderTest($$: { param: string,param1:string }){
  Row(){
    Button(`区分${$$.param1}`).onClick(()=>{
      console.info(`${$$.param}触发事件了`)
    })
  }
}

@Entry
@Component
struct Index {
  @Builder myBuildTest2(){
    Column(){
      Button(`额`).onClick(()=>{
        console.info(`额触发事件了`)
      })
    }
  };
  
  @BuilderParam Build1: ($$:{ param: string,param1:string }) => void = myBuilderTest;
  @BuilderParam Build2: () => void = this.myBuildTest2;
  
  build() {
    Row() {
      Column(){
        myBuilderTest({param:this.message,param1:'这是事件1'})
        this.Build2()
      }
      .width('100%')
    }
    .height('100%')
    .backgroundColor('#fff')
  }
}

子组件中@BuilderParam.父组件@Builder使用

ts 复制代码
@Component
struct Child {
  label: string = `Child`
  @BuilderParam aBuilder0: () => void;

  build() {
    Column() {
      this.aBuilder0()
    }
  }
}

@Entry
@Component
struct Parent {
  label: string = `Parent`

  @Builder componentBuilder() {
    Text(`${this.label}`)
  }

  build() {
    Column() {
      this.componentBuilder()
      Child({ aBuilder0: this.componentBuilder })
    }
  }
}

俩个组件之间的Builder

ts 复制代码
@Builder function GlobalBuilder1($$ : {label: string }) {
  Text($$.label)
    .width(400)
    .height(50)
    .backgroundColor(Color.Blue)
}

@Component
struct Child {
  label: string = 'Child'
  // 无参数类,指向的componentBuilder也是无参数类型
  @BuilderParam aBuilder0: () => void;
  // 有参数类型,指向的GlobalBuilder1也是有参数类型的方法
  @BuilderParam aBuilder1: ($$ : { label : string}) => void;

  build() {
    Column() {
      this.aBuilder0()
      this.aBuilder1({label: 'global Builder label' } )
    }
  }
}

@Entry
@Component
struct Parent {
  label: string = 'Parent'

  @Builder componentBuilder() {
    Text(`${this.label}`)
  }

  build() {
    Column() {
      this.componentBuilder()
      Child({ aBuilder0: this.componentBuilder, aBuilder1: GlobalBuilder1 })
    }
  }
}
相关推荐
迷曳9 小时前
27、鸿蒙Harmony Next开发:ArkTS并发(Promise和async/await和多线程并发TaskPool和Worker的使用)
前端·华为·多线程·harmonyos
迷曳14 小时前
24、鸿蒙Harmony Next开发:不依赖UI组件的全局自定义弹出框 (openCustomDialog)
dialog·前端·ui·harmonyos·鸿蒙
平谷一勺21 小时前
鸿蒙状态栏操作
华为·harmonyos·沉浸式状态栏
Georgewu2 天前
【HarmonyOS组件/模板集成创新活动-如何高效开发鸿蒙应用 (鸿社圈子)】
harmonyos
前端世界2 天前
跨平台 App 如何无痛迁移到鸿蒙系统?全流程实战+Demo 教程
华为·harmonyos
龙儿筝2 天前
鸿蒙和Android知识点
android·harmonyos
迷曳2 天前
17、鸿蒙Harmony Next开发:状态管理(组件拥有的状态和应用拥有的状态)
前端·harmonyos·鸿蒙
zhanshuo2 天前
不同品牌的设备也能“心有灵犀”?带你玩转鸿蒙分布式跨端协同
harmonyos
万少2 天前
云测试提前定位和解决问题 萤火故事屋 上架流程
前端·harmonyos·客户端
htt23213 天前
用uniapp开发鸿蒙应用(暂停更新-根据项目更新,现在项目未开始)
华为·uni-app·harmonyos