文档管理中心
FAQ应用框架开发无障碍和本地化本地化开发(Localization)如何跟随系统深/浅色模式获取对应的资源文件

如何跟随系统深/浅色模式获取对应的资源文件

问题现象

深色模式下获取dark目录下的资源,浅色模式下获取base目录下的资源。

效果预览

背景知识

resourceManager.getResourceManager获取的资源的配置(语言、深浅色、分辨率、横竖屏等)是由系统决定的,而通过getOverrideResourceManager接口返回的对象,应用可以获取符合指定配置的资源,即差异化资源,比如在浅色模式时可以获取深色资源。

解决方案

  • 方式一:获取与系统配置相同的资源管理器。通过getOverrideResourceManager获取对应当前系统配置对应的资源管理对象,然后调用资源接口获取对应资源即可,例如:let overrideResMgr = context.resourceManager.getOverrideResourceManager();。
  • 方式二:获取指定配置的资源管理器。
    1. 通过getOverrideConfiguration获取配置:let config = context.resourceManager.getOverrideConfiguration()。
    2. 修改对应参数:config.colorMode = resourceManager.ColorMode.DARK。
    3. 将配置传入getOverrideResourceManager,获取指定配置下的资源管理器:let overrideResMgr = context.resourceManager.getOverrideResourceManager(config)。

根据系统配置获取对应图片并绘制到界面,示例代码如下:

收起
自动换行
深色代码主题
复制
  1. import { ConfigurationConstant, Context } from '@kit.AbilityKit';
  2. import { image } from '@kit.ImageKit';
  3. export class Point {
  4. x: number = 0;
  5. y: number = 0;
  6. set(x: number, y: number) {
  7. this.x = x;
  8. this.y = y;
  9. }
  10. }
  11. @Entry
  12. @Component
  13. struct GetResource {
  14. private settings: RenderingContextSettings = new RenderingContextSettings(true);
  15. private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
  16. hostContext = this.getUIContext().getHostContext()?.getApplicationContext();
  17. isDarkMode: boolean = false;
  18. mCircleBg: image.PixelMap | undefined = undefined;
  19. centerPoint = new Point();
  20. // 获取资源并转化为PixelMap
  21. image2PixelMap(context: Context, resource: Resource) {
  22. // 获取对应系统颜色模式配置下的资源管理器
  23. let overrideResMgr = context.resourceManager.getOverrideResourceManager();
  24. let data = overrideResMgr.getMediaContentSync(resource.id);
  25. let arrayBuffer = data.buffer.slice(data.byteOffset, data.byteLength + data.byteOffset);
  26. let imageSource: image.ImageSource = image.createImageSource(arrayBuffer);
  27. let value = imageSource.getImageInfoSync();
  28. let opts: image.DecodingOptions = {
  29. editable: true,
  30. desiredSize: {
  31. height: value.size.height,
  32. width: value.size.width
  33. }
  34. };
  35. return imageSource.createPixelMapSync(opts);
  36. }
  37. // 清除并绘制图片
  38. draw() {
  39. this.mCircleBg = this.image2PixelMap(this.hostContext as Context, $r('app.media.theme_joystick_big_circle_bg'));
  40. this.context.clearRect(-this.centerPoint.x, -this.centerPoint.y, this.centerPoint.x * 2, this.centerPoint.y * 2);
  41. let innerR = 150;
  42. this.context.drawImage(this.mCircleBg, -innerR, -innerR, innerR * 2, innerR * 2);
  43. }
  44. build() {
  45. Column() {
  46. Text('适配颜色(点我切换)')
  47. .fontColor($r('app.color.text_primary'))
  48. .fontSize(24)
  49. .margin({ top: 100 })
  50. .onClick(() => {
  51. if (this.isDarkMode) {
  52. this.hostContext?.setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT);
  53. this.isDarkMode = false;
  54. this.draw();
  55. } else {
  56. this.hostContext?.setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_DARK);
  57. this.isDarkMode = true;
  58. this.draw();
  59. }
  60. })
  61. Column() {
  62. Canvas(this.context)
  63. .width('100%')
  64. .height('100%')
  65. .onReady(() => {
  66. let measuredWidth = this.context.width;
  67. let measuredHeight = this.context.height;
  68. this.centerPoint.set(measuredWidth / 2, measuredHeight / 2);
  69. this.context.clearRect(-this.centerPoint.x, -this.centerPoint.y, this.centerPoint.x * 2,
  70. this.centerPoint.y * 2);
  71. this.context.translate(this.centerPoint.x, this.centerPoint.y);
  72. this.draw();
  73. })
  74. }
  75. .width('100%')
  76. .height('auto')
  77. }
  78. .height('100%')
  79. .padding({ left: 16, right: 16 })
  80. .width('100%')
  81. .backgroundColor($r('app.color.bg_primary'))
  82. .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
  83. }
  84. }

常见FAQ

Q:为什么context.resourceManager只能获取LIGHT模式下的资源?

A:当前接口获取系统资源管理ResourceManager对象中的Configuration为默认值,颜色模式默认是LIGHT。

在 FAQ 中进行搜索
请输入您想要搜索的关键词