自定義組件的生命周期

2024-01-22 18:25 更新

自定義組件的生命周期回調(diào)函數(shù)用于通知用戶該自定義組件的生命周期,這些回調(diào)函數(shù)是私有的,在運(yùn)行時(shí)由開(kāi)發(fā)框架在特定的時(shí)間進(jìn)行調(diào)用,不能從應(yīng)用程序中手動(dòng)調(diào)用這些回調(diào)函數(shù)。

說(shuō)明

允許在生命周期函數(shù)中使用Promise和異步回調(diào)函數(shù),比如網(wǎng)絡(luò)資源獲取,定時(shí)器設(shè)置等;

aboutToAppear

aboutToAppear?(): void

aboutToAppear函數(shù)在創(chuàng)建自定義組件的新實(shí)例后,在執(zhí)行其build()函數(shù)之前執(zhí)行。允許在aboutToAppear函數(shù)中改變狀態(tài)變量,更改將在后續(xù)執(zhí)行build()函數(shù)中生效。

從API version 9開(kāi)始,該接口支持在ArkTS卡片中使用。

aboutToDisappear

aboutToDisappear?(): void

aboutToDisappear函數(shù)在自定義組件析構(gòu)銷毀之前執(zhí)行。不允許在aboutToDisappear函數(shù)中改變狀態(tài)變量,特別是@Link變量的修改可能會(huì)導(dǎo)致應(yīng)用程序行為不穩(wěn)定。

從API version 9開(kāi)始,該接口支持在ArkTS卡片中使用。

onPageShow

onPageShow?(): void

頁(yè)面每次顯示時(shí)觸發(fā)一次,包括路由過(guò)程、應(yīng)用進(jìn)入前臺(tái)等場(chǎng)景,僅@Entry裝飾的自定義組件生效。

onPageHide

onPageHide?(): void

頁(yè)面每次隱藏時(shí)觸發(fā)一次,包括路由過(guò)程、應(yīng)用進(jìn)入后臺(tái)等場(chǎng)景,僅@Entry裝飾的自定義組件生效。

onBackPress

onBackPress?(): void

當(dāng)用戶點(diǎn)擊返回按鈕時(shí)觸發(fā),僅@Entry裝飾的自定義組件生效。

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct IndexComponent {
  5. @State textColor: Color = Color.Black;
  6. onPageShow() {
  7. this.textColor = Color.Blue;
  8. console.info('IndexComponent onPageShow');
  9. }
  10. onPageHide() {
  11. this.textColor = Color.Transparent;
  12. console.info('IndexComponent onPageHide');
  13. }
  14. onBackPress() {
  15. this.textColor = Color.Red;
  16. console.info('IndexComponent onBackPress');
  17. }
  18. build() {
  19. Column() {
  20. Text('Hello World')
  21. .fontColor(this.textColor)
  22. .fontSize(30)
  23. .margin(30)
  24. }.width('100%')
  25. }
  26. }

onLayout9+

onLayout?(children: Array<LayoutChild>, constraint: ConstraintSizeOptions): void

框架會(huì)在自定義組件布局時(shí),將該自定義組件的子節(jié)點(diǎn)信息和自身的尺寸范圍通過(guò)onLayout傳遞給該自定義組件。不允許在onLayout函數(shù)中改變狀態(tài)變量。

從API version 9開(kāi)始,該接口支持在ArkTS卡片中使用。

參數(shù):

參數(shù)名

類型

說(shuō)明

children

Array<LayoutChild>

子組件布局信息。

constraint

ConstraintSizeOptions

父組件constraint信息。

onMeasure9+

onMeasure?(children: Array<LayoutChild>, constraint: ConstraintSizeOptions): void

框架會(huì)在自定義組件確定尺寸時(shí),將該自定義組件的子節(jié)點(diǎn)信息和自身的尺寸范圍通過(guò)onMeasure傳遞給該自定義組件。不允許在onMeasure函數(shù)中改變狀態(tài)變量。

從API version 9開(kāi)始,該接口支持在ArkTS卡片中使用。

參數(shù):

參數(shù)名

類型

說(shuō)明

children

Array<LayoutChild>

子組件布局信息。

constraint

ConstraintSizeOptions

父組件constraint信息。

LayoutChild9+

子組件布局信息。

從API version 9開(kāi)始,該接口支持在ArkTS卡片中使用。

參數(shù)

參數(shù)類型

描述

name

string

子組件名稱。

id

string

子組件id。

constraint

ConstraintSizeOptions

子組件約束尺寸。

borderInfo

LayoutBorderInfo

子組件border信息。

position

Position

子組件位置坐標(biāo)。

measure

(childConstraint: ConstraintSizeOptions) => void

調(diào)用此方法對(duì)子組件的尺寸范圍進(jìn)行限制。

layout

(LayoutInfo: LayoutInfo) => void

調(diào)用此方法對(duì)子組件的位置信息進(jìn)行限制。

LayoutBorderInfo9+

子組件border信息。

從API version 9開(kāi)始,該接口支持在ArkTS卡片中使用。

參數(shù)

參數(shù)類型

描述

borderWidth

EdgeWidths

邊框?qū)挾阮愋停糜诿枋鼋M件邊框不同方向的寬度。

margin

Margin

外邊距類型,用于描述組件不同方向的外邊距。

padding

Padding

內(nèi)邊距類型,用于描述組件不同方向的內(nèi)邊距。

LayoutInfo9+

子組件layout信息。

從API version 9開(kāi)始,該接口支持在ArkTS卡片中使用。

參數(shù)

參數(shù)類型

描述

position

Position

子組件位置坐標(biāo)。

constraint

ConstraintSizeOptions

子組件約束尺寸。

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct Index {
  5. build() {
  6. Column() {
  7. CustomLayout() {
  8. ForEach([1, 2, 3], (index) => {
  9. Text('Sub' + index)
  10. .fontSize(30)
  11. .borderWidth(2)
  12. })
  13. }
  14. }
  15. }
  16. }
  17. @Component
  18. struct CustomLayout {
  19. @BuilderParam builder: () => {};
  20. onLayout(children: Array<LayoutChild>, constraint: ConstraintSizeOptions) {
  21. let pos = 0;
  22. children.forEach((child) => {
  23. child.layout({ position: { x: pos, y: pos }, constraint: constraint })
  24. pos += 100;
  25. })
  26. }
  27. onMeasure(children: Array<LayoutChild>, constraint: ConstraintSizeOptions) {
  28. let size = 100;
  29. children.forEach((child) => {
  30. child.measure({ minHeight: size, minWidth: size, maxWidth: size, maxHeight: size })
  31. size += 50;
  32. })
  33. }
  34. build() {
  35. this.builder()
  36. }
  37. }

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)