HarmonyOS (13) – Detaillierte Erläuterung des Lebenszyklus benutzerdefinierter Komponenten

Vorwort

Die Lebenszyklus-Rückruffunktion einer benutzerdefinierten Komponente wird verwendet, um den Benutzer über den Lebenszyklus der benutzerdefinierten Komponente zu informieren. Diese Rückruffunktionen sind privat und werden vom Entwicklungsframework zu einem bestimmten Zeitpunkt während der Laufzeit aufgerufen. Diese Rückruffunktionen können nicht manuell aufgerufen werden aus der Bewerbung. .

Die folgende Abbildung zeigt den von @Entry dekorierten Komponentenlebenszyklus:
Fügen Sie hier eine Bildbeschreibung ein

Heute werden wir anhand des obigen Flussdiagramms die einzelnen Schritte von der ersten Erstellung über das erneute Rendern bis zum Löschen benutzerdefinierter Komponenten im Detail erläutern.

Beschreibung: Ermöglichen Sie die Verwendung von Promise- und asynchronen Rückruffunktionen in Lebenszyklusfunktionen, z. B. der Erfassung von Netzwerkressourcen, der Timer-Einstellung usw.;

aboutToAppear

aboutToAppear?(): void

Die Funktion „aboutToAppear“ wird nach dem Erstellen einer neuen Instanz der benutzerdefinierten Komponente und vor der Ausführung ihrer Funktion „build()“ ausgeführt. Ermöglicht das Ändern von Statusvariablen in der Funktion „aboutToAppear“, und die Änderungen werden bei nachfolgenden Ausführungen der Funktion „build()“ wirksam.

Hinweis⚠️: Ab API-Version 9 unterstützt diese Schnittstelle die Verwendung in ArkTS-Karten.

aboutToDisappear

aboutToDisappear?(): void

Die Funktion aboutToDisappear wird ausgeführt, bevor die benutzerdefinierte Komponente zerstört und zerstört wird. Das Ändern von Statusvariablen in der Funktion „aboutToDisappear“ ist nicht zulässig, insbesondere die Änderung von @Link-Variablen kann zu einem instabilen Anwendungsverhalten führen.

Hinweis⚠️: Ab API-Version 9 unterstützt diese Schnittstelle die Verwendung in ArkTS-Karten.

onPageShow

onPageShow?(): void

Es wird bei jeder Anzeige der Seite einmal ausgelöst, einschließlich Szenarios wie dem Routing-Prozess und dem Eintreten der Anwendung in den Vordergrund. Nur mit @Entry dekorierte benutzerdefinierte Komponenten werden wirksam.

onPageHide

onPageHide?(): void

Es wird jedes Mal einmal ausgelöst, wenn die Seite ausgeblendet wird, einschließlich Szenarien wie dem Routing-Prozess und der Eingabe der Anwendung in das Front- und Backend. Nur mit @Entry dekorierte benutzerdefinierte Komponenten werden wirksam.

onBackPress

onBackPress?(): void

Wird ausgelöst, wenn der Benutzer auf die Schaltfläche „Zurück“ klickt, werden nur mit @Entry dekorierte benutzerdefinierte Komponenten wirksam.

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

onLayout⁹⁺

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

Beim Anpassen des Komponentenlayouts übergibt das Framework die Informationen zum untergeordneten Knoten der benutzerdefinierten Komponente und seinen eigenen Größenbereich über onLayout an die benutzerdefinierte Komponente. Das Ändern von Statusvariablen in der onLayout-Funktion ist nicht zulässig.

Hinweis⚠️: Ab API-Version 9 unterstützt diese Schnittstelle die Verwendung in ArkTS-Karten.

Parameterbeschreibung:

Parametername	Parametertyp	Parameterbeschreibung
Kinder	Array<LayoutChild>	Informationen zum Unterkomponenten-Layout.
Zwang	ConstraintSizeOptions	Informationen zur Einschränkung der übergeordneten Komponente.

onMeasure⁹⁺

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

Wenn die benutzerdefinierte Komponente ihre Größe bestimmt, übergibt das Framework die Informationen zum untergeordneten Knoten der benutzerdefinierten Komponente und seinen eigenen Größenbereich über onMeasure an die benutzerdefinierte Komponente. Das Ändern von Zustandsvariablen in der onMeasure-Funktion ist nicht zulässig.

Hinweis⚠️: Ab API-Version 9 unterstützt diese Schnittstelle die Verwendung in ArkTS-Karten.
Parameterbeschreibung:

Parametername	Parametertyp	Parameterbeschreibung
Kinder	Array<LayoutChild>	Informationen zum Unterkomponenten-Layout.
Zwang	ConstraintSizeOptions	Informationen zur Einschränkung der übergeordneten Komponente.

LayoutChild⁹⁺

Informationen zum Unterkomponenten-Layout.

Ab API-Version 9 unterstützt diese Schnittstelle die Verwendung in ArkTS-Karten.

Parametername	Parametertyp	beschreiben
Name	Zeichenfolge	Name der Unterkomponente.
Ausweis	Zeichenfolge	ID der untergeordneten Komponente.
Zwang	ConstraintSizeOptions	Beschränkungsabmessungen für Unterkomponenten.
borderInfo	LayoutBorderInfo	Informationen zum Rand der Unterkomponente.
Position	Position	Positionskoordinaten der Unterkomponente.
messen	(childConstraint: ConstraintSizeOptions) => ungültig	Rufen Sie diese Methode auf, um den Größenbereich der Unterkomponente einzuschränken.
Layout	(LayoutInfo: LayoutInfo) => ungültig	Rufen Sie diese Methode auf, um die Standortinformationen untergeordneter Komponenten einzuschränken.

LayoutBorderInfo⁹⁺

Informationen zum Rand der Unterkomponente.

Ab API-Version 9 unterstützt diese Schnittstelle die Verwendung in ArkTS-Karten.

Parametername	Parametertyp	beschreiben
Rahmenbreite	Kantenbreiten	Rahmenbreitentyp, der zur Beschreibung der Breite des Komponentenrahmens in verschiedenen Richtungen verwendet wird.
Marge	Marge	Randtyp, der zur Beschreibung der Ränder von Komponenten in verschiedenen Richtungen verwendet wird.
Polsterung	Polsterung	Polsterungstyp, der zur Beschreibung der Polsterung in verschiedenen Richtungen der Komponente verwendet wird.

LayoutInfo⁹⁺

Informationen zum Unterkomponenten-Layout.

Ab API-Version 9 unterstützt diese Schnittstelle die Verwendung in ArkTS-Karten.

Parametername	Parametertyp	beschreiben
Position	Position	Positionskoordinaten der Unterkomponente.
Zwang	ConstraintSizeOptions	Beschränkungsabmessungen für Unterkomponenten.

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

Der Laufeffekt ist wie folgt:

Fügen Sie hier eine Bildbeschreibung ein