1# 浮层 2 3设置组件的遮罩文本。 4 5> **说明：** 6> 7> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9## overlay 10 11overlay(value: string | CustomBuilder, options?: { align?: Alignment; offset?: { x?: number; y?: number } }) 12 13在当前组件上，增加遮罩文本或者叠加自定义组件作为该组件的浮层。 14 15**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 16 17**系统能力：** SystemCapability.ArkUI.ArkUI.Full 18 19**参数：** 20 21| 参数名 | 类型 | 必填 | 说明 | 22| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 23| value | string \| [CustomBuilder](ts-types.md#custombuilder8)<sup>10+</sup> | 是 | 遮罩文本内容或自定义组件构造函数。<br/>**说明：**<br/>自定义组件作为浮层时，不支持键盘走焦到自定义组件中。 | 24| options | {<br/>align?: [Alignment](ts-appendix-enums.md#alignment), <br/>offset?: {x?: number, y?: number}<br/>} | 否 | 浮层的定位。<br/>- align：设置浮层相对于组件的方位。<br/>- offset：设置浮层基于自身左上角的偏移量。浮层默认处于组件左上角。<br/>**说明：**<br/>两者都设置时效果重叠，浮层相对于组件方位定位后再基于当前位置的左上角进行偏移。 | 25 26## 示例 27 28### 示例1 29 30```ts 31// xxx.ets 32@Entry 33@Component 34struct OverlayExample { 35 build() { 36 Column() { 37 Column() { 38 Text('floating layer') 39 .fontSize(12).fontColor(0xCCCCCC).maxLines(1) 40 Column() { 41 Image($r('app.media.img')) 42 .width(240).height(240) 43 .overlay("Winter is a beautiful season, especially when it snows.", { 44 align: Alignment.Bottom, 45 offset: { x: 0, y: -15 } 46 }) 47 }.border({ color: Color.Black, width: 2 }) 48 }.width('100%') 49 }.padding({ top: 20 }) 50 } 51} 52``` 53 54 55 56### 示例2 57 58```ts 59// xxx.ets 60@Entry 61@Component 62struct OverlayExample { 63 @Builder OverlayNode() { 64 Column() { 65 Image($r('app.media.img1')) 66 Text("This is overlayNode").fontSize(20).fontColor(Color.White) 67 }.width(180).height(180).alignItems(HorizontalAlign.Center) 68 } 69 70 build() { 71 Column() { 72 Image($r('app.media.img2')) 73 .overlay(this.OverlayNode(), { align: Alignment.Center }) 74 .objectFit(ImageFit.Contain) 75 }.width('100%') 76 .border({ color: Color.Black, width: 2 }).padding(20) 77 } 78} 79``` 80 81
