1# Special Effect Drawing Combination 2 3The **useEffect** attribute is used to combine the drawing of special effects, such as background blur. 4 5> **NOTE** 6> 7> The initial APIs of this module is supported since API version 12. Updates will be marked with a superscript to indicate their earliest API version. 8> 9 10## useEffect 11 12useEffect(value: boolean): T 13 14Specifies whether to combine the drawing of special effects, such as background blur. 15 16**Atomic service API**: This API can be used in atomic services since API version 12. 17 18**System capability**: SystemCapability.ArkUI.ArkUI.Full 19 20**Parameters** 21 22| Name| Type| Mandatory| Description| 23| -------- | -------- | -------- | -------- | 24| value | boolean | Yes| Whether the component inherits the special effect settings of the **EffectComponent** component.<br>The value **true** means the component inherits the special effect settings of the **EffectComponent** component, and **false** means the opposite.<br>Default value: **false**| 25 26**Return value** 27 28| Type| Description| 29| -------- | -------- | 30| T | Current component.| 31 32## useEffect<sup>14+</sup> 33 34useEffect(useEffect: boolean, effectType: EffectType): T 35 36Specifies whether to apply the effect defined by <!--Del-->the parent [EffectComponent](ts-container-effectcomponent-sys.md) or <!--DelEnd-->the window. 37 38**Atomic service API**: This API can be used in atomic services since API version 14. 39 40**System capability**: SystemCapability.ArkUI.ArkUI.Full 41 42**Parameters** 43 44| Name | Type | Mandatory| Description | 45| ---------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 46| useEffect | boolean | Yes | Whether to apply the effect defined by <!--Del-->the parent **EffectComponent** or <!--DelEnd-->the window.<br>The value **true** means to apply the effect defined by <!--Del-->the parent **EffectComponent** or <!--DelEnd-->the window.<br>Default value: **false**| 47| effectType | [EffectType](ts-universal-attributes-use-effect.md#effecttype14) | Yes | Type of effect to apply to the component, which is defined by <!--Del-->the parent **EffectComponent** or <!--DelEnd-->the window.<br>Default value: **EffectType.DEFAULT**| 48 49**Return value** 50 51| Type| Description| 52| -------- | -------- | 53| T | Current component.| 54 55## useEffect<sup>18+</sup> 56 57useEffect(useEffect: Optional\<boolean>, effectType?: EffectType): T 58 59Specifies whether to apply the effect defined by <!--Del-->the parent [EffectComponent](ts-container-effectcomponent-sys.md) or <!--DelEnd-->the window. Compared with [useEffect<sup>14+</sup>](#useeffect), this API supports the **undefined** type for the **useEffect** parameter. 60 61**Atomic service API**: This API can be used in atomic services since API version 18. 62 63**System capability**: SystemCapability.ArkUI.ArkUI.Full 64 65**Parameters** 66 67| Name| Type| Mandatory| Description| 68| -------- | -------- | -------- | -------- | 69| useEffect | Optional\<boolean> | Yes| Whether to apply the effect defined by <!--Del-->the parent **EffectComponent** or <!--DelEnd-->the window.<br>The value **true** means to apply the effect defined by <!--Del-->the parent **EffectComponent** or <!--DelEnd-->the window.<br>Default value: **false**<br>If **useEffect** is set to **undefined**, the previous value is retained.| 70| effectType | [EffectType](ts-universal-attributes-use-effect.md#effecttype14) | No| Type of effect to apply to the component, which is defined by <!--Del-->the parent **EffectComponent** or <!--DelEnd-->the window.<br>Default value: **EffectType.DEFAULT**| 71 72**Return value** 73 74| Type| Description| 75| -------- | -------- | 76| T | Current component.| 77 78## EffectType<sup>14+</sup> 79 80Enumerates the types of effect templates. 81 82**Atomic service API**: This API can be used in atomic services since API version 14. 83 84**System capability**: SystemCapability.ArkUI.ArkUI.Full 85 86| Name | Value | Description | 87| -------- | ---- | ---------------------- | 88| DEFAULT | 0 | Uses the effect template defined<!--Del--> by the parent **EffectComponent** or <!--DelEnd-->.| 89| WINDOW_EFFECT | 1 | Uses the effect template defined by the window.| 90 91Effect Template 92 93| Device Type | Fuzzy Radius (Unit: px) | Saturation | Brightness | Color | 94| -------- | ---- | ---------------------- | -------- | -------- | 95| Mobile device | 0 | 0 | 0 | '#ffffffff' 96| 2-in-1 device: dark mode | 80 | 1.5 | 1.0 | '#e52e3033' 97| 2-in-1 device: light mode | 80 | 1.9 | 1.0 | '#e5ffffff' 98| Tablet | 0 | 0 | 0 | '#ffffffff' 99 100<!--Del--> 101## Example 102 103This example shows how to combine the drawing of special effects, including background blur. 104 105<!--code_no_check--> 106 107```ts 108//Index.ets 109@Entry 110@Component 111struct Index { 112 @State isUse: boolean = true; 113 114 build() { 115 Stack() { 116 Image($r("app.media.mountain")) 117 .autoResize(true) 118 EffectComponent() { 119 Column({ space: 20 }) { 120 Column() { 121 } 122 .position({ x: 0, y: 0 }) 123 .width(150) 124 .height(800) 125 .useEffect(this.isUse, EffectType.WINDOW_EFFECT) 126 127 Column() { 128 } 129 .position({ x: 200, y: 20 }) 130 .width(150) 131 .height(300) 132 .useEffect(this.isUse, EffectType.DEFAULT) 133 134 Column() { 135 } 136 .position({ x: 400, y: 20 }) 137 .width(150) 138 .height(300) 139 .useEffect(this.isUse) 140 } 141 .width('100%') 142 .height('100%') 143 } 144 .backgroundBlurStyle(BlurStyle.Thin) 145 146 Column() { 147 } 148 .position({ x: 600, y: 0 }) 149 .width(150) 150 .height(800) 151 .useEffect(this.isUse, EffectType.WINDOW_EFFECT) 152 153 Row() { 154 Button('useEffect') 155 .margin(30) 156 .onClick(() => { 157 this.isUse = !this.isUse; 158 }) 159 } 160 .position({ x: 300, y: 450 }) 161 } 162 .backgroundColor(Color.Black) 163 .width('100%') 164 } 165} 166``` 167 168 169<!--DelEnd--> 170
