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```ts 38//Index.ets 39@Entry 40@Component 41struct Index { 42 build() { 43 Stack() { 44 Image($r("app.media.example")) 45 .autoResize(true) 46 EffectComponent() { 47 Column({ space: 20 }) { 48 // 使用backgroundBlurStyle进行模糊绘制 49 Text("Normal text with backgroundBlurStyle") 50 .textAlign(TextAlign.Center) 51 .fontSize(16) 52 .fontWeight(FontWeight.Medium) 53 .backgroundBlurStyle(BlurStyle.Thick) 54 .borderRadius(16) 55 .width('90%') 56 .height('48') 57 58 // 不进行模糊绘制 59 Text("Normal text without blur effect") 60 .textAlign(TextAlign.Center) 61 .fontSize(16) 62 .fontWeight(FontWeight.Medium) 63 .border({ width: 1 }) 64 .borderRadius(16) 65 .width('90%') 66 .height('48') 67 68 // 使用useEffect进行模糊合并绘制，继承EffectComponent的模糊参数 69 Text("Normal text with useeffcet blur 1") 70 .textAlign(TextAlign.Center) 71 .useEffect(true) 72 .fontSize(16) 73 .fontWeight(FontWeight.Medium) 74 .borderRadius(16) 75 .width('90%') 76 .height('48') 77 78 // 使用useEffect进行模糊合并绘制，继承EffectComponent的模糊参数 79 Text("Normal text with useeffcet blur 2") 80 .textAlign(TextAlign.Center) 81 .useEffect(true) 82 .fontSize(16) 83 .fontWeight(FontWeight.Medium) 84 .borderRadius(16) 85 .width('90%') 86 .height('48') 87 } 88 .width('100%') 89 } 90 .backgroundBlurStyle(BlurStyle.Thin) 91 } 92 .backgroundColor(Color.Black) 93 .width('100%') 94 .height('100%') 95 } 96} 97``` 98 99
