1# EffectComponent (系统接口)
2
3特效合并容器组件，用于子节点特效绘制的合并，实现特效的绘制性能优化。
4
5>  **说明：**
6>
7> - 该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8>
9> - 本模块为系统接口。
10>
11> - 目前该组件仅支持子组件背景模糊效果的绘制合并优化。
12>
13> - 在对子组件的背景模糊特效进行绘制合并时，需要将子组件的backgroundBlurStyle(BlurStyle)属性替换成useEffect(true)。
14
15
16## 子组件
17
18可以包含子组件。
19
20
21## 接口
22
23EffectComponent()
24
25创建特效绘制合并组件，用于对子组件背景模糊特效的绘制合并。
26
27## 事件
28
29不支持通用事件。
30
31## 属性
32
33支持通用属性，目前仅支持对backgroundBlurStyle属性做绘制合并优化。
34
35## 示例
36
37该示例主要演示如何使用特效绘制合并组件。
38
39```ts
40//Index.ets
41@Entry
42@Component
43struct Index {
44  build() {
45    Stack() {
46      Image($r("app.media.example"))
47        .autoResize(true)
48      EffectComponent() {
49        Column({ space: 20 }) {
50          // 使用backgroundBlurStyle进行模糊绘制
51          Text("Normal text with backgroundBlurStyle")
52            .textAlign(TextAlign.Center)
53            .fontSize(16)
54            .fontWeight(FontWeight.Medium)
55            .backgroundBlurStyle(BlurStyle.Thick)
56            .borderRadius(16)
57            .width('90%')
58            .height('48')
59
60          // 不进行模糊绘制
61          Text("Normal text without blur effect")
62            .textAlign(TextAlign.Center)
63            .fontSize(16)
64            .fontWeight(FontWeight.Medium)
65            .border({ width: 1 })
66            .borderRadius(16)
67            .width('90%')
68            .height('48')
69
70          // 使用useEffect进行模糊合并绘制，继承EffectComponent的模糊参数
71          Text("Normal text with useEffect blur 1")
72            .textAlign(TextAlign.Center)
73            .useEffect(true)
74            .fontSize(16)
75            .fontWeight(FontWeight.Medium)
76            .borderRadius(16)
77            .width('90%')
78            .height('48')
79
80          // 使用useEffect进行模糊合并绘制，继承EffectComponent的模糊参数
81          Text("Normal text with useEffect blur 2")
82            .textAlign(TextAlign.Center)
83            .useEffect(true)
84            .fontSize(16)
85            .fontWeight(FontWeight.Medium)
86            .borderRadius(16)
87            .width('90%')
88            .height('48')
89        }
90        .width('100%')
91      }
92      .backgroundBlurStyle(BlurStyle.Thin)
93    }
94    .backgroundColor(Color.Black)
95    .width('100%')
96    .height('100%')
97  }
98}
99```
100
101![zh-cn_image_effectcomponent](figures/zh-cn_image_effectcomponent.png)