HarmonyOS 如何实现app级字体自定义fontFamily及关怀模式(app全局字体放大或缩小)

实现app级字体自定义fontFamily及关怀模式(app全局字体放大或缩小)

当前实现方案:

1、EntryAblity的onWindowStageCreate中通过font.registerFont()注册字体文件

2、自定义Text组件;添加text、fontWeight、fontSize、fontColor属性,每个属性都可能为一个动态值(可观察,属性值改变后Text要进行刷新)

3、通过PersistentStorage缓存关怀模式开关状态,动态设置fontSize大小从而实现关怀模式下字体放大与缩小。

自定义Text组件代码如下:

PersistentStorage.persistProp(CommonConstants.CARE_MODE_ENABLE_KEY,false)
@Component
export struct TextCare {
  @StorageLink(CommonConstants.CARE_MODE_ENABLE_KEY) careModeEnable:boolean = false
  text: ResourceStr = ""
  fontWeight: number = 400
  fontSize: number = 12
  @Prop fontColor:ResourceColor = '#000000'
  careModeApply:boolean = true

  aboutToAppear(): void {
    if(this.careModeEnable && this.careModeApply){
      this.fontSize = this.fontSize * 1.3
    }
  }

  build() {
    Text(this.text)
      .fontWeight(this.fontWeight)
      .fontFamily('SourceHan')
      .fontSize(this.fontSize)
      .fontColor(this.fontColor)
  }
}

4、调用方通过TextCare传入对应属性值,如果是动态属性需要使用@State标记后传入

调用示例代码:

@Component
struct TabItem {
  @ObjectLink tabBar: TabBarData
  onChange: (index: number) => void = () => {
  }
  @State fontColor: Resource = $r("app.color.text_gray")
  @Prop icon: ResourceStr

  getFontColor(){
    this.fontColor = this.tabBar.active ? $r('app.color.text_red') : $r("app.color.text_gray")
    return this.fontColor
  }

  getIcon(){
    this.icon = this.tabBar.active ? this.tabBar.activeIcon : this.tabBar.defaultIcon
    return this.icon
  }

  build() {
    Column() {
      Image(this.getIcon())
        .size({ width: $r('app.float.tab_img_size'), height: $r('app.float.tab_img_size') })
      // Text(this.tabBar.title)
      //   .fontSize(14)
      //   .fontWeight(500)
      //   .fontColor(this.tabBar.active ? $r('app.color.text_red') : $r("app.color.text_gray"))
      //使用原生组件Text设置文字颜色时只需传入具体值或者计算表达式即可。
      // 而使用自定义组件时需要将这个属性值单独提出使用@State标记,才能触发自定义组件刷新
      TextCare({
        text: this.tabBar.title,
        fontSize: 14,
        fontWeight: 500,
        fontColor: this.getFontColor(),
        careModeApply: false
      }).margin({ top: '5vp' })
    }
  }
}

问题:

使用上述方案,所有的调用方都需要单独提出需要动态修改的属性,并用@State标记字段传入自定义组件。这样使用不太方便,有无其他更好的解决方案。

比如不自定义组件,而是通过自定义组件的额外属性,并且这个属性是可以在全局app里面调用

HarmonyOS
1天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Heiang

1、动态属性设置:

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-attribute-modifier-V5#attributemodifier

2、目前没有参数可以直接配置应用内所以对应组件的属性,通过动态属性设置,也可以实现应用内全局样式设置;

class MyTextModifier implements AttributeModifier<TextModifier> {
  fontSize:number = 16
  applyNormalAttribute(instance: TextModifier): void {
    instance.fontSize(this.fontSize)
  }
}

@Component
struct Page2 {
  // @Prop refreshPage: Function = (num: string): void => {}
  @Prop functionTransfer:functionTransfer = new functionTransfer("", (num: number) => {})
  @State modifier: MyTextModifier = new MyTextModifier()

  build() {
    Text("123").onClick(() => {
      this.functionTransfer.fun(this.functionTransfer.str)
      // this.refreshPage("12")
    })
      .attributeModifier(this.modifier)
      .onClick(()=>{
        this.modifier.fontSize++
      })
  }
}
分享
微博
QQ
微信
回复
1天前
相关问题
HarmonyOS 全局自定义字体
229浏览 • 1回复 待解决
HarmonyOS 全局自定义字体
223浏览 • 1回复 待解决
HarmonyOS 全局设置自定义字体的方法
154浏览 • 1回复 待解决
适老化模式字体放大咨询
504浏览 • 1回复 待解决
如何自定义字体替换系统字体
560浏览 • 1回复 待解决
HarmonyOS 如何设置自定义字体
998浏览 • 1回复 待解决
HarmonyOS 自定义字体绘制
196浏览 • 1回复 待解决
HarmonyOS 使用自定义字体
414浏览 • 1回复 待解决
ArkUI中如何使用自定义字体
1040浏览 • 2回复 待解决
如何使用和加载自定义字体
2405浏览 • 1回复 待解决
鸿蒙中如何自定义字体文件
19695浏览 • 1回复 待解决
HarmonyOS 能否默认使用自定义字体
16浏览 • 1回复 待解决
Ark UI是否如何使用自定义字体
3352浏览 • 1回复 待解决
HarmonyOS 全局字体
155浏览 • 1回复 待解决