1# 前景属性设置 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @CCFFWW--> 5<!--Designer: @yangfan229--> 6<!--Tester: @lxl007--> 7<!--Adviser: @HelloCrease--> 8 9设置组件的前景属性。 10 11> **说明:** 12> 13> 从API version 12开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 14 15## foregroundEffect 16 17foregroundEffect(options: ForegroundEffectOptions): T 18 19设置组件的前景属性。 20 21**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 22 23**系统能力:** SystemCapability.ArkUI.ArkUI.Full 24 25**参数:** 26 27| 参数名 | 类型 | 必填 | 说明 | 28| ------ | ------------------------------------------------------------ | ---- | ---------------------------------------------------- | 29| options | [ForegroundEffectOptions](#foregroundeffectoptions12) | 是 | 设置组件前景属性包括:模糊半径。 | 30 31**返回值:** 32 33| 类型 | 说明 | 34| ------ | ------------------------ | 35| T | 返回当前组件。 | 36 37## ForegroundEffectOptions<sup>12+</sup> 38前景效果参数。 39 40**原子化服务API:** 从API version 12开始,该接口支持在原子化服务中使用。 41 42**系统能力:** SystemCapability.ArkUI.ArkUI.Full 43 44| 名称 | 类型 | 只读 | 可选 | 说明 | 45| ---- | ---- | ---- | ---- | -------------------------- | 46| radius | number | 否 | 否 | 模糊半径,取值范围:[0, +∞),默认为0。<br/> 仅在组件范围内生效,与其他接口连用时超出组件范围的效果无法生效。 | 47 48## 示例 49 50该示例主要演示通过foregroundEffect接口设置前景属性。 51 52```ts 53// xxx.ets 54@Entry 55@Component 56struct Index { 57 build() { 58 Row() { 59 // $r("app.media.icon")需要替换为开发者所需的图像资源文件。 60 Image($r('app.media.icon')) 61 .width(100) 62 .height(100) 63 .foregroundEffect({ radius: 20 }) 64 } 65 .width('100%') 66 .height('100%') 67 .justifyContent(FlexAlign.Center) 68 } 69} 70``` 71 72效果图如下: 73radius表示模糊半径,数值越大,效果越模糊。 74 75 76