diff --git a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md index 1b900e8889e10c75e13a3df45a9bcec49205b2e9..44aa6f6fe174c5a699baf9bcdd6b0d27fc22dc97 100644 --- a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md +++ b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md @@ -141,6 +141,7 @@ - [TabContent](ts-container-tabcontent.md) - [UIExtensionComponent](ts-container-ui-extension-component.md) - [WaterFlow](ts-container-waterflow.md) + - [EffectComponent](ts-container-effectcomponent.md) - 媒体组件 - [Video](ts-media-components-video.md) - 绘制组件 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-effectcomponent.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-effectcomponent.md new file mode 100644 index 0000000000000000000000000000000000000000..1636cea487e3283a934fda1c0c5e47f214903061 --- /dev/null +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-effectcomponent.md @@ -0,0 +1,80 @@ +# EffectComponent + +特效合并容器组件,用于子节点特效绘制的合并,实现特效的绘制性能优化。 + +> **说明:** +> +> - 该组件从API Version 10开始支持。 +> +> - 目前该组件仅支持子组件背景模糊效果的合并优化。在对子组件的背景模糊特效进行绘制合并时,需要将子组件的backgroundBlurStyle(BlurStyle)属性替换成userEffect(true)。 + + +## 子组件 + +可以包含子组件。 + + +## 接口 + +EffectComponent() + +创建特效合并组件,用于对子组件背景模糊特效绘制的合并。 + +## 事件 + +无,不支持通用事件。 + +## 属性 + +支持通用属性,目前仅支持对backgroundBlurStyle属性做绘制合并优化。 + +## 示例 + +```ts +//index.ets +@Entry +@Component +struct Index { + build() { + Stack() { + Image("pages/test1.png") + .autoResize(true) + Column(){ + Text("Normal text with backgroundBlurStyle") + .fontSize(30) + .fontWeight(FontWeight.Bold) + .backgroundBlurStyle(BlurStyle.Thin) + .borderRadius(30) + + EffectComponent() { + Column() { + + Text("Normal text without blur") + .fontSize(30) + .fontWeight(FontWeight.Bold) + .borderRadius(20) + + Text("Normal text with useeffcet blur 1") + .useEffect(true) + .fontSize(30) + .fontWeight(FontWeight.Bold) + .borderRadius(20) + + Text("Normal text with useeffcet blur 2") + .useEffect(true) + .fontSize(30) + .fontWeight(FontWeight.Bold) + .borderRadius(40) + } + .borderWidth(5) + .borderColor(Color.Green) + } + .backgroundBlurStyle(BlurStyle.Thin) + } + } + .backgroundColor(Color.Black) + .width('100%') + .height('100%') + } +} +```