@Styles裝飾器：定義組件重用樣式
如果每個組件的樣式都需要單獨設(shè)置，在開發(fā)過程中會出現(xiàn)大量代碼在進(jìn)行重復(fù)樣式設(shè)置，雖然可以復(fù)制粘貼，但為了代碼簡潔性和后續(xù)方便維護(hù)，我們推出了可以提煉公共樣式進(jìn)行復(fù)用的裝飾器@Styles。
@Styles裝飾器可以將多條樣式設(shè)置提煉成一個方法，直接在組件聲明的位置調(diào)用。通過@Styles裝飾器可以快速定義并復(fù)用自定義樣式。用于快速定義并復(fù)用自定義樣式。
裝飾器使用說明
- 當(dāng)前@Styles僅支持通用屬性和通用事件。
- @Styles方法不支持參數(shù)，反例如下。
// 反例： @Styles不支持參數(shù)
@Styles function globalFancy (value: number) {
.width(value)
}- @Styles可以定義在組件內(nèi)或全局，在全局定義時需在方法名前面添加function關(guān)鍵字，組件內(nèi)定義時則不需要添加function關(guān)鍵字。
// 全局
@Styles function functionName() { ... }
// 在組件內(nèi)
@Component
struct FancyUse {
@Styles fancy() {
.height(100)
}
}- 定義在組件內(nèi)的@Styles可以通過this訪問組件的常量和狀態(tài)變量，并可以在@Styles里通過事件來改變狀態(tài)變量的值，示例如下：
@Component
struct FancyUse {
@State heightVlaue: number = 100
@Styles fancy() {
.height(this.heightVlaue)
.backgroundColor(Color.Yellow)
.onClick(() => {
this.heightVlaue = 200
})
}
}- 組件內(nèi)@Styles的優(yōu)先級高于全局@Styles。
框架優(yōu)先找當(dāng)前組件內(nèi)的@Styles，如果找不到，則會全局查找。
使用場景
以下示例中演示了組件內(nèi)@Styles和全局@Styles的用法。
// 定義在全局的@Styles封裝的樣式
@Styles function globalFancy () {
.width(150)
.height(100)
.backgroundColor(Color.Pink)
}
@Entry
@Component
struct FancyUse {
@State heightVlaue: number = 100
// 定義在組件內(nèi)的@Styles封裝的樣式
@Styles fancy() {
.width(200)
.height(this.heightVlaue)
.backgroundColor(Color.Yellow)
.onClick(() => {
this.heightVlaue = 200
})
}
build() {
Column({ space: 10 }) {
// 使用全局的@Styles封裝的樣式
Text('FancyA')
.globalFancy ()
.fontSize(30)
// 使用組件內(nèi)的@Styles封裝的樣式
Text('FancyB')
.fancy()
.fontSize(30)
}
}
}@Extend裝飾器：定義擴(kuò)展組件樣式
在前文的示例中，可以使用@Styles用于樣式的擴(kuò)展，在@Styles的基礎(chǔ)上，我們提供了@Extend，用于擴(kuò)展原生組件樣式。
語法
@Extend(UIComponentName) function functionName { ... }用規(guī)則
- 和@Styles不同，@Extend僅支持定義在全局，不支持在組件內(nèi)部定義。
- 和@Styles不同，@Extend支持封裝指定的組件的私有屬性和私有事件和預(yù)定義相同組件的@Extend的方法。
// @Extend(Text)可以支持Text的私有屬性fontColor
@Extend(Text) function fancy () {
.fontColor(Color.Red)
}
// superFancyText可以調(diào)用預(yù)定義的fancy
@Extend(Text) function superFancyText(size:number) {
.fontSize(size)
.fancy()
}- 和@Styles不同，@Extend裝飾的方法支持參數(shù)，開發(fā)者可以在調(diào)用時傳遞參數(shù)，調(diào)用遵循TS方法傳值調(diào)用。
// 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裝飾的方法的參數(shù)可以為function，作為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的參數(shù)可以為狀態(tài)變量，當(dāng)狀態(tài)變量改變時，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
})
}
}
}使用場景
以下示例聲明了3個Text組件，每個Text組件均設(shè)置了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將樣式組合復(fù)用，示例如下。
@Extend(Text) function fancyText(weightValue: number, color: Color) {
.fontStyle(FontStyle.Italic)
.fontWeight(weightValue)
.backgroundColor(color)
}通過@Extend組合樣式后，使得代碼更加簡潔，增強(qiáng)可讀性。
@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%')
}
}stateStyles：多態(tài)樣式
@Styles和@Extend僅僅應(yīng)用于靜態(tài)頁面的樣式復(fù)用，stateStyles可以依據(jù)組件的內(nèi)部狀態(tài)的不同，快速設(shè)置不同樣式。這就是我們本章要介紹的內(nèi)容stateStyles（又稱為：多態(tài)樣式）。
概述
stateStyles是屬性方法，可以根據(jù)UI內(nèi)部狀態(tài)來設(shè)置樣式，類似于css偽類，但語法不同。ArkUI提供以下四種狀態(tài)：
- focused：獲焦態(tài)。
- normal：正常態(tài)。
- pressed：按壓態(tài)。
- disabled：不可用態(tài)。
使用場景
基礎(chǔ)場景
下面的示例展示了stateStyles最基本的使用場景。Button處于第一個組件，默認(rèn)獲焦，生效focused指定的粉色樣式。按壓時顯示為pressed態(tài)指定的黑色。如果在Button前再放一個組件，使其不處于獲焦態(tài)，就會生效normal態(tài)的黃色。
@Entry
@Component
struct StateStylesSample {
build() {
Column() {
Button('Click me')
.stateStyles({
focused: {
.backgroundColor(Color.Pink)
},
pressed: {
.backgroundColor(Color.Black)
},
normal: {
.backgroundColor(Color.Yellow)
}
})
}.margin('30%')
}
}圖1?獲焦態(tài)和按壓態(tài)
?
@Styles和stateStyles聯(lián)合使用
以下示例通過@Styles指定stateStyles的不同狀態(tài)。
@Entry
@Component
struct MyComponent {
@Styles normalStyle() {
.backgroundColor(Color.Gray)
}
@Styles pressedStyle() {
.backgroundColor(Color.Red)
}
build() {
Column() {
Text('Text1')
.fontSize(50)
.fontColor(Color.White)
.stateStyles({
normal: this.normalStyle,
pressed: this.pressedStyle,
})
}
}
}圖2?正常態(tài)和按壓態(tài)
?
在stateStyles里使用常規(guī)變量和狀態(tài)變量
stateStyles可以通過this綁定組件內(nèi)的常規(guī)變量和狀態(tài)變量。
@Entry
@Component
struct CompWithInlineStateStyles {
@State focusedColor: Color = Color.Red;
normalColor: Color = Color.Green
build() {
Button('clickMe').height(100).width(100)
.stateStyles({
normal: {
.backgroundColor(this.normalColor)
},
focused: {
.backgroundColor(this.focusedColor)
}
})
.onClick(() => {
this.focusedColor = Color.Pink
})
.margin('30%')
}
}Button默認(rèn)獲焦顯示紅色，點擊事件觸發(fā)后，獲焦態(tài)變?yōu)榉凵?/p>
圖3?點擊改變獲焦態(tài)樣式文章來源：http://www.zghlxwxcb.cn/news/detail-581146.html
???????文章來源地址http://www.zghlxwxcb.cn/news/detail-581146.html
到了這里，關(guān)于HarmonyOS學(xué)習(xí)路之方舟開發(fā)框架—學(xué)習(xí)ArkTS語言（基本語法 五）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
