声明:仅学习,欢迎讨论
哥们,比如给你个需求,渐变背景的深色适配怎么做
你可能会想我在深浅的资源目录里都配置好参数,就够了。这样配置只可以配置字符,如果只是简单的字符差异确实可以,但涉及到比如渐变位置的差异,这时候应该就炸了
当然你要硬说json反序列,那我服
遵循学习要给自己加难度的原则,我们要在深浅模式下区分非字符类型
现有资源分析:
可以看到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也不会在第一次进入的时候调用
这就导致参数层没办法知道应该是深色还是浅色
解决方案
配置:
看完这张图你应该懂我意思了
使用:
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
}