• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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![foregroundColor_circle](figures/foregroundEffect.jpg)
76