鸿蒙5.0版开发：ArkTS组件通用属性-浮层

往期鸿蒙全套实战文章必看：

• 鸿蒙开发核心知识点，看这篇文章就够了
  
• 最新版！鸿蒙HarmonyOS Next应用开发实战学习路线
  
• 鸿蒙HarmonyOS NEXT开发技术最全学习路线指南
  
• 鸿蒙应用开发实战项目，看这一篇文章就够了（部分项目附源码）
  

---

浮层

设置组件的浮层。
   阐明：
  从API Version 7开始支持。后续版本如有新增内容，则接纳上角标单独标记该内容的起始版本。
  overlay

overlay(value: string | CustomBuilder | ComponentContent, options?: OverlayOptions )
在当前组件上，增加遮罩文本或者叠加自定义组件以及ComponentContent作为该组件的浮层。
卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填阐明valuestring | CustomBuilder10+ | ComponentContent12+是遮罩文本内容或自定义组件构造函数。
阐明：
自定义组件作为浮层时，不支持键盘走焦到自定义组件中。optionsOverlayOptions否浮层的定位。
阐明：
需要解析为Json格式。
API version 12之前，options:
{
align?: Alignment, 
offset?: {x?: number, y?: number}
}   阐明：
  overlay节点不支持onAppear和onDisappear等和节点生命周期相干的变乱。
  OverlayOptions12+

体系能力： SystemCapability.ArkUI.ArkUI.Full
名称类型只读可选阐明align7+Alignment否是设置浮层相对于组件的方位。
默认值：TopStartoffset7+OverlayOffset否是设置浮层基于自身左上角的偏移量。浮层默认处于组件左上角。   阐明：
  align和offset都设置时，效果重叠，浮层相对于组件方位定位后，再基于当前位置的左上角进行偏移。
  OverlayOffset12+

名称类型只读可选阐明xnumber否是横向偏移量ynumber否是纵向偏移量 示例

示例1

1. // xxx.ets
2. @Entry
3. @Component
4. struct OverlayExample {
5.   build() {
6.     Column() {
7.       Column() {
8.         Text('floating layer')
9.           .fontSize(12).fontColor(0xCCCCCC).maxLines(1)
10.         Column() {
11.           Image($r('app.media.img'))
12.             .width(240).height(240)
13.             .overlay("Winter is a beautiful season, especially when it snows.", {
14.               align: Alignment.Bottom,
15.               offset: { x: 0, y: -15 }
16.             })
17.         }.border({ color: Color.Black, width: 2 })
18.       }.width('100%')
19.     }.padding({ top: 20 })
20.   }
21. }

复制代码

示例2

1. // xxx.ets
2. @Entry
3. @Component
4. struct OverlayExample {
5.   @Builder OverlayNode() {
6.     Column() {
7.       Image($r('app.media.img1'))
8.       Text("This is overlayNode").fontSize(20).fontColor(Color.White)
9.     }.width(180).height(180).alignItems(HorizontalAlign.Center)
10.   }
12.   build() {
13.     Column() {
14.       Image($r('app.media.img2'))
15.         .overlay(this.OverlayNode(), { align: Alignment.Center })
16.         .objectFit(ImageFit.Contain)
17.     }.width('100%')
18.     .border({ color: Color.Black, width: 2 }).padding(20)
19.   }
20. }

复制代码

示例3

通过overlay传入了ComponentContent使backgroundColor不绝发生变化

1. // xxx.ets
2. import { ComponentContent } from '@kit.ArkUI';
4. class Params{
5.   backgroundColor: string | Resource = ""
6.   constructor(backgroundColor: string | Resource) {
7.     this.backgroundColor = backgroundColor;
8.   }
9. }
11. @Builder
12. function overlayBuilder(params: Params){
13.   Row(){
14.   }.width('100%').height('100%').backgroundColor(params.backgroundColor)
15. }
17. @Entry
18. @Component
19. struct Page_4040 {
20.   @State overlayColor: string = 'rgba(0, 0, 0, 0.6)';
21.   private uiContext: UIContext = this.getUIContext();
22.   private overlayNode: ComponentContent<Params> = new ComponentContent(this.uiContext, wrapBuilder(overlayBuilder), new Params(this.overlayColor))
24.   aboutToAppear(): void {
25.     setInterval(() => {
26.       if (this.overlayColor.includes('0.6')) {
27.         this.overlayColor = 'rgba(0, 0, 0, 0.1)'
28.         this.overlayNode.update(new Params(this.overlayColor));
29.       } else {
30.         this.overlayColor = 'rgba(0, 0, 0, 0.6)'
31.         this.overlayNode.update(new Params(this.overlayColor));
32.       }
33.     }, 1000)
34.   }
36.   build() {
37.     Row() {
38.       Column(){
39.         Text(this.overlayColor)
40.           .fontSize(40)
41.           .fontWeight(FontWeight.Bold)
42.       }
43.       .width('100%')
44.     }
45.     .height('100%')
46.     .overlay(this.overlayNode)
47.   }
48. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。