1# 背景设置 2 3设置组件的背景样式。 4 5> **说明：** 6> 7> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9## background<sup>10+</sup> 10 11background(builder: CustomBuilder, options?: { align?: Alignment }) 12 13设置组件背景。 14 15**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 16 17**系统能力：** SystemCapability.ArkUI.ArkUI.Full 18 19**参数：** 20 21| 参数名 | 类型 | 必填 | 说明 | 22| ------- | ---------------------------------------------------- | ---- | ------------------------------------------------------------ | 23| builder | [CustomBuilder](ts-types.md#custombuilder8) | 是 | 自定义背景。 | 24| options | {align?:[Alignment](ts-appendix-enums.md#alignment)} | 否 | 设置自定义背景与组件的对齐方式。<br/>同时设置了background，backgroundColor，backgroundImage时，叠加显示，background在最上层。 | 25 26> **说明：** 27> 28> 自定义背景渲染会有一定延迟，不能响应事件，不能进行动态更新。该属性不支持嵌套使用，不支持预览器预览。 29 30## backgroundColor 31 32backgroundColor(value: ResourceColor) 33 34设置组件背景色。 35 36**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 37 38**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 39 40**系统能力：** SystemCapability.ArkUI.ArkUI.Full 41 42**参数：** 43 44| 参数名 | 类型 | 必填 | 说明 | 45| ------ | ------------------------------------------ | ---- | ------------------ | 46| value | [ResourceColor](ts-types.md#resourcecolor) | 是 | 设置组件的背景色。 | 47 48> **说明：** 49> 50> 当通过[backgroundBlurStyle](#backgroundblurstyle9)中的inactiveColor指定背景色时，不建议再通过backgroundColor设置背景色。 51 52## backgroundImage 53 54backgroundImage(src: ResourceStr | PixelMap, repeat?: ImageRepeat) 55 56设置组件的背景图片。 57 58**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 59 60**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 61 62**系统能力：** SystemCapability.ArkUI.ArkUI.Full 63 64**参数：** 65 66| 参数名 | 类型 | 必填 | 说明 | 67| ------ | ----------------------------------------------- | ---- | ------------------------------------------------------------ | 68| src | [ResourceStr](ts-types.md#resourcestr) \| [PixelMap<sup>12+</sup>](../../apis-image-kit/js-apis-image.md#pixelmap7) | 是 | 图片地址，支持网络图片资源地址和本地图片资源地址和Base64或者PixelMap资源，不支持svg类型的图片。 | 69| repeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat) | 否 | 设置背景图片的重复样式，默认不重复。当设置的背景图片为透明底色图片，且同时设置了backgroundColor时，二者叠加显示，背景颜色在最底部。 | 70 71## backgroundImageSize 72 73backgroundImageSize(value: SizeOptions | ImageSize) 74 75设置组件背景图片的宽高。 76 77**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 78 79**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 80 81**系统能力：** SystemCapability.ArkUI.ArkUI.Full 82 83**参数：** 84 85| 参数名 | 类型 | 必填 | 说明 | 86| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 87| value | [SizeOptions](ts-universal-attributes-size.md#sizeoptions对象说明) \| [ImageSize](ts-appendix-enums.md#imagesize) | 是 | 设置背景图像的高度和宽度。当输入为{width: Length, height: Length}对象时，如果只设置一个属性，则第二个属性保持图片原始宽高比进行调整。默认保持原图的比例不变。<br/>width和height取值范围： [0, +∞)<br/>默认值：ImageSize.Auto<br/>**说明：** <br/>width和height均设置为小于或等于0的值时，按值为0显示。当width和height中只有一个值未设置或者设置为小于等于0的值时，另一个会根据图片原始宽高比进行调整。 | 88 89## backgroundImagePosition 90 91backgroundImagePosition(value: Position | Alignment) 92 93设置背景图的位置。 94 95**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 96 97**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 98 99**系统能力：** SystemCapability.ArkUI.ArkUI.Full 100 101**参数：** 102 103| 参数名 | 类型 | 必填 | 说明 | 104| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 105| value | [Position](ts-types.md#position) \| [Alignment](ts-appendix-enums.md#alignment) | 是 | 设置背景图在组件中显示位置，即相对于组件左上角的坐标。<br/>默认值：<br/>{<br/>x: 0,<br/>y: 0<br/>} <br/> x和y值设置百分比时，偏移量是相对组件自身宽高计算的。 | 106 107## BlurStyle<sup>9+</sup> 108 109**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 110 111**系统能力：** SystemCapability.ArkUI.ArkUI.Full 112 113| 名称 | 描述 | 114| -------------------- | --------- | 115| Thin | 轻薄材质模糊。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 116| Regular | 普通厚度材质模糊。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 117| Thick | 厚材质模糊。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 118| BACKGROUND_THIN<sup>10+</sup> | 近距景深模糊。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 119| BACKGROUND_REGULAR<sup>10+</sup> | 中距景深模糊。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 120| BACKGROUND_THICK<sup>10+</sup> | 远距景深模糊。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 121| BACKGROUND_ULTRA_THICK<sup>10+</sup> | 超远距景深模糊。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 122| NONE<sup>10+</sup> | 关闭模糊。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 123| COMPONENT_ULTRA_THIN<sup>11+</sup> | 组件超轻薄材质模糊。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 124| COMPONENT_THIN<sup>11+</sup> | 组件轻薄材质模糊。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 125| COMPONENT_REGULAR<sup>11+</sup> | 组件普通材质模糊。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 126| COMPONENT_THICK<sup>11+</sup> | 组件厚材质模糊。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 127| COMPONENT_ULTRA_THICK<sup>11+</sup> | 组件超厚材质模糊。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 128 129## backgroundBlurStyle<sup>9+</sup> 130 131backgroundBlurStyle(value: BlurStyle, options?: BackgroundBlurStyleOptions) 132 133为当前组件提供一种在背景和内容之间的模糊能力，通过枚举值的方式封装了不同的模糊半径、蒙版颜色、蒙版透明度、饱和度、亮度。 134 135**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 136 137**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 138 139**系统能力：** SystemCapability.ArkUI.ArkUI.Full 140 141**参数：** 142 143| 参数名 | 类型 | 必填 | 说明 | 144| --------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 145| value | [BlurStyle](#blurstyle9) | 是 | 背景模糊样式。模糊样式中封装了模糊半径、蒙版颜色、蒙版透明度、饱和度、亮度五个参数。 | 146| options<sup>10+</sup> | [BackgroundBlurStyleOptions](#backgroundblurstyleoptions10对象说明) | 否 | 背景模糊选项。 | 147 148> **说明：** 149> 150> 当通过backgroundBlurStyle中的inactiveColor指定背景色时，不建议再通过[backgroundColor](#backgroundcolor)设置背景色。 151 152## backdropBlur 153 154backdropBlur(value: number, options?: BlurOptions) 155 156为组件添加背景模糊效果，可以自定设置模糊半径和灰阶参数。 157 158**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 159 160**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 161 162**系统能力：** SystemCapability.ArkUI.ArkUI.Full 163 164**参数：** 165 166| 参数名 | 类型 | 必填 | 说明 | 167| --------------------- | ------------------------------------------------- | ---- | ------------------------------------------------------------ | 168| value | number | 是 | 为当前组件添加背景模糊效果，入参为模糊半径，模糊半径越大越模糊，为0时不模糊。 | 169| options<sup>11+</sup> | [BlurOptions](ts-universal-attributes-foreground-blur-style.md#bluroptions11) | 否 | 灰阶梯参数。 | 170 171> **说明：** 172> 173> blur和backdropBlur是实时模糊接口，会每帧进行实时渲染，性能负载较高。当模糊内容和模糊半径都不需要变化时，建议使用[静态模糊接口](../../apis-arkgraphics2d/js-apis-effectKit.md#blur)。 174 175## backgroundEffect<sup>11+</sup> 176 177backgroundEffect(options: BackgroundEffectOptions) 178 179设置组件背景属性，包含背景模糊半径，亮度，饱和度，颜色等参数。 180 181**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 182 183**系统能力：** SystemCapability.ArkUI.ArkUI.Full 184 185**参数：** 186 187| 参数名 | 类型 | 必填 | 说明 | 188| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------ | 189| options | [BackgroundEffectOptions](#backgroundeffectoptions11) | 是 | 设置组件背景属性包括：饱和度，亮度，颜色。 | 190 191## BackgroundEffectOptions<sup>11+</sup> 192背景效果参数。 193 194**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 195 196**系统能力：** SystemCapability.ArkUI.ArkUI.Full 197 198| 名称 | 类型 | 必填 | 说明 | 199| ---- | ---- | ---- | -------------------------- | 200| radius | number | 是 | 模糊半径，取值范围：[0, +∞)，默认为0。 | 201| saturation | number | 否 | 饱和度，取值范围：[0, +∞)，默认为1。推荐取值范围：[0, 50]。 | 202| brightness | number | 否 | 亮度，取值范围：[0, +∞)，默认为1。推荐取值范围：[0, 2]。 | 203| color | [ResourceColor](ts-types.md#resourcecolor) | 否 | 颜色，默认透明色。 | 204| adaptiveColor | [AdaptiveColor](ts-universal-attributes-foreground-blur-style.md#adaptivecolor10) | 否 | 背景模糊效果使用的取色模式,默认为DEFAULT。使用AVERAGE时color必须带有透明度，取色模式才生效。 | 205| blurOptions | [BlurOptions](ts-universal-attributes-foreground-blur-style.md#bluroptions11) | 否 | 灰阶模糊参数，默认为[0,0]。 | 206| policy<sup>14+</sup> | [BlurStyleActivePolicy](#blurstyleactivepolicy14) | 否 | 模糊激活策略。<br/> 默认值：BlurStyleActivePolicy.ALWAYS_ACTIVE | 207| inactiveColor<sup>14+</sup> | [ResourceColor](ts-types.md#resourcecolor) | 否 | 窗口失焦后，窗口内控件模糊效果会被移除，则使用inactiveColor作为控件背板颜色。 | 208 209## backgroundImageResizable<sup>12+</sup> 210 211backgroundImageResizable(value: ResizableOptions) 212 213设置背景图在拉伸时可调整大小的图像选项。 214 215设置合法的ResizableOptions时，[backgroundImage](#backgroundimage)属性中的repeat参数设置不生效。 216 217当设置top+bottom大于原图的高或者left+right大于原图的宽时，ResizableOptions属性设置不生效。 218 219**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 220 221**系统能力：** SystemCapability.ArkUI.ArkUI.Full 222 223**参数：** 224 225| 参数名 | 类型 | 必填 | 说明 | 226| ------ | --------------------------------------- | ---- | -------------------------------- | 227| value | [ResizableOptions](ts-basic-components-image.md#resizableoptions11) | 是 | 图像拉伸时可调整大小的图像选项。 | 228 229## BackgroundBlurStyleOptions<sup>10+</sup>对象说明 230 231继承自[BlurStyleOptions](ts-universal-attributes-foreground-blur-style.md) 232 233**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 234 235**系统能力：** SystemCapability.ArkUI.ArkUI.Full 236 237| 名称 | 类型 | 必填 | 说明 | 238| ------ | ------------------------------------------------------------ | ---- | ---------------------------------------------------- | 239| policy<sup>14+</sup> | [BlurStyleActivePolicy](#blurstyleactivepolicy14) | 否 | 模糊激活策略。<br/> 默认值：BlurStyleActivePolicy.ALWAYS_ACTIVE | 240| inactiveColor<sup>14+</sup> | [ResourceColor](ts-types.md#resourcecolor) | 否 | 窗口失焦后，窗口内控件模糊效果会被移除，则使用inactiveColor作为控件背板颜色。 | 241 242## BlurStyleActivePolicy<sup>14+</sup> 243 244**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 245 246**系统能力**：SystemCapability.ArkUI.ArkUI.Full 247 248| 名称 | 值|说明 | 249| ------ | ----------------------------- |----------------------------- | 250| FOLLOWS_WINDOW_ACTIVE_STATE| 0|模糊效果跟随窗口焦点状态变化，非焦点不模糊，焦点模糊。| 251| ALWAYS_ACTIVE | 1|一直有模糊效果。| 252| ALWAYS_INACTIVE |2 |一直无模糊效果。| 253 254## backgroundBrightness<sup>12+</sup> 255 256backgroundBrightness(params: BackgroundBrightnessOptions) 257 258设置组件背景提亮效果。 259 260**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 261 262**系统能力：** SystemCapability.ArkUI.ArkUI.Full 263 264**参数：** 265 266| 参数名 | 类型 | 必填 | 说明 | 267| ------ | ------------------------------------------------------------ | ---- | ---------------------------------------------------- | 268| params | [BackgroundBrightnessOptions](#backgroundbrightnessoptions12对象说明) | 是 | 设置组件背景提亮效果，包括：亮度变化速率，提亮程度。 | 269 270## BackgroundBrightnessOptions<sup>12+</sup>对象说明 271 272**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 273 274**系统能力：** SystemCapability.ArkUI.ArkUI.Full 275 276| 名称 | 类型 | 必填 | 说明 | 277| ------------- | ------ | ---- | ------------------------------------------------------------ | 278| rate | number | 是 | 亮度变化速率。亮度变化速率越大，提亮程度下降速度越快。若rate为0，则lightUpDegree将不生效，即不会产生任何提亮效果。<br/>默认值：0.0 <br/>取值范围：(0.0, +∞) | 279| lightUpDegree | number | 是 | 提亮程度。提亮程度越大，亮度提升程度越大。<br/> 默认值：0.0 <br/>取值范围：[-1.0, 1.0] | 280 281> **说明：** 282> 283> 对于组件背景内容，每个像素自身的亮度（灰阶值）的计算公式为： 284> `Y = （0.299R + 0.587G + 0.114B）/ 255.0`（R、G、B分别表示像素红色、绿色和蓝色通道的值，Y表示灰阶值），通过上述公式将像素点的灰阶值归一化至0~1的范围。 285> 每个像素的亮度提升计算公式为：`ΔY = -rate*Y + lightUpDegree`。例如，当rate=0.5，lightUpDegree=0.5时，对于灰阶值为0.2的像素点，亮度增加值为`-0.5*0.2 + 0.5 = 0.4`，对于灰阶值为1的像素点，亮度增加值为`-0.5*1 + 0.5 = 0`。 286 287## 示例 288 289### 示例1（设置背景基础样式） 290 291该示例通过配置backgroundColor、backgroundImage、backgroundImageSize和backgroundImagePosition设置背景的基础样式。 292 293```ts 294// xxx.ets 295@Entry 296@Component 297struct BackgroundExample { 298 299 build() { 300 Column({ space: 5 }) { 301 Text('background color').fontSize(9).width('90%').fontColor(0xCCCCCC) 302 Row().width('90%').height(50).backgroundColor(0xE5E5E5).border({ width: 1 }) 303 304 Text('background image repeat along X').fontSize(9).width('90%').fontColor(0xCCCCCC) 305 Row() 306 .backgroundImage('/comment/bg.jpg', ImageRepeat.X) 307 .backgroundImageSize({ width: '250px', height: '140px' }) 308 .width('90%') 309 .height(70) 310 .border({ width: 1 }) 311 312 Text('background image repeat along Y').fontSize(9).width('90%').fontColor(0xCCCCCC) 313 Row() 314 .backgroundImage('/comment/bg.jpg', ImageRepeat.Y) 315 .backgroundImageSize({ width: '500px', height: '120px' }) 316 .width('90%') 317 .height(100) 318 .border({ width: 1 }) 319 320 Text('background image size').fontSize(9).width('90%').fontColor(0xCCCCCC) 321 Row() 322 .width('90%').height(150) 323 .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat) 324 .backgroundImageSize({ width: 1000, height: 500 }) 325 .border({ width: 1 }) 326 327 Text('background fill the box(Cover)').fontSize(9).width('90%').fontColor(0xCCCCCC) 328 // 不保证图片完整的情况下占满盒子 329 Row() 330 .width(200) 331 .height(50) 332 .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat) 333 .backgroundImageSize(ImageSize.Cover) 334 .border({ width: 1 }) 335 336 Text('background fill the box(Contain)').fontSize(9).width('90%').fontColor(0xCCCCCC) 337 // 保证图片完整的情况下放到最大 338 Row() 339 .width(200) 340 .height(50) 341 .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat) 342 .backgroundImageSize(ImageSize.Contain) 343 .border({ width: 1 }) 344 345 Text('background image position').fontSize(9).width('90%').fontColor(0xCCCCCC) 346 Row() 347 .width(100) 348 .height(50) 349 .backgroundImage('/comment/bg.jpg', ImageRepeat.NoRepeat) 350 .backgroundImageSize({ width: 1000, height: 560 }) 351 .backgroundImagePosition({ x: -500, y: -300 }) 352 .border({ width: 1 }) 353 } 354 .width('100%').height('100%').padding({ top: 5 }) 355 } 356} 357``` 358 359 360 361### 示例2（设置背景模糊样式） 362 363该示例通过backgroundBlurStyle设置背景模糊样式。 364 365```ts 366// xxx.ets 367@Entry 368@Component 369struct BackgroundBlurStyleDemo { 370 build() { 371 Column() { 372 Row() { 373 Text("Thin Material") 374 } 375 .width('50%') 376 .height('50%') 377 .backgroundBlurStyle(BlurStyle.Thin, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT, scale: 1.0 }) 378 .position({ x: '15%', y: '30%' }) 379 } 380 .height('100%') 381 .width('100%') 382 .backgroundImage($r('app.media.bg')) 383 .backgroundImageSize(ImageSize.Cover) 384 } 385} 386``` 387 388 389 390### 示例3（设置组件背景） 391 392该示例通过background设置组件背景。 393 394```ts 395// xxx.ets 396@Entry 397@Component 398struct BackgroundExample { 399 @Builder renderBackground() { 400 Column() { 401 Progress({value : 50}) 402 } 403 } 404 405 build() { 406 Column() { 407 Text("content") 408 .width(100) 409 .height(40) 410 .fontColor("#FFF") 411 .position({x:50, y:80}) 412 .textAlign(TextAlign.Center) 413 .backgroundColor(Color.Green) 414 } 415 .width(200).height(200) 416 .background(this.renderBackground) 417 .backgroundColor(Color.Gray) 418 } 419} 420``` 421 422 423 424### 示例4（设置组件背景提亮效果） 425 426该示例通过backgroundBrightness设置组件背景提亮效果。 427 428```ts 429// xxx.ets 430@Entry 431@Component 432struct BackgroundBrightnessDemo { 433 build() { 434 Column() { 435 Row() { 436 Text("BackgroundBrightness") 437 } 438 .width(200) 439 .height(100) 440 .position({ x: 100, y: 100 }) 441 .backgroundBlurStyle(BlurStyle.Thin, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT}) 442 .backgroundBrightness({rate:0.5,lightUpDegree:0.5}) // 背景提亮效果 443 } 444 .width('100%') 445 .height('100%') 446 .backgroundImage($r('app.media.image')) 447 .backgroundImageSize(ImageSize.Cover) 448 } 449} 450``` 451 452效果图如下： 453 454rate和lightUpDegree参数值为0.5,0.5： 455 456 457 458修改rate和lightUpDegree参数值为0.5,-0.1： 459 460 461 462去掉backgroundBrightness的设置，效果如下： 463 464 465 466### 示例5（设置模糊属性） 467 468该示例提供了模糊属性的实现方法。通过blur设置内容模糊，通过backdropBlur设置背景模糊。 469 470```ts 471// xxx.ets 472@Entry 473@Component 474struct BlurEffectsExample { 475 build() { 476 Column({ space: 10 }) { 477 // 对字体进行模糊 478 Text('font blur').fontSize(15).fontColor(0xCCCCCC).width('90%') 479 Flex({ alignItems: ItemAlign.Center }) { 480 Text('original text').margin(10) 481 Text('blur text') 482 .blur(5).margin(10) 483 Text('blur text') 484 .blur(10).margin(10) 485 Text('blur text') 486 .blur(15).margin(10) 487 }.width('90%').height(40) 488 .backgroundColor(0xF9CF93) 489 490 491 // 对背景进行模糊 492 Text('backdropBlur').fontSize(15).fontColor(0xCCCCCC).width('90%') 493 Text() 494 .width('90%') 495 .height(40) 496 .fontSize(16) 497 .backdropBlur(3) 498 .backgroundImage($r('app.media.image')) 499 .backgroundImageSize({ width: 1200, height: 160 }) 500 }.width('100%').margin({ top: 5 }) 501 } 502} 503``` 504 505 506 507### 示例6（设置文字异形模糊效果） 508 509该示例通过blendMode和backgroundEffect实现文字异形模糊效果。<br/> 510如果出现漏线问题，开发者应首先确保两个blendMode所在组件大小严格相同。如果确认相同，可能是组件边界落在浮点数坐标上导致，可尝试设置[pixelRound](ts-universal-attributes-pixelRound.md#pixelround)通用属性，使产生的白线、暗线两侧的组件边界对齐到整数像素坐标上。 511 512```ts 513// xxx.ets 514@Entry 515@Component 516struct Index { 517 @State shColor: Color = Color.White; 518 @State sizeDate: number = 20; 519 @State rVal: number = 255; 520 @State gVal: number = 255; 521 @State bVal: number = 255; 522 @State aVal: number = 0.1; 523 @State rad: number = 40; 524 @State satVal: number = 0.8; 525 @State briVal: number = 1.5; 526 build() { 527 Stack() { 528 Image($r('app.media.image')) 529 Column() { 530 Column({ space: 0 }) { 531 Column() { 532 Text('11') 533 .fontSize(144) 534 .fontWeight(FontWeight.Bold) 535 .fontColor('rgba(255,255,255,1)') 536 .fontFamily('HarmonyOS-Sans-Digit') 537 .maxLines(1) 538 .lineHeight(120 * 1.25) 539 .height(120 * 1.25) 540 .letterSpacing(4 * 1.25) 541 Text('42') 542 .fontSize(144) 543 .fontWeight(FontWeight.Bold) 544 .fontColor('rgba(255,255,255,1)') 545 .fontFamily('HarmonyOS-Sans-Digit') 546 .maxLines(1) 547 .lineHeight(120 * 1.25) 548 .height(120 * 1.25) 549 .letterSpacing(4 * 1.25) 550 .shadow({ 551 color: 'rgba(0,0,0,0)', 552 radius: 20, 553 offsetX: 0, 554 offsetY: 0 555 }) 556 Row() { 557 Text('10月16日') 558 .fontSize(this.sizeDate) 559 .height(22) 560 .fontWeight('medium') 561 .fontColor('rgba(255,255,255,1)') 562 Text('星期一') 563 .fontSize(this.sizeDate) 564 .height(22) 565 .fontWeight('medium') 566 .fontColor('rgba(255,255,255,1)') 567 } 568 } 569 .blendMode(BlendMode.DST_IN, BlendApplyType.OFFSCREEN) 570 .pixelRound({ 571 start: PixelRoundCalcPolicy.FORCE_FLOOR , 572 top: PixelRoundCalcPolicy.FORCE_FLOOR , 573 end: PixelRoundCalcPolicy.FORCE_CEIL, 574 bottom: PixelRoundCalcPolicy.FORCE_CEIL 575 }) 576 } 577 .blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN) 578 .backgroundEffect({ 579 radius: this.rad, 580 saturation: this.satVal, 581 brightness: this.briVal, 582 color: this.getVolumeDialogWindowColor() 583 }) 584 .justifyContent(FlexAlign.Center) 585 .pixelRound({ 586 start: PixelRoundCalcPolicy.FORCE_FLOOR , 587 top: PixelRoundCalcPolicy.FORCE_FLOOR , 588 end: PixelRoundCalcPolicy.FORCE_CEIL, 589 bottom: PixelRoundCalcPolicy.FORCE_CEIL 590 }) 591 } 592 } 593 } 594 getVolumeDialogWindowColor(): ResourceColor | string { 595 return `rgba(${this.rVal.toFixed(0)}, ${this.gVal.toFixed(0)}, ${this.bVal.toFixed(0)}, ${this.aVal.toFixed(0)})`; 596 } 597} 598``` 599 600 601 602### 示例7（模糊效果对比） 603 604该示例对比了backgroundEffect、backDropBlur和backgroundBlurStyle三种不同的模糊效果。 605 606```ts 607// xxx.ets 608@Entry 609@Component 610struct BackGroundBlur { 611 private imageSize: number = 150; 612 613 build() { 614 Column({ space: 5 }) { 615 // backgroundBlurStyle通过枚举值的方式设置模糊参数 616 Stack() { 617 Image($r('app.media.test')) 618 .width(this.imageSize) 619 .height(this.imageSize) 620 Column() 621 .width(this.imageSize) 622 .height(this.imageSize) 623 .backgroundBlurStyle(BlurStyle.Thin) 624 } 625 626 // backgroundEffect 可以自定义设置 模糊半径，亮度，饱和度等参数 627 Stack() { 628 Image($r('app.media.test')) 629 .width(this.imageSize) 630 .height(this.imageSize) 631 Column() 632 .width(this.imageSize) 633 .height(this.imageSize) 634 .backgroundEffect({ radius: 20, brightness: 0.6, saturation: 15 }) 635 } 636 637 // backdropBlur 只能设置模糊半径和灰阶参数 638 Stack() { 639 Image($r('app.media.test')) 640 .width(this.imageSize) 641 .height(this.imageSize) 642 Column() 643 .width(this.imageSize) 644 .height(this.imageSize) 645 .backdropBlur(20, { grayscale: [30, 50] }) 646 } 647 } 648 .width('100%') 649 .padding({ top: 5 }) 650 } 651} 652``` 653 654
