鸿蒙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
// 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 })
}
}
https://i-blog.csdnimg.cn/direct/869d2cd3ff1d406ea0d46850323b5fef.png
示例2
// 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)
}
}
https://i-blog.csdnimg.cn/direct/4ee26bb24ef747639ce6b14cec8a7bbc.png
示例3
通过overlay传入了ComponentContent使backgroundColor不绝发生变化
// xxx.ets
import { ComponentContent } from '@kit.ArkUI';
class Params{
backgroundColor: string | Resource = ""
constructor(backgroundColor: string | Resource) {
this.backgroundColor = backgroundColor;
}
}
@Builder
function overlayBuilder(params: Params){
Row(){
}.width('100%').height('100%').backgroundColor(params.backgroundColor)
}
@Entry
@Component
struct Page_4040 {
@State overlayColor: string = 'rgba(0, 0, 0, 0.6)';
private uiContext: UIContext = this.getUIContext();
private overlayNode: ComponentContent<Params> = new ComponentContent(this.uiContext, wrapBuilder(overlayBuilder), new Params(this.overlayColor))
aboutToAppear(): void {
setInterval(() => {
if (this.overlayColor.includes('0.6')) {
this.overlayColor = 'rgba(0, 0, 0, 0.1)'
this.overlayNode.update(new Params(this.overlayColor));
} else {
this.overlayColor = 'rgba(0, 0, 0, 0.6)'
this.overlayNode.update(new Params(this.overlayColor));
}
}, 1000)
}
build() {
Row() {
Column(){
Text(this.overlayColor)
.fontSize(40)
.fontWeight(FontWeight.Bold)
}
.width('100%')
}
.height('100%')
.overlay(this.overlayNode)
}
}
https://i-blog.csdnimg.cn/direct/676f24c58e5544e6af0bc3a0bda9ed6b.png
https://i-blog.csdnimg.cn/direct/703087920c1e470298018f36136f0494.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]