ArkTS-@Extend定义扩展组件样式

酒楼

发布于 2023-06-23 10:49:34

3950

发布于 2023-06-23 10:49:34

文章被收录于专栏：酒楼酒楼

@Extend：定义扩展组件样式

在前文的示例中，可以使用@Styles用于样式的扩展，在@Styles的基础上，我们提供了@Extend，用于扩展原生组件样式。

装饰器使用说明

语法

@Extend(UIComponentName) function functionName{...}

使用规则

和@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装饰的方法的参数可以为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的参数可以为状态变量，当状态变量改变时，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组件均设置了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(200,Color.Orange)
        }.margin('20%')
    }
}

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2023-06-22，如有侵权请联系 cloudcommunity@tencent.com 删除

渲染