@BuilderParam デコレータ: @Builder 関数を参照します

カスタムコンポーネントを作成し、カスタムコンポーネントにクリックジャンプ操作を追加するなど、コンポーネントに特定の機能を追加する場合。イベントメソッドをコンポーネントに直接埋め込むと、カスタムコンポーネントが導入されるすべての場所にこの関数が追加されます。この問題を解決するために、ArkUI は @BuilderParam デコレーターを導入しました。@BuilderParam は、@Builder メソッドを指す変数を装飾するために使用されます。開発者は、カスタムコンポーネントを初期化するときに、このプロパティに値を割り当てて、カスタムコンポーネントに特定の関数を追加できます。このデコレーターは、スロットプレースホルダーと同様に、UI によって記述される要素を宣言するために使用されます。

デコレータの説明

@BuilderParam で修飾されたメソッドを初期化する

@BuildParam で装飾されたメソッドは、カスタムビルド関数 (@Builder で装飾されたメソッド) によってのみ初期化できます。

所有するカスタムコンポーネントのカスタムビルド関数またはグローバルカスタムビルド関数を使用して、@BuilderParam をローカルで初期化します。

@Builder function GlobalBuilder0() {}

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

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

@BuildParam で修飾されたメソッド。親コンポーネントのカスタムビルド関数を使用して子コンポーネントを初期化します。

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

これは正しいものを指していることに注意してください。

次の例では、親コンポーネントが this.componentBuilder() を呼び出すと、this.label はそれが属するコンポーネント、つまり「Parent」を指します。@BuildercomponentBuilder() は、子コンポーネント @BuilderParam aBuilder0 に渡されます。this.aBuilder0() が子コンポーネントで呼び出されるとき、this.label は子のラベル、つまり「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 })
    }
  }
}

使用するシーン

パラメータ初期化コンポーネント

@BuilderParam で修飾されたメソッドは、パラメーターの有無にかかわらず 2 つの形式にすることができ、指す @Builder メソッドのタイプと一致する必要があります。@BuilderParam によって修飾されたメソッドの型は、@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 })
    }
  }
}

後続クロージャ初期化コンポーネント

カスタムコンポーネントで @BuilderParam で装飾されたプロパティを使用する場合、末尾のクロージャを通じて初期化することもできます。カスタムコンポーネントを初期化する場合、コンポーネントの後に中括弧 "{}" が続き、末尾のクロージャシナリオが形成されます。

説明する

このシナリオでは、カスタムコンポーネント内に @BuilderParam で装飾された属性が 1 つだけあります。

後続クロージャの内容を @Builder 装飾関数として @BuilderParam に渡します。例は次のとおりです。

// 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 開発フレームワーク - ArkTS 言語の学習 (基本文法 4)