HarmonyOS使用动态属性设置实现跨文件样式设置

文章索引

目的

实现跨文件设置标签样式

封装Modifier

import CommonConstants from '../common/constants/CommonConstants'


export enum LauncherAttrType {
  BACKGROUND,
  LOGO,
  COLUMN,
  TEXT,
  INTRODUCE
}

export interface LauncherModifier {
  background: LauncherAttrModifier<ImageAttribute>
  logo: LauncherAttrModifier<ImageAttribute>
  column: LauncherAttrModifier<ColumnAttribute>
  text: LauncherAttrModifier<TextAttribute>
  introduce: LauncherAttrModifier<TextAttribute>
}

export const launcherModifier = (): LauncherModifier => {
  return {
    background: new LauncherAttrModifier(LauncherAttrType.BACKGROUND),
    logo: new LauncherAttrModifier(LauncherAttrType.LOGO),
    column: new LauncherAttrModifier(LauncherAttrType.COLUMN),
    text: new LauncherAttrModifier(LauncherAttrType.TEXT),
    introduce: new LauncherAttrModifier(LauncherAttrType.INTRODUCE)
  }
}

export class LauncherAttrModifier<Attribute extends CommonAttribute | TextAttribute> implements AttributeModifier<Attribute> {
  attrType: LauncherAttrType

  constructor(attrType: LauncherAttrType) {
    this.attrType = attrType
  }

  applyNormalAttribute(instance: Attribute): void {
    this.setBgStyle(instance)
    this.setLogoStyle(instance)
    this.setColumnStyle(instance)
    this.setTextStyle(instance as TextAttribute)
    this.setIntroduceStyle(instance as TextAttribute)
  }

  setBgStyle(instance: Attribute) {
    (this.attrType === LauncherAttrType.BACKGROUND) &&
    instance
      .width(CommonConstants.FULL_WIDTH)
      .height(CommonConstants.FULL_HEIGHT)
  }

  setLogoStyle(instance: Attribute) {
    (this.attrType === LauncherAttrType.LOGO) &&
    instance
      .width($r('app.float.launcher_logo_size'))
      .height($r('app.float.launcher_logo_size'))
      .margin({
        top: CommonConstants.LAUNCHER_IMAGE_MARGIN_TOP
      })
  }


  setColumnStyle(instance: Attribute) {
    (this.attrType === LauncherAttrType.COLUMN) &&
    instance
      .width(CommonConstants.FULL_WIDTH)
      .height(CommonConstants.FULL_HEIGHT)
  }

  setTextStyle(instance: TextAttribute) {
    (this.attrType === LauncherAttrType.TEXT) &&
    instance
      .width($r('app.float.launcher_life_text_width'))
      .height($r('app.float.launcher_life_text_height'))
      .fontWeight(FontWeight.Bold)
      .letterSpacing(CommonConstants.LAUNCHER_LIFE_TEXT_SPACING)
      .fontSize($r('app.float.launcher_text_title_size'))
      .fontColor($r('app.color.launcher_text_title_color'))
      .margin({
        top: CommonConstants.LAUNCHER_TEXT_TITLE_MARGIN_TOP
      })
  }


  setIntroduceStyle(instance: TextAttribute) {
    (this.attrType === LauncherAttrType.INTRODUCE) &&
    instance
      .height(CommonConstants.LAUNCHER_TEXT_INTRODUCE_HEIGHT)
      .fontWeight(FontWeight.Normal)
      .letterSpacing(CommonConstants.LAUNCHER_TEXT_INTRODUCE_SPACING)
      .fontSize($r('app.float.launcher_text_introduce_size'))
      .fontColor($r('app.color.launcher_text_introduce_color'))
      .opacity($r('app.float.launcher_text_opacity'))
      .margin({
        top: CommonConstants.LAUNCHER_TEXT_INTRODUCE_MARGIN_TOP
      })
  }
}

import CommonConstants from '../common/constants/CommonConstants'

export enum LauncherAttrType {

BACKGROUND,

LOGO,

COLUMN,

TEXT,

INTRODUCE

}

export interface LauncherModifier {

background: LauncherAttrModifier<ImageAttribute>

logo: LauncherAttrModifier<ImageAttribute>

column: LauncherAttrModifier<ColumnAttribute>

text: LauncherAttrModifier<TextAttribute>

introduce: LauncherAttrModifier<TextAttribute>

}

