1# 特效绘制合并 2 3用于对背景模糊等特效进行绘制合并。 4 5> **说明：** 6> 7> 从API Version 12开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8> 9 10## useEffect 11 12useEffect(value: boolean) 13 14用于对背景模糊等特效进行绘制合并。 15 16**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 17 18**系统能力：** SystemCapability.ArkUI.ArkUI.Full 19 20**参数：** 21 22| 参数名 | 类型 | 必填 | 说明 | 23| -------- | -------- | -------- | -------- | 24| value | boolean | 是 | 控制组件是否继承EffectComponent组件的特效属性参数，从而合并绘制特效。<br/>useEffect为true时子组件继承EffectComponent组件的特效属性参数，为false时子组件不继承EffectComponent组件的特效属性参数。<br/>默认值：false| 25 26## useEffect<sup>14+</sup> 27 28useEffect(useEffect: boolean, effectType: EffectType) 29 30用于设置组件是否应用<!--Del-->父级[EffectComponent](ts-container-effectcomponent-sys.md)或<!--DelEnd-->窗口定义的效果模板。 31 32**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 33 34**系统能力：** SystemCapability.ArkUI.ArkUI.Full 35 36**参数：** 37 38| 参数名 | 类型 | 必填 | 说明 | 39| ---------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 40| useEffect | boolean | 是 | 控制组件是否应用<!--Del-->父级EffectComponent或<!--DelEnd-->窗口定义的效果模板。<br/>useEffect为true时表示应用<!--Del-->父级EffectComponent或<!--DelEnd-->窗口定义的效果模板。<br/>默认值：false | 41| effectType | [EffectType](ts-universal-attributes-use-effect.md#effecttype14) | 是 | 设置组件应用<!--Del-->父级EffectComponent或<!--DelEnd-->窗口定义的效果模板。<br/>默认值：EffectType.DEFAULT | 42 43## useEffect<sup>18+</sup> 44 45useEffect(useEffect: Optional\<boolean>, effectType?: EffectType) 46 47用于设置组件是否应用<!--Del-->父级[EffectComponent](ts-container-effectcomponent-sys.md)或<!--DelEnd-->窗口定义的效果模板。与[useEffect<sup>14+</sup>](#useeffect)相比，useEffect参数新增了对undefined类型的支持。 48 49**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 50 51**系统能力：** SystemCapability.ArkUI.ArkUI.Full 52 53**参数：** 54 55| 参数名 | 类型 | 必填 | 说明 | 56| -------- | -------- | -------- | -------- | 57| useEffect | Optional\<boolean> | 是 | 控制组件是否应用<!--Del-->父级EffectComponent或<!--DelEnd-->窗口定义的效果模板。<br/>useEffect为true时表示应用<!--Del-->父级EffectComponent或<!--DelEnd-->窗口定义的效果模板。<br/>默认值：false<br/>当useEffect的值为undefined时，维持之前取值。 | 58| effectType | [EffectType](ts-universal-attributes-use-effect.md#effecttype14) | 否 | 设置组件应用<!--Del-->父级EffectComponent或<!--DelEnd-->窗口定义的效果模板。<br/>默认值：EffectType.DEFAULT| 59 60## EffectType<sup>14+</sup> 61 62使用效果模板种类的枚举值。 63 64**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 65 66**系统能力：** SystemCapability.ArkUI.ArkUI.Full 67 68| 名称 | 值 | 说明 | 69| -------- | ---- | ---------------------- | 70| DEFAULT | 0 | 使用<!--Del-->父级EffectComponent定义的<!--DelEnd-->效果模板进行定义。 | 71| WINDOW_EFFECT | 1 | 使用窗口定义的效果模板进行定义。 | 72 73效果模板 74 75| 设备类型 | 模糊半径(单位: px) | 饱和度 | 亮度 | 颜色 | 76| -------- | ---- | ---------------------- | -------- | -------- | 77| 移动设备 | 0 | 0 | 0 | '#ffffffff' 78| 2in1设备：深色模式 | 80 | 1.5 | 1.0 | '#e52e3033' 79| 2in1设备：浅色模式 | 80 | 1.9 | 1.0 | '#e5ffffff' 80| Tablet设备 | 0 | 0 | 0 | '#ffffffff' 81 82<!--Del--> 83## 示例 84 85该示例主要通过背景模糊等特效进行绘制合并效果。 86 87<!--code_no_check--> 88 89```ts 90//Index.ets 91@Entry 92@Component 93struct Index { 94 @State isUse: boolean = true; 95 96 build() { 97 Stack() { 98 Image($r("app.media.mountain")) 99 .autoResize(true) 100 EffectComponent() { 101 Column({ space: 20 }) { 102 Column() { 103 } 104 .position({ x: 0, y: 0 }) 105 .width(150) 106 .height(800) 107 .useEffect(this.isUse, EffectType.WINDOW_EFFECT) 108 109 Column() { 110 } 111 .position({ x: 200, y: 20 }) 112 .width(150) 113 .height(300) 114 .useEffect(this.isUse, EffectType.DEFAULT) 115 116 Column() { 117 } 118 .position({ x: 400, y: 20 }) 119 .width(150) 120 .height(300) 121 .useEffect(this.isUse) 122 } 123 .width('100%') 124 .height('100%') 125 } 126 .backgroundBlurStyle(BlurStyle.Thin) 127 128 Column() { 129 } 130 .position({ x: 600, y: 0 }) 131 .width(150) 132 .height(800) 133 .useEffect(this.isUse, EffectType.WINDOW_EFFECT) 134 135 Row() { 136 Button('useEffect') 137 .margin(30) 138 .onClick(() => { 139 this.isUse = !this.isUse; 140 }) 141 } 142 .position({ x: 300, y: 450 }) 143 } 144 .backgroundColor(Color.Black) 145 .width('100%') 146 } 147} 148``` 149 150 151<!--DelEnd-->
