@Styles：定义组件重用样式、@Extend：定义扩展组件样式，stateStyles：多态样式

@Styles（不支持传参）

@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（支持传参，function，）

@Extend支持封装指定的组件的私有属性和私有事件，以及预定义相同组件的@Extend的方法。

// @Extend(Text)可以支持Text的私有属性fontColor
@Extend(Text) function fancy () {
  .fontColor(Color.Red)
}
// superFancyText可以调用预定义的fancy
@Extend(Text) function superFancyText(size:number) {
    .fontSize(size)
    .fancy()
}

@Extend装饰的方法支持参数，开发者可以在调用时传递参数，调用遵循TS方法传值调用。

参数可以指定初始值，如果该参数指定了初始值，父组件调用时可以不传参使用初始值

参数类型可以是枚举类型，如Color，FontWeight，InputType.....

@Extend(Text) function fancy (colorEnum：Color = Color.Red，fontSize: number) {
  .fontColor(colorEnum)
  .fontSize(fontSize)
}

@Entry
@Component
struct FancyUse {
  build() {
    Row({ space: 10 }) {
      Text('Fancy')
        .fancy(16)
      Text('Fancy')
        .fancy(Color.Black，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()})
    }
  }
}

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

stateStyles（属性状态）

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

• focused：获焦态。

• normal：正常态。

• pressed：按压态。

• disabled：不可用态。

• selected10+：选中态。

@Entry
@Component
struct StateStylesSample {
    @Styles normalStyle() {
        .backgroundColor(Color.Gray)
      }

  build() {
    Column() {
      Button('Button1')
        .stateStyles({
           //获焦态
          focused: {
            .backgroundColor(Color.Pink)
          },
           //正常态
          normal: {
            .backgroundColor(Color.Black)
          },
           //按压态
          pressed: {
            .backgroundColor(Color.Red)
          }
          //@Styles和stateStyles联合使用
          //disabled: this.normalStyle,
        })
    }.margin('30%')
  }
}

综合：

@Styles装饰器可以将多条样式设置提炼成一个方法但是不能传参

@Extend支持传参，可以为function，作为Event事件的句柄，参数也可以为状态变量，状态变量改变时，UI可以被刷新渲染。

stateStyles可以看作是css的伪类只是语法不同，一共有五种状态。

• focused：获焦态。

• normal：正常态。

• pressed：按压态。

• disabled：不可用态。

• selected10+：选中态。