From eb8fe910993dfdb7475f9b034fa199928a8e448e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E6=B0=B8=E5=87=AF?= Date: Thu, 26 Jun 2025 10:53:22 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9modifier=20Signed-off-by:=20?= =?UTF-8?q?=E5=88=98=E6=B0=B8=E5=87=AF=20?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../js-apis-arkui-AttributeUpdater.md | 28 ++++- .../state-management/arkts-v1-v2-migration.md | 103 ++++++++++++++++++ 2 files changed, 126 insertions(+), 5 deletions(-) diff --git a/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-AttributeUpdater.md b/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-AttributeUpdater.md index 4d7d121eba3..6812bcfbcb5 100644 --- a/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-AttributeUpdater.md +++ b/zh-cn/application-dev/reference/apis-arkui/js-apis-arkui-AttributeUpdater.md @@ -86,23 +86,41 @@ AttributeUpdater首次设置给组件时提供的样式。 import { AttributeUpdater } from '@kit.ArkUI'; class MyButtonModifier extends AttributeUpdater { + // 该AttributeUpdater对象第一次使用的时候触发的回调 initializeModifier(instance: ButtonAttribute): void { - instance.backgroundColor('#ff2787d9') - .width('50%') - .height(30); + instance.backgroundColor('#ffd5d5d5') + .labelStyle({ maxLines: 3 }) + .width('80%') + } + + // 该AttributeUpdater对象后续使用或者更新的时候触发的回调 + applyNormalAttribute(instance: ButtonAttribute): void { + instance.borderWidth(1); } } @Entry @Component -struct updaterDemo1 { +struct Index { modifier: MyButtonModifier = new MyButtonModifier(); + @State flushTheButton: string = 'Button'; build() { Row() { Column() { - Button("Button") + Button(this.flushTheButton) .attributeModifier(this.modifier) + .onClick(() => { + // 通过AttributeUpdater的attribute对属性进行修改 + // 需要注意先通过组件的attributeModifier属性方法建立组件与AttributeUpdater绑定关系 + this.modifier.attribute?.backgroundColor('#ff2787d9').labelStyle({ maxLines: 5 }); + }) + Button('Change The message to flush the Button') + .width('80%') + .labelStyle({ maxLines: 2 }) + .onClick(() => { + this.flushTheButton = 'Updates' + this.flushTheButton; + }) } .width('100%') } diff --git a/zh-cn/application-dev/ui/state-management/arkts-v1-v2-migration.md b/zh-cn/application-dev/ui/state-management/arkts-v1-v2-migration.md index 7b99c739344..c70a408dcf2 100644 --- a/zh-cn/application-dev/ui/state-management/arkts-v1-v2-migration.md +++ b/zh-cn/application-dev/ui/state-management/arkts-v1-v2-migration.md @@ -3092,3 +3092,106 @@ struct Index { } } ``` +#### AttributeUpdater + +将属性直接设置给组件，无需标记为状态变量即可直接触发UI更新。 + +V1： + +在状态管理V1中，开发者希望通过修改`MyButtonModifier`的`flag`来改变绑定在Button上的属性。由于状态管理V1的\@State装饰器支持自身及第一层对象属性的观察能力，因此只需用\@State装饰`AttributeUpdater`，即可监听其变化并触发属性更新。 + +```ts +// xxx.ets +import { AttributeUpdater } from '@kit.ArkUI'; + +class MyButtonModifier extends AttributeUpdater { + flag: boolean = false; + + initializeModifier(instance: ButtonAttribute): void { + instance.backgroundColor('#ff2787d9') + .width('50%') + .height(30) + } + + applyNormalAttribute(instance: ButtonAttribute): void { + if (this.flag) { + instance.borderWidth(2); + } else { + instance.borderWidth(10); + } + } +} + +@Entry +@Component +struct Index { + @State modifier: MyButtonModifier = new MyButtonModifier(); + + build() { + Row() { + Column() { + Button('Button') + .attributeModifier(this.modifier) + Button('Update') + .onClick(() => { + this.modifier.flag = !this.modifier.flag; + }) + } + .width('100%') + } + .height('100%') + } +} +``` + +V2： + +与状态管理V1不同，状态管理V2的\@Local仅观察自身变化，因此`MyButtonModifier`需添加\@ObservedV2装饰器，`flag`需要被\@Trace装饰，并且需要在组件创建过程中读取`flag`以建立其与Button组件的联系。在`AttributeUpdater`场景中，需在`initializeModifier`中读取`flag`（如示例所示），否则无法建立关联。 + +```ts +// xxx.ets +import { AttributeUpdater } from '@kit.ArkUI'; + +@ObservedV2 +class MyButtonModifier extends AttributeUpdater { + @Trace flag: boolean = false; + + initializeModifier(instance: ButtonAttribute): void { + // initializeModifier会在组件初始化阶段回调，需要在这个地方触发下flag的读，使其建立Button组件的关联。 + this.flag; + instance.backgroundColor('#ff2787d9') + .width('50%') + .height(30) + } + + applyNormalAttribute(instance: ButtonAttribute): void { + if (this.flag) { + instance.borderWidth(2); + } else { + instance.borderWidth(10); + } + } +} + +@Entry +@ComponentV2 +struct Index { + // 状态管理V2装饰器仅观察本层，即当前可以观察到modifier整体赋值的变化。 + @Local modifier: MyButtonModifier = new MyButtonModifier(); + + build() { + Row() { + Column() { + Button('Button') + .attributeModifier(this.modifier) + Button('Update') + .onClick(() => { + this.modifier.flag = !this.modifier.flag; + }) + } + .width('100%') + } + .height('100%') + } +} +``` \ No newline at end of file -- Gitee