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

一、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()
  })
}

4、测试效果
鸿蒙4.0开发笔记之ArkTS装饰器语法基础@Extend扩展组件样式与stateStyles多态样式(十一)_第1张图片

你可能感兴趣的:(harmonyos,笔记,华为)