Attribute Modifier Utility

// xxx.ets
// Click the button and check the log to determine whether the component enters the exclusive branch.
import { ModifierUtils } from '@kit.ArkUI';

class MyModifier implements AttributeModifier<TextAttribute | ButtonAttribute> {
  isDark: boolean = false;

  constructor(dark?: boolean) {
    this.isDark = dark ?? false;
  }

  applyNormalAttribute(instance: TextAttribute | ButtonAttribute): void {
    if (ModifierUtils.isInstanceOf(instance, 'Text')) {
      console.info('This is TextAttribute');
      const textInstance = instance as TextAttribute;
      if (this.isDark) {
        textInstance.backgroundColor(Color.Blue);
      } else {
        textInstance.backgroundColor(Color.Green);
      }
    } else if (ModifierUtils.isInstanceOf(instance, 'Button')) {
      console.info('This is ButtonAttribute');
      const buttonInstance = instance as ButtonAttribute;
      if (this.isDark) {
        buttonInstance.type(ButtonType.Circle);
        buttonInstance.backgroundColor(Color.Blue);
      } else {
        buttonInstance.type(ButtonType.Normal);
        buttonInstance.backgroundColor(Color.Green);
      }
    }
  }
}

@Entry
@Component
struct MultiComponentAttributeDemo {
  @State myModifier: MyModifier = new MyModifier();

  build() {
    Column() {
      Text('Text')
        .fontSize(50)
        .attributeModifier(this.myModifier)
        .onClick(() => {
          this.myModifier.isDark = !this.myModifier.isDark;
        })
      Button('Button')
        .attributeModifier(this.myModifier)
        .onClick(() => {
          this.myModifier.isDark = !this.myModifier.isDark;
        })
    }
    .justifyContent(FlexAlign.SpaceEvenly)
    .width('100%')
    .height('50%')
  }
}