【HarmonyOS NEXT】鸿蒙应用设置控件通用样式AttributeModifier， @Styles

【HarmonyOS NEXT】鸿蒙应用设置控件通用样式AttributeModifier， @Styles

前言

在鸿蒙中UI开发经常需要对控件样式进行统一的封装，在API早前版本，一般是通过 @Styles进行样式封装复用：

@Entry
@Component
struct Index {

  build() {
    Column() {

      Text("开启广播")
        .TxtStyle()
    }
    .height('100%')
    .width('100%')
  }

  @Styles TxtStyle(){
      .width(px2vp(300))
      .height(px2vp(100))
      .backgroundColor(Color.Blue)
      .margin({
        top: px2vp(100)
      })
      .border({
        width: px2vp(2),
        color: Color.Blue,
        radius: px2vp(50)
      })
  }
}

@Styles从API8开始支持，目前从API Version 11开始支持另一种写法attributeModifier，可根据开发者需要动态设置属性。

因为@Styles的使用限制，所以官方才新增了attributeModifier。 1.样式属性并不全面，font相关属性无法设置： 2.@Styles修饰的函数只能在当前类中使用，无法跨界面使用。 不过在单一页面内进行复用的简单样式，也建议使用@Styles进行样式复用。

AttributeModifier的使用

从API 11开始，所有UI控件都可以设置attributeModifier属性： 针对不同的UI控件，有对应的基类Modifier：（足足79个！！！） 以Button为例，封装按钮的样式，我们需要找到ButtonAttribute，实现AttributeModifier接口。

ButtonAttribute样式接口会提供五种样式回调： applyNormalAttribute 默认样式回调， applyPressedAttribute 按下样式回调， applyFocusedAttribute 获得焦点样式回调， applyDisabledAttribute 不可点击样式回调， applySelectedAttribute 被选择样式回调。

class CommonBtnModifier implements AttributeModifier<ButtonAttribute> {
  applyNormalAttribute(instance: ButtonAttribute): void {
    instance.backgroundColor(Color.Blue)
  }

  applyPressedAttribute(instance: ButtonAttribute): void {
    instance.backgroundColor(Color.Red)
  }
}

一般情况下，我们不需要处理这么多样式状态，只需要处理默认态即可，那只用继承ButtonModifier即可：

import { ButtonModifier } from '@kit.ArkUI'

class CommonBtnModifier implements AttributeModifier<ButtonModifier> {
  applyNormalAttribute(instance: ButtonAttribute): void {
    instance.backgroundColor(Color.Blue)
  }
}

只需要实现默认态样式回调： 当我们实现了样式封装类后，只需要在UI调用的类创建对象，赋值给控件即可实现样式的统一：

import { CommonBtnModifier } from '../common/MyButtonModifier';

@Entry
@Component
struct TextPage {
  @State message: string = 'Hello World';

  build() {
    RelativeContainer() {
      Button(this.message)
      	// 如果你有多个控件，都需要该样式赋值，可以创建全局对象进行赋值
        .attributeModifier(new CommonBtnModifier())
    }
    .height('100%')
    .width('100%')
  }
}


import { ButtonModifier } from '@kit.ArkUI'
// export 添加后，才能导入到其他类使用。不加是无法引入该类。
export class CommonBtnModifier implements AttributeModifier<ButtonModifier> {
  applyNormalAttribute(instance: ButtonAttribute): void {
    instance.backgroundColor(Color.Blue)
  }
}

DEMO示例：

Index 界面UI

import { CommonTextModifier } from '../common/CommonTextModifier'

@Entry
@Component
struct Index {

  txtModifier: CommonTextModifier = new CommonTextModifier()

  onClickStart = ()=>{

  }

  build() {
    Column() {

      Text("开启广播")
        .attributeModifier(this.txtModifier)
        .onClick(this.onClickStart)

      Text("关闭广播")
        .fontSize(px2fp(50))
        .onClick(this.onClickStart)
        .attributeModifier(this.txtModifier)
        .onClick(this.onClickStart)
    }
    .height('100%')
    .width('100%')
  }
}

文本控件通用样式封装

import { TextModifier } from '@kit.ArkUI'

/**
 * 文本控件通用样式
 */
export class CommonTextModifier implements AttributeModifier<TextModifier> {
  applyNormalAttribute(instance: TextModifier): void {
    instance.fontSize(px2fp(50))
      .fontColor(Color.White)
      .width(px2vp(300))
      .height(px2vp(100))
      .backgroundColor(Color.Blue)
      .textAlign(TextAlign.Center)
      .margin({
        top: px2vp(100)
      })
      .border({
        width: px2vp(2),
        color: Color.Blue,
        radius: px2vp(50)
      })
  }
}