ArkTS-自定義組件學習

文章目錄

- - 創建自定義組件
  - 頁面和自定義組件生命周期
  - - 自定義組件和頁面的區別
    - 頁面生命周期(即被`@Entry`修飾的組件)
    - 組件生命周期(即被`@Component`修飾的組件)
  - @Builder裝飾器：自定義構建函數
  - - 按引用傳遞參數
    - 按值傳遞參數
  - @BuilderParam裝飾器：引用@Builder函數

這個ArkTS-自定義component引入只是一個入坑

創建自定義組件

@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`修飾的組件)

onPageShow：頁面每次顯示時觸發。
onPageHide：頁面每次隱藏時觸發一次。
onBackPress：當用戶點擊返回按鈕時觸發。

@Entry
@Component
struct Index {onPageShow(){console.info("Index頁面顯示了")}build() {Row() {//...}}
}

在這里插入圖片描述

組件生命周期(即被`@Component`修飾的組件)

aboutToAppear ：組件即將出現時回調該接口，具體時機為在創建自定義組件的新實例后，在執行其build()函數之前執行。
aboutToDisappear：在自定義組件即將析構銷毀時執行。

@Component
export  struct compTest{@State one:string = "Test"aboutToAppear(){console.info("自定義組件compTest調用了")}build(){// Row(){} //build中只能一個Row(橫向)或者是Column(縱向)Column(){//...}}

在這里插入圖片描述

@Builder裝飾器：自定義構建函數

官方@Builder裝飾器使用說明

按引用傳遞參數

ABuilder( $$ : { paramA1: string, paramB1 : string } );

示例

@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')}
}

按值傳遞參數

@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裝飾器

@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使用

@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

@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 })}}
}