From 703c1096e3077e2db5418642f5f6408a373b46f8 Mon Sep 17 00:00:00 2001 From: c30077388 Date: Tue, 17 Jun 2025 15:00:52 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E5=BA=94=E7=94=A8=E6=B7=B1=E6=B5=85?= =?UTF-8?q?=E8=89=B2=E9=80=82=E9=85=8D=E6=96=B0=E5=A2=9EBuilderNode?= =?UTF-8?q?=E9=80=82=E9=85=8D=E6=8C=87=E5=AF=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: c30077388 Change-Id: I0a358f9a6ab396378d88fc093dd4b96bdd464aa3 --- .../ui/ui-dark-light-color-adaptation.md | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/zh-cn/application-dev/ui/ui-dark-light-color-adaptation.md b/zh-cn/application-dev/ui/ui-dark-light-color-adaptation.md index f69fec49452..5352bc4c218 100644 --- a/zh-cn/application-dev/ui/ui-dark-light-color-adaptation.md +++ b/zh-cn/application-dev/ui/ui-dark-light-color-adaptation.md @@ -73,7 +73,23 @@ Web组件支持对前端页面进行深色模式配置，可参考[Web组件深色模式](../web/web-set-dark-mode.md)进行相关配置。 -4. 应用监听深浅色模式切换事件 +4. BuilderNode适配 + + 自定义节点BuilderNode和ComponentContent需手动传递系统环境变化事件，触发节点的全量更新，详细请参考[builderNode系统环境变化更新](../reference/apis-arkui/js-apis-arkui-builderNode.md#updateconfiguration12) + + ```ts + // 记录创建的自定义节点对象 + const builderNodeMap: Array> = new Array(); + + function updateColorMode() { + builderNodeMap.forEach((value, index) => { + // 调用updateConfiguration手动触发系统环境变化更新 + value.updateConfiguration(); + }) + } + ``` + +5. 应用监听深浅色模式切换事件 应用可以主动监听系统深浅色模式变化，进行其他类型的资源初始化等自定义逻辑。无论应用是否跟随系统深浅色模式变化，该监听方式均可生效。 -- Gitee From 0f87b376435e1ec5a63345a16b86771f7618127e Mon Sep 17 00:00:00 2001 From: c30077388 Date: Tue, 17 Jun 2025 15:19:35 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E5=BA=94=E7=94=A8=E6=B7=B1=E6=B5=85?= =?UTF-8?q?=E8=89=B2=E9=80=82=E9=85=8D=E6=96=B0=E5=A2=9EBuilderNode?= =?UTF-8?q?=E9=80=82=E9=85=8D=E6=8C=87=E5=AF=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: c30077388 Change-Id: I24c763115935b92487b6707f4b3a06ddbdda8d03 --- .../reference/apis-arkui/js-apis-arkui-builderNode.md | 2 +- zh-cn/application-dev/ui/ui-dark-light-color-adaptation.md | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-builderNode.md b/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-builderNode.md index 947bf224028..567ebffccca 100644 --- a/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-builderNode.md +++ b/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-builderNode.md @@ -1071,7 +1071,7 @@ const builderNodeMap: Array> = new Array(); function updateColorMode() { builderNodeMap.forEach((value, index) => { - // 通知BuilderNode环境变量改变 + // 通知BuilderNode环境变量改变，触发深浅色切换 value.updateConfiguration(); }) } diff --git a/zh-cn/application-dev/ui/ui-dark-light-color-adaptation.md b/zh-cn/application-dev/ui/ui-dark-light-color-adaptation.md index 5352bc4c218..7635f508345 100644 --- a/zh-cn/application-dev/ui/ui-dark-light-color-adaptation.md +++ b/zh-cn/application-dev/ui/ui-dark-light-color-adaptation.md @@ -73,7 +73,7 @@ Web组件支持对前端页面进行深色模式配置，可参考[Web组件深色模式](../web/web-set-dark-mode.md)进行相关配置。 -4. BuilderNode适配 +4. "自定义节点"适配 自定义节点BuilderNode和ComponentContent需手动传递系统环境变化事件，触发节点的全量更新，详细请参考[builderNode系统环境变化更新](../reference/apis-arkui/js-apis-arkui-builderNode.md#updateconfiguration12) @@ -83,7 +83,7 @@ function updateColorMode() { builderNodeMap.forEach((value, index) => { - // 调用updateConfiguration手动触发系统环境变化更新 + // 通知BuilderNode环境变量改变，触发深浅色切换 value.updateConfiguration(); }) } -- Gitee From 26736ff1086a39001ad2c645a65032565cca1a40 Mon Sep 17 00:00:00 2001 From: c30077388 Date: Tue, 17 Jun 2025 19:27:36 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E7=A4=BA=E4=BE=8B=E4=BB=A3=E7=A0=81?= =?UTF-8?q?=E5=8F=98=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: c30077388 Change-Id: Ic112e74f17bb632e80cfb0effef98cb8f89dac2d --- .../apis-arkui/js-apis-arkui-ComponentContent.md | 10 ++++++++-- .../apis-arkui/js-apis-arkui-builderNode.md | 10 ++++++++-- .../ui/ui-dark-light-color-adaptation.md | 12 ++++++++++++ 3 files changed, 28 insertions(+), 4 deletions(-) diff --git a/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-ComponentContent.md b/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-ComponentContent.md index df8a73bce82..105f9fdf610 100644 --- a/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-ComponentContent.md +++ b/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-ComponentContent.md @@ -484,7 +484,7 @@ updateConfiguration(): void **示例：** ```ts -import { NodeController, FrameNode, ComponentContent } from '@kit.ArkUI'; +import { NodeController, FrameNode, ComponentContent, UIContext, FrameCallback } from '@kit.ArkUI'; import { AbilityConstant, Configuration, EnvironmentCallback, ConfigurationConstant } from '@kit.AbilityKit'; @Builder @@ -523,6 +523,12 @@ class MyNodeController extends NodeController { } } +class MyFrameCallback extends FrameCallback { + onFrame() { + updateColorMode(); + } +} + function updateColorMode() { componentContentMap.forEach((value, index) => { value.updateConfiguration(); @@ -541,7 +547,7 @@ struct FrameNodeTypeTest { }, onConfigurationUpdated: (config: Configuration): void => { console.log('onConfigurationUpdated ' + JSON.stringify(config)); - updateColorMode(); + this.getUIContext()?.postFrameCallback(new MyFrameCallback()); } } // 注册监听回调 diff --git a/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-builderNode.md b/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-builderNode.md index 567ebffccca..6f2bf199c9a 100644 --- a/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-builderNode.md +++ b/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-builderNode.md @@ -994,7 +994,7 @@ updateConfiguration(): void **示例：** ```ts -import { NodeController, BuilderNode, FrameNode, UIContext } from "@kit.ArkUI"; +import { NodeController, BuilderNode, FrameNode, UIContext, FrameCallback } from "@kit.ArkUI"; import { AbilityConstant, Configuration, ConfigurationConstant, EnvironmentCallback } from '@kit.AbilityKit'; class Params { @@ -1069,6 +1069,12 @@ class TextNodeController extends NodeController { // 记录创建的自定义节点对象 const builderNodeMap: Array> = new Array(); +class MyFrameCallback extends FrameCallback { + onFrame() { + updateColorMode(); + } +} + function updateColorMode() { builderNodeMap.forEach((value, index) => { // 通知BuilderNode环境变量改变，触发深浅色切换 @@ -1090,7 +1096,7 @@ struct Index { }, onConfigurationUpdated: (config: Configuration): void => { console.log('onConfigurationUpdated ' + JSON.stringify(config)); - updateColorMode(); + this.getUIContext()?.postFrameCallback(new MyFrameCallback()); } }; // 注册监听回调 diff --git a/zh-cn/application-dev/ui/ui-dark-light-color-adaptation.md b/zh-cn/application-dev/ui/ui-dark-light-color-adaptation.md index 7635f508345..1532531adb8 100644 --- a/zh-cn/application-dev/ui/ui-dark-light-color-adaptation.md +++ b/zh-cn/application-dev/ui/ui-dark-light-color-adaptation.md @@ -81,12 +81,24 @@ // 记录创建的自定义节点对象 const builderNodeMap: Array> = new Array(); + class MyFrameCallback extends FrameCallback { + onFrame() { + updateColorMode(); + } + } + function updateColorMode() { builderNodeMap.forEach((value, index) => { // 通知BuilderNode环境变量改变，触发深浅色切换 value.updateConfiguration(); }) } + // ... other code ... + aboutToAppear() { + // ... other code ... + this.getUIContext()?.postFrameCallback(new MyFrameCallback()); + // ... other code ... + } ``` 5. 应用监听深浅色模式切换事件 -- Gitee