鸿蒙next版开发：ArkTS组件通用属性（浮层）

在HarmonyOS 5.0中，ArkTS的浮层属性是一个非常有用的功能，它允许开发者在组件上增加遮罩文本或者叠加自定义组件，从而实现丰富的界面效果。本文将详细解读ArkTS中组件的浮层属性，并提供示例代码进行说明。

浮层属性概述

浮层属性overlay允许你在当前组件上增加遮罩文本或者叠加自定义组件。这个属性从API Version 7开始支持，并且在后续版本中增加了新的内容。

overlay属性

overlay属性接受两个参数：

value: 可以是字符串形式的遮罩文本内容，或者是自定义组件的构造函数。

options: 一个可选的对象，包含align和offset属性，用于控制浮层的定位。

align: 设置浮层相对于组件的方位。

offset: 设置浮层基于自身左上角的偏移量。当align和offset都设置时，浮层会先根据align定位，然后根据offset偏移。

示例代码

以下是一个使用ArkTS浮层属性的示例：

@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属性的value参数来指定文本内容，同时使用options参数来指定对齐方式和偏移量。

浮层的动态更新

浮层不仅可以静态地定义，还可以动态更新。例如，你可以根据组件的状态或用户交互来改变浮层的内容或样式。以下是一个动态更新浮层的示例：

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)
  }
}

在这个示例中，我们创建了一个可以动态改变背景颜色的浮层。通过setInterval函数，每隔一秒更新浮层的背景颜色，从而实现一个简单的动态效果。

结语

通过本文的介绍，你应该对HarmonyOS 5.0中ArkTS组件的浮层属性有了基本的了解。浮层属性是UI开发中的重要工具，它不仅可以用于实现遮罩文本和自定义组件的叠加，还可以用于创建动态的界面效果。希望本文能够帮助你在开发过程中更好地利用ArkTS的浮层属性。

————————————————

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/lbcyllqj/article/details/143645116