鸿蒙怎么根据深浅区分复杂逻辑(重点:第一次运行)

23 阅读1分钟

声明:仅学习,欢迎讨论

哥们,比如给你个需求,渐变背景的深色适配怎么做

你可能会想我在深浅的资源目录里都配置好参数,就够了。这样配置只可以配置字符,如果只是简单的字符差异确实可以,但涉及到比如渐变位置的差异,这时候应该就炸了

当然你要硬说json反序列,那我服

遵循学习要给自己加难度的原则,我们要在深浅模式下区分非字符类型

现有资源分析:

image.png

可以看到ColorMode枚举不是只有深浅,还有一个未设置的参数,就是跟随系统颜色的参数。

export default class EntryAbility extends UIAbility {
  onCreate(_want: Want, _launchParam: AbilityConstant.LaunchParam): void {
    AppStorage.setOrCreate<ConfigurationConstant.ColorMode>('currentColorMode', this.context.config.colorMode);
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
  }

  // ...

  onConfigurationUpdate(newConfig: Configuration): void {
    const currentColorMode: ConfigurationConstant.ColorMode | undefined = AppStorage.get('currentColorMode');
    if (currentColorMode !== newConfig.colorMode) {
      AppStorage.setOrCreate<ConfigurationConstant.ColorMode>('currentColorMode', newConfig.colorMode);
    }
  }
}

第一次进入app的时候

this.context.config.colorMode获取到的是未设置的参数 我们如果真的想要适配深色,那就不能固定写死深色或者浅色,但是不设置,参数层就没办法知道是深色还是浅色

onConfigurationUpdate也不会在第一次进入的时候调用

这就导致参数层没办法知道应该是深色还是浅色

解决方案

配置:

看完这张图你应该懂我意思了

1b77561fcc35826ff6c56dd18b1d0a34.png

使用:

getCardGradient(): LinearGradient {
  // 深色模式:紫色到粉色的深色渐变
  const darkGradient: LinearGradient = {
    angle: 135,
    colors: [
      ['#667eea', 0.0], // 蓝紫色
      ['#764ba2', 0.5], // 紫色
      ['#f093fb', 1.0]// 粉色
    ]
  }

  // 浅色模式:清新明亮的渐变
  const lightGradient: LinearGradient = {
    angle: 195,
    colors: [
      ['#a8edea', 0.0], // 清新的蓝绿色
      ['#fed6e3', 0.3], // 柔和的粉色
      ['#d299c2', 1.0]// 淡紫色
    ]
  }
  const sys_color: string =
    this.getUIContext().getHostContext()?.resourceManager.getStringSync($r('app.string.sys_color_mode').id) || ''
  return sys_color == '1' ? lightGradient : darkGradient
}