• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# EffectComponent (System API)
2
3The **EffectComponent** component defines combined special effects for child components to optimize the special effect drawing performance.
4
5>  **NOTE**
6>
7> - This component is supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.
8>
9> - The APIs provided by this component are system APIs.
10>
11> - Currently, this component provides only combined background blur effects for child components.
12>
13> - To use this component for combined background blur effects, first replace the **backgroundBlurStyle(BlurStyle)** attribute of the target child components with **useEffect(true)**.
14
15
16## Child Components
17
18Supported
19
20
21## APIs
22
23EffectComponent()
24
25Creates an **EffectComponent** component.
26
27## Events
28
29The universal events are not supported.
30
31## Attributes
32
33The universal attributes are supported. Currently, this component only works with the **backgroundBlurStyle** attribute.
34
35## Example
36
37This example demonstrates how to use the **EffectComponent** component.
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          // Use backgroundBlurStyle to apply a background blur effect.
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          // Do not apply a background blur effect.
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          // Use useEffect to combine drawing of the background blur effect, with blur settings inherited from <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          // Use useEffect to combine drawing of the background blur effect, with blur settings inherited from <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![en-us_image_effectcomponent](figures/en-us_image_effectcomponent.png)
102