点光源效果
=====

#### 场景介绍

从6.0.0(20)版本开始，新增支持[点光源效果](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ui-design-hdseffect#pointlight)。

通过点光源接口可以设置组件的发光效果以及被照亮的受光效果，使得组件交互体验更显沉浸。

#### 约束与限制

单个组件最多同时受12个光源照亮。

#### 开发步骤

1.  导入模块。
    
    import { hdsEffect } from '@kit.UIDesignKit';
    
2.  创建点光源发光效果。如果需要发光，配置sourceType属性；如果需要被照亮，配置illuminatedType属性。
    
    以下代码表示：当中间的Button点击时，产生点光源效果，重复点击触发不同点光源效果。
    
    @Entry
    @Component
    struct Index {
      @State bloomValue: number = 0;
      @State index: number = 0;
      @State illuminatedType: hdsEffect.PointLightIlluminatedType = hdsEffect.PointLightIlluminatedType.NONE;
      @State button\_gradient\_state: hdsEffect.PressShadowType = hdsEffect.PressShadowType.NONE;
      @State lightIntensity: number = 10;
      @State types: hdsEffect.PointLightIlluminatedType\[\] =
        \[hdsEffect.PointLightIlluminatedType.NONE, hdsEffect.PointLightIlluminatedType.BORDER,
          hdsEffect.PointLightIlluminatedType.CONTENT, hdsEffect.PointLightIlluminatedType.BORDER\_CONTENT,
          hdsEffect.PointLightIlluminatedType.DEFAULT\_FEATHERING\_BORDER\];
    
      build() {
        Flex({
          direction: FlexDirection.Column,
          justifyContent: FlexAlign.Center,
          alignItems: ItemAlign.Center,
        }) {
          // 纵向循环
          ForEach(Array<number>(4).fill(0), (row: number) => {
            Flex({
              direction: FlexDirection.Row,
              justifyContent: FlexAlign.Center,
              alignItems: ItemAlign.Center,
            }) {
              // 横向循环
              ForEach(Array<number>(4).fill(0), (col: number) => {
                Flex()
                  .visualEffect(new hdsEffect.HdsEffectBuilder().pointLight({
                    illuminatedType: this.illuminatedType,
                  }).buildEffect())
                  .backgroundColor(0x808080)
                  .size({ width: 60, height: 60 })
                  .borderRadius(50)
                  .margin({ top: 20, right: 10, left: 10 }) // 添加间距
              })
            }
            .width('100%') // 设置 Row 组件的宽度为 100%
          })
    
          Flex({
            direction: FlexDirection.Row,
            justifyContent: FlexAlign.Center, // 使用 SpaceBetween 来均匀分布间距
            alignItems: ItemAlign.Center,
          }) {
            Flex()
              .visualEffect(new hdsEffect.HdsEffectBuilder().pointLight({
                illuminatedType: this.illuminatedType,
              }).buildEffect())
              .backgroundColor(0x808080)
              .size({ width: 60, height: 60 })
              .borderRadius(50)
              .margin({ top: 20, right: 10, left: 10 })
    
            Button('点击发光')
              .size({ width: 140, height: 60 })
              .backgroundColor(0x808080)
              .fontColor(0xADD8E6)
              .visualEffect(new hdsEffect.HdsEffectBuilder()
                .pressShadow(this.button\_gradient\_state)
                .pointLight({
                  options: {
                    color: Color.White,
                    intensity: this.lightIntensity,
                    height: 150
                  }
                })
                .pressShadow(this.button\_gradient\_state)
                .buildEffect())
              .onClick(() => {
                if (this.index <= 3) {
                  this.index++;
                  this.illuminatedType = this.types\[this.index\];
                  this.button\_gradient\_state = hdsEffect.PressShadowType.BLEND\_GRADIENT;
                }
                let message = 'NONE';
                if (this.illuminatedType == 1) {
                  message = 'BORDER';
                } else if (this.illuminatedType == 2) {
                  message = 'CONTENT';
                } else if (this.illuminatedType == 3) {
                  message = 'BORDER\_CONTENT';
                } else {
                  message = 'DEFAULT\_FEATHERING\_BORDER';
                }
                this.getUIContext().getPromptAction().showToast({
                  message: message,
                  duration: 2000,
                  bottom: '80%'
                });
              })
              .margin({ top: 20, right: 10, left: 10 })
    
            Flex()
              .visualEffect(new hdsEffect.HdsEffectBuilder().pointLight({
                illuminatedType: this.illuminatedType,
              }).buildEffect())
              .backgroundColor(0x808080)
              .size({ width: 60, height: 60 })
              .borderRadius(50)
              .margin({ top: 20, right: 10, left: 10 })
          }
          .width('100%') // 设置 Row 组件的宽度为 100%
    
          ForEach(Array<number>(4).fill(0), (row: number) => {
            Flex({
              direction: FlexDirection.Row,
              justifyContent: FlexAlign.Center,
              alignItems: ItemAlign.Center,
            }) {
              // 横向循环
              ForEach(Array<number>(4).fill(0), (col: number) => {
                Flex()
                  .visualEffect(new hdsEffect.HdsEffectBuilder().pointLight({
                    illuminatedType: this.illuminatedType,
                  }).buildEffect())
                  .backgroundColor(0x808080)
                  .size({ width: 60, height: 60 })
                  .borderRadius(50)
                  .margin({ top: 20, right: 10, left: 10 })
              })
            }
            .width('100%') // 设置 Row 组件的宽度为 100%
          })
        }
        .backgroundColor(Color.Black)
      }
    }
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/a2/v3/H4ZSgQHDTL609hIh86rkWw/zh-cn_image_0000002594828504.png?HW-CC-KV=V1&HW-CC-Date=20260612T073350Z&HW-CC-Expire=86400&HW-CC-Sign=56701EF0E9B38A9C8304E4313CED2E5B0ADE5D3048189BC6B01206F840350A1A)