提交 dda4a915 编写于 作者: 陈长健 提交者: chenchangjian

overlay支持builder

Signed-off-by: N陈长健 <chenchangjian@huawei.com>
上级 dc6088c4
......@@ -10,7 +10,7 @@
| 名称 | 参数类型 | 默认值 | 描述 |
| -------- | -------- | -------- | -------- |
| overlay | value:&nbsp;string,<br/>options?:&nbsp;{<br/>align?:&nbsp;[Alignment](ts-appendix-enums.md#alignment),&nbsp;<br/>offset?:&nbsp;{x?:&nbsp;number, y?:&nbsp;number}<br/>} | {<br/>align:&nbsp;Alignment.Center,<br/>offset:&nbsp;{0,&nbsp;0}<br/>} | 在当前组件上,增加遮罩文本。<br/> value: 遮罩文本内容<br/>options: 文本定位,align设置文本相对于组件的方位,[offset](ts-universal-attributes-location.md)为文本基于自身左上角的偏移量。文本默认处于组件左上角。<br>两者都设置时效果重叠,文本相对于组件方位定位后再基于当前位置文本的左上角进行偏移。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| overlay | value:&nbsp;string&nbsp;&#124;&nbsp;[CustomBuilder](../arkui-ts/ts-types.md#custombuilder8)<sup>10+</sup>,<br/>options?:&nbsp;{<br/>align?:&nbsp;[Alignment](ts-appendix-enums.md#alignment),&nbsp;<br/>offset?:&nbsp;{x?:&nbsp;number, y?:&nbsp;number}<br/>} | {<br/>align:&nbsp;Alignment.Center,<br/>offset:&nbsp;{0,&nbsp;0}<br/>} | 在当前组件上,增加遮罩文本。<br/> value: 遮罩文本内容或自定义组件构造函数<br/>options: 文本定位,align设置文本相对于组件的方位,[offset](ts-universal-attributes-location.md)为文本基于自身左上角的偏移量。文本默认处于组件左上角。<br>两者都设置时效果重叠,文本相对于组件方位定位后再基于当前位置文本的左上角进行偏移。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
## 示例
......@@ -39,3 +39,27 @@ struct OverlayExample {
```
![zh-cn_image_0000001205769446](figures/zh-cn_image_0000001205769446.png)
```ts
// 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)
}
}
```
![zh-cn_image_0000001210111632](figures/zh-cn_image_0000001210111632.png)
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册