From e598b42bf6d0784ed0dd5ce0cd1d2b6bd91bef44 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=90=91=E9=A6=96=E5=85=B4?= Date: Wed, 2 Jul 2025 12:09:42 +0800 Subject: [PATCH] =?UTF-8?q?=E5=86=BB=E7=BB=93=E8=83=BD=E5=8A=9B=E5=92=8C?= =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E7=BB=98=E5=88=B6=E6=8C=87=E5=8D=97?= =?UTF-8?q?=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: 向首兴 --- .../ts-universal-attributes-draw-modifier.md | 3 +- ...rkts-user-defined-arktsNode-builderNode.md | 28 +++++++++++++++---- ...kts-user-defined-extension-drawModifier.md | 18 ++++++++++-- 3 files changed, 40 insertions(+), 9 deletions(-) diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-draw-modifier.md b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-draw-modifier.md index 4b7b263c37f..487981d711b 100644 --- a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-draw-modifier.md +++ b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-universal-attributes-draw-modifier.md @@ -359,7 +359,8 @@ struct DrawModifierExample { .height('100%') .textAlign(TextAlign.Center) } - .margin(100) + .margin(50) + .width(280) .height(300) .backgroundColor(0x87CEEB) // 调用此接口并传入自定义绘制前景的类实例，即可实现自定义绘制前景。 diff --git a/zh-cn/application-dev/ui/arkts-user-defined-arktsNode-builderNode.md b/zh-cn/application-dev/ui/arkts-user-defined-arktsNode-builderNode.md index 225578bcde4..f4b9ee5a382 100644 --- a/zh-cn/application-dev/ui/arkts-user-defined-arktsNode-builderNode.md +++ b/zh-cn/application-dev/ui/arkts-user-defined-arktsNode-builderNode.md @@ -1088,6 +1088,22 @@ ArkUI支持[自定义组件冻结](./state-management/arkts-custom-components-fr 从API version 20开始，BuilderNode节点可以通过[inheritFreezeOptions](../reference/apis-arkui/js-apis-arkui-builderNode.md#inheritfreezeoptions20)接口继承父自定义组件（即从该BuilderNode节点向上查找的第一个自定义组件）的冻结策略。当BuilderNode节点继承父自定义组件的冻结策略时，若父自定义组件的冻结策略设置为开启组件冻结（即[freezeWhenInactive](./state-management/arkts-create-custom-components.md#freezewheninactive11)选项设为true），则BuilderNode节点在不活跃时将会冻结，当切换至活跃状态时解冻，并使用缓存的数据更新节点。 +BuilderNode节点只有通过以下方式上下树时，才会根据该节点是否继承父自定义组件的冻结策略，来更新自己的冻结策略： + +| 类 | 接口 | +| -------- | -------- | +| [FrameNode](../reference/apis-arkui/js-apis-arkui-frameNode.md) | [appendChild](../reference/apis-arkui/js-apis-arkui-frameNode.md#appendchild12)、[insertChildAfter](../reference/apis-arkui/js-apis-arkui-frameNode.md#insertchildafter12)、[removeChild](../reference/apis-arkui/js-apis-arkui-frameNode.md#removechild12)、[clearChildren](../reference/apis-arkui/js-apis-arkui-frameNode.md#clearchildren12)、[addComponentContent](../reference/apis-arkui/js-apis-arkui-frameNode.md#addcomponentcontent12) | +| [NodeContent](../reference/apis-arkui/js-apis-arkui-NodeContent.md) | [addFrameNode](../reference/apis-arkui/js-apis-arkui-NodeContent.md#addframenode12)、[removeFrameNode](../reference/apis-arkui/js-apis-arkui-NodeContent.md#removeframenode12) | +| [NodeController](../reference/apis-arkui/js-apis-arkui-nodeController.md) | [makeNode](../reference/apis-arkui/js-apis-arkui-nodeController.md#makenode) | +| [RenderNode](../reference/apis-arkui/js-apis-arkui-renderNode.md) | [appendChild](../reference/apis-arkui/js-apis-arkui-renderNode.md#appendchild)、[insertChildAfter](../reference/apis-arkui/js-apis-arkui-renderNode.md#insertchildafter)、[removeChild](../reference/apis-arkui/js-apis-arkui-renderNode.md#removechild)、[clearChildren](../reference/apis-arkui/js-apis-arkui-renderNode.md#clearchildren) | +| [NodeAdaper](../reference/apis-arkui/js-apis-arkui-frameNode.md#nodeadapter12) | 节点通过[懒加载](../reference/apis-arkui/arkui-ts/ts-rendering-control-lazyforeach.md)方式上下树时 | + +> **说明：** +> +> 当BuilderNode节点设置为继承父自定义组件的冻结策略时，BuilderNode节点的冻结策略将与其上层最近的自定义组件或BuilderNode节点的冻结策略保持一致。 +> +> 当BuilderNode节点被冻结时，调用[update](../reference/apis-arkui/js-apis-arkui-builderNode.md#update)接口不会触发节点的更新，等其被解冻时再更新节点。 + ```ts import { BuilderNode, FrameNode, NodeController } from '@kit.ArkUI'; @@ -1117,9 +1133,9 @@ class TextNodeController extends NodeController { this.rootNode = new FrameNode(context); this.textNode = new BuilderNode(context, { selfIdealSize: { width: 150, height: 150 } }); this.textNode.build(wrapBuilder<[Params]>(buildText), new Params(this.count)); - this.textNode.inheritFreezeOptions(true); //设置BuilderNode的冻结继承状态为true + this.textNode.inheritFreezeOptions(true); // 设置BuilderNode的冻结继承状态为true if (this.rootNode !== null) { - this.rootNode.appendChild(this.textNode.getFrameNode()); //将BuilderNode上树 + this.rootNode.appendChild(this.textNode.getFrameNode()); // 将BuilderNode上树 } return this.rootNode; } @@ -1127,7 +1143,7 @@ class TextNodeController extends NodeController { update(): void { if (this.textNode !== null) { this.count += 1; - this.textNode.update(new Params(this.count)); //更新BuilderNode中的数据，可以触发Log + this.textNode.update(new Params(this.count)); // 更新BuilderNode中的数据，可以触发Log } } @@ -1153,7 +1169,7 @@ struct MyNavigationTestStack { build() { Column() { - Button('update builderNode') //点击更新BuildrNode + Button('update builderNode') // 点击更新BuildrNode .onClick(() => { textNodeController.update(); }) @@ -1164,7 +1180,7 @@ struct MyNavigationTestStack { .height(40) .margin(20) .onClick(() => { - this.pageInfo.pushPath({ name: 'pageOne' }); //将name指定的NavDestination页面信息入栈 + this.pageInfo.pushPath({ name: 'pageOne' }); // 将name指定的NavDestination页面信息入栈 }) } }.title('NavIndex') @@ -1258,7 +1274,7 @@ struct TextBuilder { @Prop @Watch("info") message: number = 0; info() { - console.info(`freeze-test TextBuilder message callback ${this.message}`); //根据message内容变化来打印日志来判断是否冻结 + console.info(`freeze-test TextBuilder message callback ${this.message}`); // 根据message内容变化来打印日志来判断是否冻结 } build() { diff --git a/zh-cn/application-dev/ui/arkts-user-defined-extension-drawModifier.md b/zh-cn/application-dev/ui/arkts-user-defined-extension-drawModifier.md index 82c9808041a..44600d45301 100644 --- a/zh-cn/application-dev/ui/arkts-user-defined-extension-drawModifier.md +++ b/zh-cn/application-dev/ui/arkts-user-defined-extension-drawModifier.md @@ -56,6 +56,7 @@ class MyFullDrawModifier extends DrawModifier { this.uiContext = uiContext; } + // 重载drawBehind方法，实现自定义绘制内容背景。 drawBehind(context: DrawContext): void { const brush = new drawing.Brush(); brush.setColor({ @@ -75,6 +76,7 @@ class MyFullDrawModifier extends DrawModifier { }); } + // 重载drawContent方法，实现自定义绘制内容。 drawContent(context: DrawContext): void { const brush = new drawing.Brush(); brush.setColor({ @@ -94,6 +96,7 @@ class MyFullDrawModifier extends DrawModifier { }); } + // 重载drawFront方法，实现自定义绘制内容前景。 drawFront(context: DrawContext): void { const brush = new drawing.Brush(); brush.setColor({ @@ -120,6 +123,7 @@ class MyFrontDrawModifier extends DrawModifier { this.uiContext = uiContext; } + // 重载drawFront方法，实现自定义绘制内容前景。 drawFront(context: DrawContext): void { const brush = new drawing.Brush(); brush.setColor({ @@ -139,6 +143,7 @@ class MyFrontDrawModifier extends DrawModifier { @Entry @Component struct DrawModifierExample { + // 将自定义绘制前景的类实例化，传入UIContext实例。 private fullModifier: MyFullDrawModifier = new MyFullDrawModifier(this.getUIContext()); private frontModifier: MyFrontDrawModifier = new MyFrontDrawModifier(this.getUIContext()); private drawAnimator: AnimatorResult | undefined = undefined; @@ -146,6 +151,7 @@ struct DrawModifierExample { private count = 0; create() { + // 设置绘制动画 let self = this; this.drawAnimator = this.getUIContext().createAnimator({ duration: 1000, @@ -175,10 +181,12 @@ struct DrawModifierExample { .margin(10) .backgroundColor(Color.Gray) .onClick(() => { + // 修改当前绘制大小 const tempModifier = this.modifier as MyFullDrawModifier | MyFrontDrawModifier; tempModifier.scaleX -= 0.1; tempModifier.scaleY -= 0.1; }) + // 调用此接口并传入自定义绘制的类实例，即可实现自定义绘制。 .drawModifier(this.modifier) } @@ -189,6 +197,7 @@ struct DrawModifierExample { .margin(10) .backgroundColor(0xFF2787D9) .onClick(() => { + // 创建动画 this.create(); }) Button('play') @@ -197,6 +206,7 @@ struct DrawModifierExample { .margin(10) .backgroundColor(0xFF2787D9) .onClick(() => { + // 播放动画 if (this.drawAnimator) { this.drawAnimator.play(); } @@ -207,6 +217,7 @@ struct DrawModifierExample { .margin(10) .backgroundColor(0xFF2787D9) .onClick(() => { + // 切换modifier this.count += 1; if (this.count % 2 === 1) { console.log('change to full modifier'); @@ -244,6 +255,7 @@ class MyForegroundDrawModifier extends DrawModifier { this.uiContext = uiContext; } + // 重载drawForeground方法，实现自定义绘制前景。 drawForeground(context: DrawContext): void { const brush = new drawing.Brush(); brush.setColor({ @@ -267,6 +279,7 @@ class MyForegroundDrawModifier extends DrawModifier { @Entry @Component struct DrawModifierExample { + // 将自定义绘制前景的类实例化，传入UIContext实例。 private foregroundModifier: MyForegroundDrawModifier = new MyForegroundDrawModifier(this.getUIContext()); build() { @@ -277,12 +290,13 @@ struct DrawModifierExample { .height('100%') .textAlign(TextAlign.Center) } - .margin(100) + .margin(50) + .width(280) .height(300) .backgroundColor(0x87CEEB) + // 调用此接口并传入自定义绘制前景的类实例，即可实现自定义绘制前景。 .drawModifier(this.foregroundModifier) } } - ``` ![drawForeground.png](figures/drawForeground.png) \ No newline at end of file -- Gitee