1# 浮层
2
3设置组件的浮层。
4
5>  **说明：**
6>
7>  从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8
9## overlay
10
11overlay(value: string | CustomBuilder | ComponentContent, options?: OverlayOptions )
12
13在当前组件上，增加遮罩文本或者叠加自定义组件以及ComponentContent作为该组件的浮层。浮层不通过组件树进行渲染，部分接口（例如[getRectangleById](../js-apis-arkui-componentUtils.md#componentutilsgetrectanglebyid)）不支持获取浮层中的组件。
14
15**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
16
17**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
18
19**系统能力：** SystemCapability.ArkUI.ArkUI.Full
20
21**参数：**
22
23| 参数名  | 类型                                                         | 必填 | 说明                                                         |
24| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
25| value   | string&nbsp;\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8)<sup>10+</sup>&nbsp;\| [ComponentContent](../js-apis-arkui-ComponentContent.md)<sup>12+</sup> | 是   | 遮罩文本内容或自定义组件构造函数。<br/>**说明：**<br/>自定义组件作为浮层时，不支持键盘走焦到自定义组件中。通过CustomBuilder设置浮层时，浮层中的内容会在页面刷新时销毁并重新创建，存在一定的性能损耗，页面频繁刷新的场景推荐使用ComponentContent方式设置浮层。 |
26| options | [OverlayOptions](#overlayoptions12) | 否   | 浮层的定位。<br/>**说明：**<br/>需要解析为Json格式。<br/>API version 12之前，options: <br/>{<br/>align?:&nbsp;[Alignment](ts-appendix-enums.md#alignment),&nbsp;<br/>offset?:&nbsp;{x?:&nbsp;number, y?:&nbsp;number}<br/>} |
27
28>  **说明：**
29>
30>  overlay节点不支持onAppear和onDisappear等和节点挂载/卸载相关的事件。
31
32## OverlayOptions<sup>12+</sup>
33
34**系统能力：** SystemCapability.ArkUI.ArkUI.Full
35
36| 名称                  | 类型                                       | 只读 | 可选  | 说明                                                |
37| --------------------- | -------------------------------------------| --- | -------| --------------------------------------------------- |
38| align<sup>7+</sup>   | [Alignment](ts-appendix-enums.md#alignment) | 否  | 是      |设置浮层相对于组件的方位。<br/>默认值：TopStart         |
39| offset<sup>7+</sup>  | [OverlayOffset](#overlayoffset12)          | 否  | 是     |设置浮层基于自身左上角的偏移量。浮层默认处于组件左上角。 |
40
41> **说明：**
42>
43> align和offset都设置时，效果重叠，浮层相对于组件方位定位后，再基于当前位置的左上角进行偏移。
44
45## OverlayOffset<sup>12+</sup>
46
47| 名称    | 类型                                                      | 只读 | 可选  | 说明                                                |
48| ------- | ---------------------------------------------------------| ---- | ------| --------------------------------------------------- |
49| x       | number                                                   | 否   | 是    | 横向偏移量                                           |
50| y       | number                                                   | 否   | 是    | 纵向偏移量                                           |
51
52## 示例
53
54### 示例1（通过string设置浮层）
55
56该示例通过传入string设置浮层。
57
58```ts
59// xxx.ets
60@Entry
61@Component
62struct OverlayExample {
63  build() {
64    Column() {
65      Column() {
66        Text('floating layer')
67          .fontSize(12).fontColor(0xCCCCCC).maxLines(1)
68        Column() {
69          Image($r('app.media.img'))
70            .width(240).height(240)
71            .overlay("Winter is a beautiful season, especially when it snows.", {
72              align: Alignment.Bottom,
73              offset: { x: 0, y: -15 }
74            })
75        }.border({ color: Color.Black, width: 2 })
76      }.width('100%')
77    }.padding({ top: 20 })
78  }
79}
80```
81
82![zh-cn_image_0000001205769446](figures/zh-cn_image_0000001205769446.png)
83
84### 示例2（通过builder设置浮层）
85
86该示例通过传入builder设置浮层。
87
88```ts
89// xxx.ets
90@Entry
91@Component
92struct OverlayExample {
93  @Builder OverlayNode() {
94    Column() {
95      Image($r('app.media.img1'))
96      Text("This is overlayNode").fontSize(20).fontColor(Color.White)
97    }.width(180).height(180).alignItems(HorizontalAlign.Center)
98  }
99
100  build() {
101    Column() {
102      Image($r('app.media.img2'))
103        .overlay(this.OverlayNode(), { align: Alignment.Center })
104        .objectFit(ImageFit.Contain)
105    }.width('100%')
106    .border({ color: Color.Black, width: 2 }).padding(20)
107  }
108}
109```
110![zh-cn_image_0000001210111632](figures/zh-cn_image_0000001210111632.png)
111
112### 示例3（通过ComponentContent设置浮层）
113
114该示例通过overlay传入了ComponentContent使backgroundColor不断发生变化。
115
116```ts
117// xxx.ets
118import { ComponentContent } from '@kit.ArkUI';
119
120class Params{
121  backgroundColor: string | Resource = ""
122  constructor(backgroundColor: string | Resource) {
123    this.backgroundColor = backgroundColor;
124  }
125}
126
127@Builder
128function overlayBuilder(params: Params){
129  Row(){
130  }.width('100%').height('100%').backgroundColor(params.backgroundColor)
131}
132
133@Entry
134@Component
135struct Page_4040 {
136  @State overlayColor: string = 'rgba(0, 0, 0, 0.6)';
137  private uiContext: UIContext = this.getUIContext();
138  private overlayNode: ComponentContent<Params> = new ComponentContent(this.uiContext, wrapBuilder(overlayBuilder), new Params(this.overlayColor))
139
140  aboutToAppear(): void {
141    setInterval(() => {
142      if (this.overlayColor.includes('0.6')) {
143        this.overlayColor = 'rgba(0, 0, 0, 0.1)'
144        this.overlayNode.update(new Params(this.overlayColor));
145      } else {
146        this.overlayColor = 'rgba(0, 0, 0, 0.6)'
147        this.overlayNode.update(new Params(this.overlayColor));
148      }
149    }, 1000)
150  }
151
152  build() {
153    Row() {
154      Column(){
155        Text(this.overlayColor)
156          .fontSize(40)
157          .fontWeight(FontWeight.Bold)
158      }
159      .width('100%')
160    }
161    .height('100%')
162    .overlay(this.overlayNode)
163  }
164}
165```
166![zh-cn_image_0000001210111632](figures/component_content_overlay.gif)
167