鸿蒙4.0开发笔记之ArkTS装饰器语法基础@Extend扩展组件样式与stateStyles多态样式（十一）

news2025/1/24 5:13:12

一、Extend扩展组件样式

1、作用
前文提到可以使用@Styles用于样式的扩展，在@Styles的基础上，ArkTS语法还提供了@Extend，⽤于扩展原生组件样式，包括Text、Button等等。

2、定义语法

@Extend(UIComponentName) function functionName { ... } 
//UIComponentName表示原生组件，如Text、Button...
//functionName为样式函数名

3、使用规则（和@Styles不同）

@Extend仅支持定义在全局，不支持在组件内部定义。
@Extend支持封装指定的组件的私有属性和私有事件和预定义相同组件的@Extend的方法。
@Extend装饰的方法支持参数，开发者可以在调用时传递参数，调用遵循ts方法传值调用。

@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装饰的⽅法的参数可以为function，作为Event事件的句柄。

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

二、stateStyles多态样式

1、概念
@Styles和@Extend仅仅应用于静态页面的样式复用，stateStyles可以依据组件的内部状态的不同，快速设置不同样式，即多态样式。

2、四种状态
stateStyles是属性方法，可以根据UI内部状态来设置样式，类似于css伪类，但语法不同。ArkUI提供了以下四种状态：

focused：获焦态。
normal：正常态。
pressed：按压态。
isabled：不可用态。

3、注意
Button处于第⼀个组件，会默认获焦，生效focused下面的属性样式。

三、@Extend与stateStyles练习

1、@Extend练习任务
使用Extend扩展样式对Text和Button两类组件进行渲染，并需要传递相应参数，其中Button组件的参数需要包括一个函数，以实现点击按钮能够将按钮上的数字进行累加。

2、stateStyles练习任务
按压时显示为pressed态指定的红色。如果在Button前再放⼀个组件，使其不处于获焦态，就会生效normal态的橙色。若果在Button前没有组件，则会默认获焦，生效focused态的蓝色。

3、练习代码

@Entry
@Component
struct Index {
  @State message: string = '@Extend\n扩展样式'
  //用于按钮计数的状态值
  @State count: number = 0

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .margin({bottom:15})
        Divider()
        //调用Extend扩展样式函数
        Text('取之无禁，').textDefined(40,Color.Brown)
        Text('用之不竭。').textDefined(30,'green')
        Text('是造物者之无尽藏也，').textDefined(20,'#00AABB')
        Text('而吾与子之所共适！').textDefined(40,Color.Red)

        //对按钮进行Extend扩展函数的调用
        //错误调用：Button(this.count)，必须转为字符串类型
        Button(this.count.toString()).btnDefined(()=>{
          this.count++
        }
        )

        //多态样式：也是一种属性方法，但是可以同时写不同状态下的属性
        Button('多态样式').width('90%').fontSize(40).margin({top:15})
          .stateStyles({
            normal: {
              .backgroundColor(Color.Orange)
            },
            focused:{
              .backgroundColor(Color.Blue)
            },
            pressed:{
              .backgroundColor(Color.Red)
            }
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

//定义文本扩展样式
@Extend(Text) function textDefined(fs:number, fc:Color|string){
  .fontSize(fs)
  .fontColor(fc)
  .fontWeight(FontWeight.Bold)
  .fontStyle(FontStyle.Italic)
}

//定义按钮扩展样式
//自定义组件的参数可以是一个函数
//或者定义为：@Extend(Button) function btnDefined(click:Function){
@Extend(Button) function btnDefined(click:()=>void){
  .fontSize(50)
  .width(200)
  //调用传递过来的函数（形式参数）
  .onClick(()=>{
    click()
  })
}