harmony 鸿蒙点光源设置 (系统接口)

2025-06-12
浏览 (5)

点光源设置 (系统接口)

设置点光源样式。

说明：

从API Version 11开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

只有Image、Column、Flex、Row、Stack支持设置点光源。

PointLightStyle

通过设置光源和被照亮的类型实现点光源照亮周围组件的UI效果。

系统接口： 此接口为系统接口。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称	参数类型	必填	描述
lightSource	LightSource	否	设置光源属性，光源会影响到周围标记为可以被照亮的组件，并在组件上产生光效。默认值：无光源
illuminated	IlluminatedType	否	设置当前组件是否可以被光源照亮，以及被照亮的类型。默认值：IlluminatedType.NONE
bloom	number	否	设置组件的发光强度，建议取值范围为0-1。默认值：0

LightSource对象说明

一个组件支持添加1个光源。

系统接口： 此接口为系统接口。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称	参数类型	必填	描述
positionX	Dimension	是	光源相对于当前组件的X坐标。
positionY	Dimension	是	光源相对于当前组件的Y坐标。
positionZ	Dimension	是	光源高度。光源越高，照射范围越大。
intensity	number	是	光源强度，建议取值范围0-1。当光源强度为0时，光源不发光。
color¹²⁺	ResourceColor	否	光源颜色。默认值：Color.White

示例

// xxx.ets
@Entry
@Component
struct Index {
  @State lightIntensity: number = 0;
  @State bloomValue: number = 0;

  build() {
    Row({ space: 20 }) {
      Flex()
        .pointLight({ illuminated: IlluminatedType.BORDER })
        .backgroundColor(0x307af7)
        .size({ width: 50, height: 50 })
        .borderRadius(25)

      Flex()
        .pointLight({
          lightSource: { intensity: this.lightIntensity, positionX: "50%", positionY: "50%", positionZ: 80 },
          bloom: this.bloomValue
        })
        .animation({ duration: 333 })
        .backgroundColor(0x307af7)
        .size({ width: 50, height: 50 })
        .borderRadius(25)
        .onTouch((event: TouchEvent) => {
          if (event.type === TouchType.Down) {
            this.lightIntensity = 2;
            this.bloomValue = 1;
          } else if (event.type === TouchType.Up||event.type === TouchType.Cancel) {
            this.lightIntensity = 0;
            this.bloomValue = 0;
          }
        })

      Flex()
        .pointLight({ illuminated: IlluminatedType.BORDER_CONTENT })
        .backgroundColor(0x307af7)
        .size({ width: 50, height: 50 })
        .borderRadius(25)
    }
    .justifyContent(FlexAlign.Center)
    .backgroundColor(Color.Black)
    .size({ width: '100%', height: '100%' })
  }
}