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