序文
前のセクションでは @Styles デコレータを紹介しました: スタイル拡張に @Styles を使用できるコンポーネントの再利用スタイルを定義します。今日は、@Styles に基づく別のデコレータ - @Extend 装飾コンテナ (ネイティブ コンポーネント スタイルの拡張にも使用されます) について説明します。 。
注⚠️: API バージョン 9 以降、このデコレーターは ArkTS カードでの使用をサポートします。
@Extendデコレータの使用手順
次に、@Extend デコレータの具体的な使い方を構文と使用ルールの観点から紹介します。
1: 構文を使用する
@Extend(UIComponentName) function functionName {
... }
2:利用ルール
- @Styles とは異なり、@Extend はグローバルにのみ定義でき、コンポーネント内では定義できません。
- @Styles とは異なり、@Extend は、指定されたコンポーネントのプライベート プロパティとプライベート イベントのカプセル化と、同じコンポーネントの @Extend メソッドの事前定義をサポートします。
// @Extend(Text)可以支持Text的私有属性fontColor
@Extend(Text) function fancy () {
.fontColor(Color.Red)
}
// superFancyText可以调用预定义的fancy
@Extend(Text) function superFancyText(size:number) {
.fontSize(size)
.fancy()
}
- @Styles とは異なり、@Extend で装飾されたメソッドはパラメータをサポートします。開発者は呼び出し時にパラメータを渡すことができ、呼び出しは TS メソッドの値渡し呼び出しの後に続きます。
// xxx.ets
@Extend(Text) function fancy (fontSize: number) {
.fontColor(Color.Red)
.fontSize(fontSize)
}
@Entry
@Component
struct FancyUse {
build() {
Row({
space: 10 }) {
Text('Fancy')
.fancy(16)
Text('Fancy')
.fancy(24)
}
}
}
- @Extend 装飾メソッドのパラメーターには、Event イベントのハンドルとして機能する関数を指定できます。
@Extend(Text) function makeMeClick(onClick: () => void) {
.backgroundColor(Color.Blue)
.onClick(onClick)
}
@Entry
@Component
struct FancyUse {
@State label: string = 'Hello World';
onClickHandler() {
this.label = 'Hello ArkUI';
}
build() {
Row({
space: 10 }) {
Text(`${
this.label}`)
.makeMeClick(this.onClickHandler.bind(this))
}
}
}
- @Extend のパラメータは状態変数にすることができます。状態変数が変化すると、UI が更新されて通常どおりレンダリングされます。
@Extend(Text) function fancy (fontSize: number) {
.fontColor(Color.Red)
.fontSize(fontSize)
}
@Entry
@Component
struct FancyUse {
@State fontSizeValue: number = 20
build() {
Row({
space: 10 }) {
Text('Fancy')
.fancy(this.fontSizeValue)
.onClick(() => {
this.fontSizeValue = 30
})
}
}
}
@Extend デコレータの使用シナリオ
次の例では、3 つの Text コンポーネントを宣言しており、それぞれに fontStyle、fontWeight、および backgroundColor スタイルが設定されています。
@Entry
@Component
struct FancyUse {
@State label: string = 'Hello World'
build() {
Row({
space: 10 }) {
Text(`${
this.label}`)
.fontStyle(FontStyle.Italic)
.fontWeight(100)
.backgroundColor(Color.Blue)
Text(`${
this.label}`)
.fontStyle(FontStyle.Italic)
.fontWeight(200)
.backgroundColor(Color.Pink)
Text(`${
this.label}`)
.fontStyle(FontStyle.Italic)
.fontWeight(300)
.backgroundColor(Color.Orange)
}.margin('20%')
}
}
@Extend はスタイルの組み合わせを再利用します。例は次のとおりです。
@Extend(Text) function fancyText(weightValue: number, color: Color) {
.fontStyle(FontStyle.Italic)
.fontWeight(weightValue)
.backgroundColor(color)
}
@Extend を通じてスタイルを結合すると、コードがより簡潔になり、読みやすさが向上します。
@Entry
@Component
struct FancyUse {
@State label: string = 'Hello World'
build() {
Row({
space: 10 }) {
Text(`${
this.label}`)
.fancyText(100, Color.Blue)
Text(`${
this.label}`)
.fancyText(200, Color.Pink)
Text(`${
this.label}`)
.fancyText(300, Color.Orange)
}.margin('20%')
}
}
要約する
@Extend デコレータと @Styles デコレータは両方とも拡張コンポーネント スタイルに属しているため、スタイルを取得する効果が得られます。ただし、両者には明らかな違いがあり、より具体的な利用シーンに合わせて、両者の違いを踏まえて柔軟に使い分けることができます。
- @Extend は、@Styles に基づいてネイティブ コンポーネント スタイルを拡張するために使用されます。
- @Styles とは異なり、@Extend はグローバルにのみ定義でき、コンポーネント内では定義できません。
- @Styles とは異なり、@Extend は、指定されたコンポーネントのプライベート プロパティとプライベート イベントのカプセル化と、同じコンポーネントの @Extend メソッドの事前定義をサポートします。
- @Styles とは異なり、@Extend で装飾されたメソッドはパラメータをサポートします。開発者は呼び出し時にパラメータを渡すことができ、呼び出しは TS メソッドの値渡し呼び出しの後に続きます。
- @Extend 装飾メソッドのパラメーターには、Event イベントのハンドルとして機能する関数を指定できます。状態変数にすることもでき、状態変数が変化すると、UI が更新され、通常どおりレンダリングされます。