1# 组件内容模糊 2 3为当前组件添加内容模糊效果。 4 5> **说明：** 6> 7> 从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9## foregroundBlurStyle 10 11foregroundBlurStyle(value: BlurStyle, options?: ForegroundBlurStyleOptions) 12 13为当前组件提供内容模糊能力。 14 15**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 16 17**系统能力：** SystemCapability.ArkUI.ArkUI.Full 18 19**参数：** 20 21| 参数名 | 类型 | 必填 | 说明 | 22| ------- | ------------------------------------------------------------ | ---- | ------------------------ | 23| value | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | 是 | 内容模糊样式。 | 24| options | [ForegroundBlurStyleOptions](#foregroundblurstyleoptions对象说明) | 否 | 可选参数，内容模糊选项。 | 25 26## foregroundBlurStyle<sup>18+</sup> 27 28foregroundBlurStyle(style: Optional\<BlurStyle>, options?: ForegroundBlurStyleOptions, sysOptions?: [SystemAdaptiveOptions](ts-universal-attributes-background.md#systemadaptiveoptions18)) 29 30为当前组件提供内容模糊能力。与[foregroundBlurStyle](#foregroundblurstyle)相比，style参数新增了对undefined类型的支持。 31 32**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 33 34**系统能力：** SystemCapability.ArkUI.ArkUI.Full 35 36**参数：** 37 38| 参数名 | 类型 | 必填 | 说明 | 39| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 40| style | Optional\<[BlurStyle](ts-universal-attributes-background.md#blurstyle9)> | 是 | 内容模糊样式。<br/>当style的值为undefined时，恢复为无模糊的内容。 | 41| options | [ForegroundBlurStyleOptions](#foregroundblurstyleoptions对象说明) | 否 | 可选参数，内容模糊选项。 | 42| sysOptions<sup>18+</sup> | [SystemAdaptiveOptions](ts-universal-attributes-background.md#systemadaptiveoptions18) | 否 | 系统自适应调节参数。<br/>默认值：{ disableSystemAdaptation: false } | 43 44## ForegroundBlurStyleOptions对象说明 45继承自[BlurStyleOptions](#blurstyleoptions) 46 47**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 48 49## BlurStyleOptions 50 51内容模糊选项。 52 53| 名称 | 类型 | 必填 | 说明 | 54| --------------------------- | ------------------------------------------------------- | ---- | ------------------------------------------------------------ | 55| colorMode | [ThemeColorMode](ts-container-with-theme.md#themecolormode10枚举说明) | 否 | 内容模糊效果使用的深浅色模式。<br/>默认值：ThemeColorMode.SYSTEM<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 56| adaptiveColor | [AdaptiveColor](#adaptivecolor10枚举说明) | 否 | 内容模糊效果使用的取色模式。<br/>默认值：AdaptiveColor.DEFAULT<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 57| blurOptions<sup>11+</sup> | [BlurOptions](#bluroptions11) | 否 | 灰阶模糊参数。<br/>默认值：grayscale: [0,0] <br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 58| scale<sup>12+</sup> | number | 否 | 内容模糊效果程度。<br/>默认值：1.0 <br/>取值范围：[0.0, 1.0] <br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 59 60## AdaptiveColor<sup>10+</sup>枚举说明 61 62取色模式。 63 64**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 65 66**系统能力：** SystemCapability.ArkUI.ArkUI.Full 67 68| 名称 | 说明 | 69| ------- | ------------------------- | 70| DEFAULT | 不使用取色模糊。使用默认的颜色作为蒙版颜色。采用非DEFAULT方式较耗时。 | 71| AVERAGE | 使用取色模糊。将取色区域的颜色平均值作为蒙版颜色。 | 72 73## BlurOptions<sup>11+</sup> 74灰阶模糊参数。 75 76**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 77 78**系统能力：** SystemCapability.ArkUI.ArkUI.Full 79 80| 名称 | 类型 | 必填 | 说明 | 81| ---- | ---- | ---- | -------------------------- | 82| grayscale | [number, number] | 是 | 灰阶模糊参数，两参数取值范围均为[0,127] 。对图像中的黑白色进行色阶调整，使其趋于灰色更为柔和美观，对图像中的彩色调整没有效果。参数一表示对黑色的提亮程度，参数二表示对白色的压暗程度，参数值越大调整效果越明显（黑白色变得越灰），有效值范围0-127。例如：设置参数为（20,20），图片中的黑色像素RGB:[0, 0, 0]会调整为[20,20,20]，白色像素RGB:[255,255,255]会调整为[235,235,235]（255-20），图像中的彩色像素维持不变。 | 83 84 85## 示例 86 87该示例主要演示通过foregroundBlurStyle给图片设置内容模糊。 88 89```ts 90// xxx.ets 91@Entry 92@Component 93struct ForegroundBlurStyleDemo { 94 build() { 95 Column() { 96 Text('Thin Material').fontSize(30).fontColor(0xCCCCCC) 97 Image($r('app.media.bg')) 98 .width(300) 99 .height(350) 100 .foregroundBlurStyle(BlurStyle.Thin, 101 { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 1.0 }) 102 } 103 .height('100%') 104 .width('100%') 105 } 106} 107``` 108 109
