🎯 @Styles @Extend AttributeModifier 在项目中如何区分使用

⭐⭐⭐

• 了解基本使用规则

🍖 Styles：定义组件重用样式

/**
 * 局部/全局模式
 * 可以使用变量值
 */
@Entry
@ComponentV2
struct stylesCase {
  @Local mockWid: number = 10
  @Styles
  textStyles() {
    // .width(200)
    .width(this.mockWid)
  }

  build() {
    Row({ space: 10 }) {
      Text('A')
        .globalTextStyles()
        .fontSize(30)
      Text('B')
        .textStyles()
    }
  }
}

@Styles
function globalTextStyles() {
  .width(150)
}

🍗 Extend：定义扩展组件样式

/**
 * @Extend支持封装指定组件的私有属性、私有事件和自身定义的全局方法。
 * @Extend仅支持在全局定义，不支持在组件内部定义。
 * 可以调用预定义的defineTextExtend
 */
@Entry
@ComponentV2
struct extendCase {
  @Local mockWid: number = 150

  build() {
    Row({ space: 10 }) {
      Text('A')
        .globalTextExtend(this.mockWid, () => {
          this.getUIContext().getPromptAction().showToast({ message: '汉堡黄' })
        })
        .fontSize(30)
    }
  }
}

@Extend(Text)
function globalTextExtend(mockWid: number, onClick: () => void) {
  .width(mockWid)
  .onClick(onClick)
  .defineTextExtend()
}

@Extend(Text)
function defineTextExtend() {
  .textAlign(TextAlign.Center)
  .fontColor(Color.Brown)
}

🥩 AttributeModifier：属性修改器

// MyTextModifier.ets
@ObservedV2
export class MyTextModifier implements AttributeModifier<TextAttribute> {
  // 可以实现一个Modifier，定义私有的成员变量，外部可动态修改
  @Trace isDark: boolean = false

  // 通过构造函数，创建时传参
  constructor(dark?: boolean) {
    this.isDark = dark ?? false
  }

  applyNormalAttribute(instance: TextAttribute): void {
    // instance为Text的属性对象，可以通过instance对象对属性进行修改
    if (this.isDark) {
      // 属性变化触发apply函数时，变化前已设置并且变化后未设置的属性会恢复为默认值
      instance.backgroundColor(Color.Blue)
    } else {
      instance.backgroundColor(Color.Red)
    }
    instance.width(100)
    instance.height(30)
    instance.fontColor(Color.White)
    instance.textAlign(TextAlign.Center)
  }
}

// Index.ets
import { MyTextModifier } from './MyTextModifier'

@Entry
@ComponentV2
struct AttributeCase {
  @Local textModifier: MyTextModifier = new MyTextModifier(true)

  build() {
    Row() {
      Text('汉堡黄')
        .attributeModifier(this.textModifier)
        .onClick(() => {
          this.textModifier.isDark = !this.textModifier.isDark
          console.info(JSON.stringify(this.textModifier))
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

• 了解三项的大体区别

🌸🌼🌺