Point Light Style (System API)

You can apply a point light style to components.

NOTE

The initial APIs of this module are supported since API version 11. Updates will be marked with a superscript to indicate their earliest API version.

The point light style is only available for the following components: Image, Column, Flex, Row, Stack

PointLightStyle

You apply a point light style by setting the light source that emits illumination and the components to be illuminated.

System API: This is a system API.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Type	Mandatory	Description
lightSource	LightSource	No	Light source. The light source affects the surrounding components that are marked as illuminable and creates light effects on those components. Default value: none
illuminated	IlluminatedType	No	Whether the current component can be illuminated by the light source and the illuminated type. Default value: IlluminatedType.NONE
bloom	number	No	Luminous intensity of the component. The recommended value range is 0-1. Default value: 0

LightSource

Each component allows for one light source.

System API: This is a system API.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Type	Mandatory	Description
positionX	Dimension	Yes	X-coordinate of the light source relative to the current component.
positionY	Dimension	Yes	Y-coordinate of the light source relative to the current component.
positionZ	Dimension	Yes	Height of the light source. The higher the light source, the broader the light distribution.
intensity	number	Yes	Intensity of the light source. The recommended value range is 0-1. When the intensity is 0, the light source does not emit light.
color¹²⁺	ResourceColor	No	Light source color. Default value: Color.White

Example

// 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%' })
  }
}