1、OverLay功能简介

Overlay可以实现浮层的效果。其主要作用是在当前组件上，增加遮罩文本或者叠加自定义组件以及ComponentContent作为该组件的浮层。详见voerlay API.

2、实现图片上增加文本

通过Overlay属性，我们可以实现图片上增加文本描述，如下图：

代码如下：

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

上述代码只是通过overlay属性的在图片上叠加了文字，功能比较简单。overlay还可以让自定义组件叠加在图片上，如下示例：

3、自定义组件浮层

如下图，overlay属性可以实现更复杂的功能，如下图：通过overlay传入了ComponentContent，使得自定义Component叠加在其他组件上面，当然Stack也支持此功能。

// xxx.ets
@Entry
@Component
struct OverlayExample {
  @Builder OverlayNode() {
    Column() {
      Image($r('app.media.img1'))
      Text("This is overlayNode").fontSize(20).fontColor(Color.White)
    }.width(180).height(180).alignItems(HorizontalAlign.Center)
  }

  build() {
    Column() {
      Image($r('app.media.img2'))
        .overlay(this.OverlayNode(), { align: Alignment.Center })
        .objectFit(ImageFit.Contain)
    }.width('100%')
    .border({ color: Color.Black, width: 2 }).padding(20)
  }
}

4、使用overlay实现性能优化

overlay实现的功能，通过Stack组件也可以实现，但是这无疑增加了UI嵌套深度，性能不高。直接使用组件属性的方式可以减少Stack布局嵌套组件的使用，从而减少嵌套组件带来的节点数，提高性能。

如上图所示，使用overlay属性实现文本浮层比Stack组件嵌套方式少了一层Stack节点。

5、参考资料

Overlay
优先使用组件属性代替嵌套组件