自定義組件的生命周期

aboutToAppear

aboutToAppear?(): void

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

從API version 9開始，該接口支持在ArkTS卡片中使用。

aboutToDisappear

aboutToDisappear?(): void

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

從API version 9開始，該接口支持在ArkTS卡片中使用。

onPageShow

onPageShow?(): void

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

onPageHide

onPageHide?(): void

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

onBackPress

onBackPress?(): void

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

// xxx.ets
@Entry
@Component
struct IndexComponent {
  @State textColor: Color = Color.Black;

  onPageShow() {
    this.textColor = Color.Blue;
    console.info('IndexComponent onPageShow');
  }

  onPageHide() {
    this.textColor = Color.Transparent;
    console.info('IndexComponent onPageHide');
  }

  onBackPress() {
    this.textColor = Color.Red;
    console.info('IndexComponent onBackPress');
  }

  build() {
    Column() {
      Text('Hello World')
        .fontColor(this.textColor)
        .fontSize(30)
        .margin(30)
    }.width('100%')
  }
}

onLayout9+

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

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

從API version 9開始，該接口支持在ArkTS卡片中使用。

參數(shù)：

onMeasure9+

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

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

從API version 9開始，該接口支持在ArkTS卡片中使用。

參數(shù)：

LayoutChild9+

子組件布局信息。

從API version 9開始，該接口支持在ArkTS卡片中使用。

LayoutBorderInfo9+

子組件border信息。

從API version 9開始，該接口支持在ArkTS卡片中使用。

LayoutInfo9+

子組件layout信息。

從API version 9開始，該接口支持在ArkTS卡片中使用。

// xxx.ets
@Entry
@Component
struct Index {
  build() {
    Column() {
      CustomLayout() {
        ForEach([1, 2, 3], (index) => {
          Text('Sub' + index)
            .fontSize(30)
            .borderWidth(2)
        })
      }
    }
  }
}


@Component
struct CustomLayout {
  @BuilderParam builder: () => {};

  onLayout(children: Array<LayoutChild>, constraint: ConstraintSizeOptions) {
    let pos = 0;
    children.forEach((child) => {
      child.layout({ position: { x: pos, y: pos }, constraint: constraint })
      pos += 100;
    })
  }

  onMeasure(children: Array<LayoutChild>, constraint: ConstraintSizeOptions) {
    let size = 100;
    children.forEach((child) => {
      child.measure({ minHeight: size, minWidth: size, maxWidth: size, maxHeight: size })
      size += 50;
    })
  }

  build() {
    this.builder()
  }
}