1# 设置浮层（OverlayManager）
2
3**浮层（OverlayManager）** 用于将自定义的UI内容展示在页面（Page）之上，在Dialog、Popup、Menu、BindSheet、BindContentCover和Toast等组件之下，展示的范围为当前窗口安全区内。可适用于常驻悬浮等场景。
4
5![image](figures/overlayManager.png)
6
7可以通过使用[UIContext](../reference/apis-arkui/js-apis-arkui-UIContext.md#uicontext)中的[getOverlayManager](../reference/apis-arkui/js-apis-arkui-UIContext.md#getoverlaymanager12)方法获取当前UI上下文关联的[OverlayManager](../reference/apis-arkui/js-apis-arkui-UIContext.md#overlaymanager12)对象，再通过该对象调用对应方法。
8
9## 规格约束
10
11* OverlayManager上节点的层级在Page页面层级之上，在Dialog、Popup、Menu、BindSheet、BindContentCover和Toast等组件之下。
12* OverlayManager添加的节点显示和消失时没有默认动画。
13* OverlayManager上节点安全区域内外的绘制方式与Page一致，键盘避让方式与Page一致。
14* 与OverlayManager相关的属性推荐采用AppStorage来进行应用全局存储，以免切换页面后属性值发生变化从而导致业务错误。
15
16## 设置浮层
17
18在OverlayManager上[新增指定节点（addComponentContent）](../reference/apis-arkui/js-apis-arkui-UIContext.md#addcomponentcontent12)、[删除指定节点（removeComponentContent）](../reference/apis-arkui/js-apis-arkui-UIContext.md#removecomponentcontent12)、[显示所有节点（showAllComponentContents）](../reference/apis-arkui/js-apis-arkui-UIContext.md#showallcomponentcontents12)和[隐藏所有节点（hideAllComponentContents）](../reference/apis-arkui/js-apis-arkui-UIContext.md#hideallcomponentcontents12)。
19
20```ts
21import { ComponentContent, OverlayManager, router } from '@kit.ArkUI';
22
23class Params {
24  text: string = ""
25  offset: Position
26  constructor(text: string, offset: Position) {
27    this.text = text
28    this.offset = offset
29  }
30}
31@Builder
32function builderText(params: Params) {
33  Column() {
34    Text(params.text)
35      .fontSize(30)
36      .fontWeight(FontWeight.Bold)
37  }.offset(params.offset)
38}
39
40@Entry
41@Component
42struct OverlayExample {
43  @State message: string = 'ComponentContent';
44  private uiContext: UIContext = this.getUIContext()
45  private overlayNode: OverlayManager = this.uiContext.getOverlayManager()
46  @StorageLink('contentArray') contentArray: ComponentContent<Params>[] = []
47  @StorageLink('componentContentIndex') componentContentIndex: number = 0
48  @StorageLink('arrayIndex') arrayIndex: number = 0
49  @StorageLink("componentOffset") componentOffset: Position = {x: 0, y: 80}
50
51  build() {
52    Column() {
53      Button("++componentContentIndex: " + this.componentContentIndex).onClick(()=>{
54        ++this.componentContentIndex
55      })
56      Button("--componentContentIndex: " + this.componentContentIndex).onClick(()=>{
57        --this.componentContentIndex
58      })
59      Button("增加ComponentContent" + this.contentArray.length).onClick(()=>{
60        let componentContent = new ComponentContent(
61          this.uiContext, wrapBuilder<[Params]>(builderText),
62          new Params(this.message + (this.contentArray.length), this.componentOffset)
63        )
64        this.contentArray.push(componentContent)
65        this.overlayNode.addComponentContent(componentContent, this.componentContentIndex)
66      })
67      Button("++arrayIndex: " + this.arrayIndex).onClick(()=>{
68        ++this.arrayIndex
69      })
70      Button("--arrayIndex: " + this.arrayIndex).onClick(()=>{
71        --this.arrayIndex
72      })
73      Button("删除ComponentContent" + this.arrayIndex).onClick(()=>{
74        if (this.arrayIndex >= 0 && this.arrayIndex < this.contentArray.length) {
75          let componentContent = this.contentArray.splice(this.arrayIndex, 1)
76          this.overlayNode.removeComponentContent(componentContent.pop())
77        } else {
78          console.info("arrayIndex有误")
79        }
80      })
81      Button("显示ComponentContent" + this.arrayIndex).onClick(()=>{
82        if (this.arrayIndex >= 0 && this.arrayIndex < this.contentArray.length) {
83          let componentContent = this.contentArray[this.arrayIndex]
84          this.overlayNode.showComponentContent(componentContent)
85        } else {
86          console.info("arrayIndex有误")
87        }
88      })
89      Button("隐藏ComponentContent" + this.arrayIndex).onClick(()=>{
90        if (this.arrayIndex >= 0 && this.arrayIndex < this.contentArray.length) {
91          let componentContent = this.contentArray[this.arrayIndex]
92          this.overlayNode.hideComponentContent(componentContent)
93        } else {
94          console.info("arrayIndex有误")
95        }
96      })
97      Button("显示所有ComponentContent").onClick(()=>{
98          this.overlayNode.showAllComponentContents()
99      })
100      Button("隐藏所有ComponentContent").onClick(()=>{
101        this.overlayNode.hideAllComponentContents()
102      })
103
104      Button("跳转页面").onClick(()=>{
105        router.pushUrl({
106          url: 'pages/Second'
107        })
108      })
109    }
110    .width('100%')
111    .height('100%')
112  }
113}
114```
115显示一个始终在屏幕左侧的悬浮球，点击可以弹出alertDialog弹窗。
116
117```ts
118import { ComponentContent, OverlayManager } from '@kit.ArkUI';
119
120class Params {
121  context: UIContext
122  offset: Position
123  constructor(context: UIContext, offset: Position) {
124    this.context = context
125    this.offset = offset
126  }
127}
128@Builder
129function builderOverlay(params: Params) {
130  Column() {
131    Stack(){
132    }.width(50).height(50).backgroundColor(Color.Yellow).position(params.offset).borderRadius(50)
133    .onClick(() => {
134      params.context.showAlertDialog(
135        {
136          title: 'title',
137          message: 'text',
138          autoCancel: true,
139          alignment: DialogAlignment.Center,
140          gridCount: 3,
141          confirm: {
142            value: 'button',
143            action: () => {}
144          },
145          cancel: () => {}
146        }
147      )
148    })
149  }.focusable(false).width('100%').height('100%').hitTestBehavior(HitTestMode.Transparent)
150}
151
152@Entry
153@Component
154struct OverlayExample {
155  @State message: string = 'ComponentContent';
156  private uiContext: UIContext = this.getUIContext()
157  private overlayNode: OverlayManager = this.uiContext.getOverlayManager()
158  private overlayContent:ComponentContent<Params>[] = []
159  controller: TextInputController = new TextInputController()
160
161  aboutToAppear(): void {
162    let uiContext = this.getUIContext();
163    let componentContent = new ComponentContent(
164      this.uiContext, wrapBuilder<[Params]>(builderOverlay),
165      new Params(uiContext, {x:0, y: 100})
166    )
167    this.overlayNode.addComponentContent(componentContent, 0)
168    this.overlayContent.push(componentContent)
169  }
170
171  aboutToDisappear(): void {
172    let componentContent = this.overlayContent.pop()
173    this.overlayNode.removeComponentContent(componentContent)
174  }
175
176  build() {
177    Column() {
178
179    }
180    .width('100%')
181    .height('100%')
182  }
183}
184
185```
186
187
188