HarmonyOS--ArkTS(1)--基本语法(2)

目录

@Styles装饰器：定义组件重用样式 

@Extend装饰器：定义扩展组件样式 

stateStyles：多态样式 

@Builder装饰器：自定义构建函数

自定义组件内自定义构建函数

全局自定义构建函数

@BuilderParam装饰器：引用@Builder函数 

---

@Styles装饰器：定义组件重用样式 

• 当前@Styles仅支持通用属性和通用事件。
• @Styles方法不支持参数

• @Styles可以定义在组件内或全局，在全局定义时需在方法名前面添加function关键字，组件内定义时则不需要添加function关键字。
• 定义在组件内的@Styles可以通过this访问组件的常量和状态变量，并可以在@Styles里通过事件来改变状态变量的值，示例如下：
• 组件内@Styles的优先级高于全局@Styles。

  框架优先找当前组件内的@Styles，如果找不到，则会全局查找。

// 定义在全局的@Styles封装的样式
@Styles function globalFancy  () {
  .width(150)
  .height(100)
  .backgroundColor(Color.Pink)
}
 
@Entry
@Component
struct FancyUse {
  @State heightValue: number = 100
  // 定义在组件内的@Styles封装的样式
  @Styles fancy() {
    .width(200)
    .height(this.heightValue)
    .backgroundColor(Color.Yellow)
    .onClick(() => {
      this.heightValue = 200
    })
  }
 
  build() {
    Column({ space: 10 }) {
      // 使用全局的@Styles封装的样式
      Text('FancyA')
        .globalFancy ()
        .fontSize(30)
      // 使用组件内的@Styles封装的样式
      Text('FancyB')
        .fancy()
        .fontSize(30)
    }
  }
}

@Extend装饰器：定义扩展组件样式 

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

//原代码 

//原代码
@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(Text) function fancyText(weightValue: number, color: Color) {
  .fontStyle(FontStyle.Italic)
  .fontWeight(weightValue)
  .backgroundColor(color)
}
 
@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：多态样式 

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

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

@Entry
@Component
struct StateStylesSample {
  build() {
    Column() {
      Button('Click me')
        .stateStyles({
          focused: {
            .backgroundColor(Color.Pink)
          },
          pressed: {
            .backgroundColor(Color.Black)
          },
          normal: {
            .backgroundColor(Color.Yellow)
          }
        })
    }.margin('30%')
  }
}

@Builder装饰器：自定义构建函数

自定义组件内自定义构建函数

定义的语法：
@Builder MyBuilderFunction(){ ... }
 
使用方法：
this.MyBuilderFunction(){ ... }
 
//下面例子：
 
@Component
struct TaskList{
  build(){
    Column(){
      Button('添加')
        .width(200)
        .margin({top:20,bottom:10})
        .onClick(()=>{
            使用方法：
            this.MyBuilderFunction(){ ... }
        })
    }
  }
    定义方法
    @Builder MyBuilderFunction(){ ... }
    
}
 
 
 

• 允许在自定义组件内定义一个或多个@Builder方法，该方法被认为是该组件的私有、特殊类型的成员函数。
• 自定义构建函数可以在所属组件的build方法和其他自定义构建函数中调用，但不允许在组件外调用。
• 在自定义函数体中，this指代当前所属组件，组件的状态变量可以在自定义构建函数内访问。建议通过this访问自定义组件的状态变量而不是参数传递。

全局自定义构建函数

定义的语法：
@Builder function MyGlobalBuilderFunction(){ ... }
 
使用方法：
MyGlobalBuilderFunction()
 
//下面例子
 
@Builder function MyGlobalBuilderFunction() {
  //todo
}
@Entry
@Component
struct Demo{
  @State label: string = 'Hello';
  build() {
    Column() {
      Button('Click me').onClick(() => {
        MyGlobalBuilderFunction()
      })
    }
  }
}

• 全局的自定义构建函数可以被整个应用获取，不允许使用this和bind方法。
• 如果不涉及组件状态变化，建议使用全局的自定义构建方法。

@BuilderParam装饰器：引用@Builder函数 

当开发者创建了自定义组件，并想对该组件添加特定功能时，例如在自定义组件中添加一个点击跳转操作。若直接在组件内嵌入事件方法，将会导致所有引入该自定义组件的地方均增加了该功能。为解决此问题，ArkUI引入了@BuilderParam装饰器，@BuilderParam用来装饰指向@Builder方法的变量，开发者可在初始化自定义组件时对此属性进行赋值，为自定义组件增加特定的功能。该装饰器用于声明任意UI描述的一个元素，类似slot占位符。 

@Builder function GlobalBuilder0() {}
 
@Component
struct Child {
  @Builder doNothingBuilder() {};
 
  @BuilderParam aBuilder0: () => void = this.doNothingBuilder;
  @BuilderParam aBuilder1: () => void = GlobalBuilder0;
  build(){}
}