@BuilderParam-Dekorator: Referenziert @Builder-Funktionen

Wenn Sie eine benutzerdefinierte Komponente erstellen und der Komponente bestimmte Funktionen hinzufügen möchten, z. B. das Hinzufügen einer Klick-Sprung-Operation in der benutzerdefinierten Komponente. Wenn Sie die Ereignismethode direkt in die Komponente einbetten, wird diese Funktion an allen Stellen hinzugefügt, an denen die benutzerdefinierte Komponente eingeführt wird. Um dieses Problem zu lösen, führt ArkUI den @BuilderParam-Dekorator ein. @BuilderParam wird zum Dekorieren von Variablen verwendet, die auf @Builder-Methoden verweisen. Entwickler können dieser Eigenschaft Werte zuweisen, wenn sie benutzerdefinierte Komponenten initialisieren, um benutzerdefinierten Komponenten bestimmte Funktionen hinzuzufügen. Dieser Dekorator wird verwendet, um ein von einer beliebigen Benutzeroberfläche beschriebenes Element zu deklarieren, ähnlich einem Slot-Platzhalter.

Anweisungen für Dekorateure

Initialisieren Sie die mit @BuilderParam dekorierte Methode

Mit @BuildParam dekorierte Methoden können nur durch benutzerdefinierte Build-Funktionen (mit @Builder dekorierte Methoden) initialisiert werden.

Initialisieren Sie @BuilderParam lokal mit der benutzerdefinierten Build-Funktion der besitzenden benutzerdefinierten Komponente oder der globalen benutzerdefinierten Build-Funktion.

@Builder function GlobalBuilder0() {}

@Component
struct Child {
  @Builder doNothingBuilder() {};

  @BuilderParam aBuilder0: () => void = this.doNothingBuilder;
  @BuilderParam aBuilder1: () => void = GlobalBuilder0;
  build(){}
}

Eine mit @BuildParam dekorierte Methode, um die untergeordnete Komponente mit einer benutzerdefinierten Build-Funktion der übergeordneten Komponente zu initialisieren.

@Component
struct Child {
  @BuilderParam aBuilder0: () => void;

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

@Entry
@Component
struct Parent {
  @Builder componentBuilder() {
    Text(`Parent builder `)
  }

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

Beachten Sie, dass dies auf den richtigen Hinweis hinweist.

Wenn im folgenden Beispiel die übergeordnete Komponente this.componentBuilder() aufruft, zeigt this.label auf die Komponente, zu der es gehört, nämlich „Parent“. @Builder ComponentBuilder() wird an die untergeordnete Komponente @BuilderParam aBuilder0 übergeben. Wenn this.aBuilder0() in der untergeordneten Komponente aufgerufen wird, zeigt this.label auf die Bezeichnung des untergeordneten Elements, nämlich „Child“.

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

Szenen, die verwendet werden sollen

Parameterinitialisierungskomponente

Die mit @BuilderParam dekorierte Methode kann in zwei Formen mit oder ohne Parameter vorliegen und muss mit dem Typ der @Builder-Methode übereinstimmen, auf die verwiesen wird. Der von @BuilderParam dekorierte Methodentyp muss mit dem @Builder-Methodentyp konsistent sein.

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

Initialisierungskomponente für den nachgestellten Abschluss

Wenn mit @BuilderParam dekorierte Eigenschaften in benutzerdefinierten Komponenten verwendet werden, können diese auch durch abschließende Abschlüsse initialisiert werden. Beim Initialisieren einer benutzerdefinierten Komponente folgt auf die Komponente eine geschweifte Klammer „{}“, um ein abschließendes Abschlussszenario zu bilden.

veranschaulichen

In diesem Szenario gibt es in der benutzerdefinierten Komponente nur ein einziges Attribut, das mit @BuilderParam dekoriert ist.

Übergeben Sie den Inhalt des abschließenden Abschlusses als mit @Builder dekorierte Funktion an @BuilderParam. Beispiele sind wie folgt:

// xxx.ets
@Component
struct CustomContainer {
  @Prop header: string;
  @BuilderParam closer: () => void

  build() {
    Column() {
      Text(this.header)
        .fontSize(30)
      this.closer()
    }
  }
}

@Builder function specificParam(label1: string, label2: string) {
  Column() {
    Text(label1)
      .fontSize(30)
    Text(label2)
      .fontSize(30)
  }
}

@Entry
@Component
struct CustomContainerUser {
  @State text: string = 'header';

  build() {
    Column() {
      // 创建CustomContainer，在创建CustomContainer时，通过其后紧跟一个大括号“{}”形成尾随闭包
      // 作为传递给子组件CustomContainer @BuilderParam closer: () => void的参数
      CustomContainer({ header: this.text }) {
        Column() {
          specificParam('testA', 'testB')
        }.backgroundColor(Color.Yellow)
        .onClick(() => {
          this.text = 'changeHeader';
        })
      }
    }
  }
}

HarmonyOS Learning Road Ark Development Framework – ArkTS-Sprache lernen (Grundlegende Grammatik 4)