export const launcherModifier = (): LauncherModifier => {

return {

background: new LauncherAttrModifier(LauncherAttrType.BACKGROUND),

logo: new LauncherAttrModifier(LauncherAttrType.LOGO),

column: new LauncherAttrModifier(LauncherAttrType.COLUMN),

text: new LauncherAttrModifier(LauncherAttrType.TEXT),

introduce: new LauncherAttrModifier(LauncherAttrType.INTRODUCE)

}

export class LauncherAttrModifier<Attribute extends CommonAttribute | TextAttribute> implements AttributeModifier<Attribute> {

attrType: LauncherAttrType

constructor(attrType: LauncherAttrType) {

this.attrType = attrType

}

applyNormalAttribute(instance: Attribute): void {

this.setBgStyle(instance)

this.setLogoStyle(instance)

this.setColumnStyle(instance)

this.setTextStyle(instance as TextAttribute)

this.setIntroduceStyle(instance as TextAttribute)

}

setBgStyle(instance: Attribute) {

(this.attrType === LauncherAttrType.BACKGROUND) &&

instance

.width(CommonConstants.FULL_WIDTH)

.height(CommonConstants.FULL_HEIGHT)

}

setLogoStyle(instance: Attribute) {

(this.attrType === LauncherAttrType.LOGO) &&

instance

.width($r('app.float.launcher_logo_size'))

.height($r('app.float.launcher_logo_size'))

.margin({

top: CommonConstants.LAUNCHER_IMAGE_MARGIN_TOP

})

}

setColumnStyle(instance: Attribute) {

(this.attrType === LauncherAttrType.COLUMN) &&

instance

.width(CommonConstants.FULL_WIDTH)

.height(CommonConstants.FULL_HEIGHT)

}

setTextStyle(instance: TextAttribute) {

(this.attrType === LauncherAttrType.TEXT) &&

instance

.width($r('app.float.launcher_life_text_width'))

.height($r('app.float.launcher_life_text_height'))

.fontWeight(FontWeight.Bold)

.letterSpacing(CommonConstants.LAUNCHER_LIFE_TEXT_SPACING)

.fontSize($r('app.float.launcher_text_title_size'))

.fontColor($r('app.color.launcher_text_title_color'))

.margin({

top: CommonConstants.LAUNCHER_TEXT_TITLE_MARGIN_TOP

})

}

setIntroduceStyle(instance: TextAttribute) {

(this.attrType === LauncherAttrType.INTRODUCE) &&

instance

.height(CommonConstants.LAUNCHER_TEXT_INTRODUCE_HEIGHT)

.fontWeight(FontWeight.Normal)

.letterSpacing(CommonConstants.LAUNCHER_TEXT_INTRODUCE_SPACING)

.fontSize($r('app.float.launcher_text_introduce_size'))

.fontColor($r('app.color.launcher_text_introduce_color'))

.opacity($r('app.float.launcher_text_opacity'))

.margin({

top: CommonConstants.LAUNCHER_TEXT_INTRODUCE_MARGIN_TOP

})

}

在页面使用

import { launcherModifier, LauncherModifier } from '../attributemodifier/LauncherModifier'

@Entry
@Component
struct LauncherPage {
  private modifier: LauncherModifier = launcherModifier()

  build() {
    Stack() {
      Image($r('app.media.ic_launcher_background'))
        .attributeModifier(this.modifier.background)

      Column() {
        Image($r('app.media.ic_logo'))
          .attributeModifier(this.modifier.logo)

        Text($r('app.string.healthy_life_text'))
          .attributeModifier(this.modifier.text)

        Text($r('app.string.healthy_life_introduce'))
          .attributeModifier(this.modifier.introduce)

      }
      .attributeModifier(this.modifier.column)
    }
  }
}

import { launcherModifier, LauncherModifier } from '../attributemodifier/LauncherModifier'

@Entry

@Component

struct LauncherPage {

private modifier: LauncherModifier = launcherModifier()

build() {

Stack() {

Image($r('app.media.ic_launcher_background'))

.attributeModifier(this.modifier.background)

Column() {

Image($r('app.media.ic_logo'))

.attributeModifier(this.modifier.logo)

Text($r('app.string.healthy_life_text'))

.attributeModifier(this.modifier.text)

Text($r('app.string.healthy_life_introduce'))

.attributeModifier(this.modifier.introduce)

}

.attributeModifier(this.modifier.column)

}

官方文档

动态属性设置

如何实现跨文件样式复用