按压阴影
====

#### 场景介绍

从6.0.0(20)版本开始，新增支持[按压阴影](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ui-design-hdseffect#pressshadow)。

通过按压阴影接口可以设置组件的背景色变化效果，一般常用于组件按压交互时的背景色变化场景。

#### 开发步骤

1.  导入模块。
    
    import { hdsEffect } from '@kit.UIDesignKit';
    
2.  创建按压阴影效果。
    
    @Entry
    @Component
    struct PressShadowExample {
      @State button\_blend\_state: hdsEffect.PressShadowType = hdsEffect.PressShadowType.NONE;
      @State button\_gradient\_state: hdsEffect.PressShadowType = hdsEffect.PressShadowType.NONE;
    
      build() {
        NavDestination() {
          Column({ space: 50 }) {
            Button("BLEND\_WHITE", { buttonStyle: ButtonStyleMode.EMPHASIZED, role: ButtonRole.ERROR, stateEffect: false })
              .visualEffect(new hdsEffect.HdsEffectBuilder()
                .pressShadow(this.button\_blend\_state)
                .buildEffect())
              .onTouch((event: TouchEvent) => {
                if (event.type === TouchType.Down) {
                  this.button\_blend\_state = hdsEffect.PressShadowType.BLEND\_WHITE;
                } else if (event.type === TouchType.Up || event.type === TouchType.Cancel) {
                  this.button\_blend\_state = hdsEffect.PressShadowType.NONE;
                }
              })
    
            Button("GRADIENT", { buttonStyle: ButtonStyleMode.NORMAL, stateEffect: false })
              .visualEffect(new hdsEffect.HdsEffectBuilder()
                .pressShadow(this.button\_gradient\_state)
                .buildEffect())
              .onTouch((event: TouchEvent) => {
                if (event.type === TouchType.Down) {
                  this.button\_gradient\_state = hdsEffect.PressShadowType.BLEND\_GRADIENT;
                } else if (event.type === TouchType.Up || event.type === TouchType.Cancel) {
                  this.button\_gradient\_state = hdsEffect.PressShadowType.NONE;
                }
              })
          }
          .height('70%')
          .justifyContent(FlexAlign.Center)
        }
        .width('100%')
        .height('100%')
        .title('Button example')
        .backgroundColor('#040404')
      }
    }
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/a9/v3/Qye2hiTNSnCvpBLOIv5wZA/zh-cn_image_0000002625187951.gif?HW-CC-KV=V1&HW-CC-Date=20260612T073350Z&HW-CC-Expire=86400&HW-CC-Sign=59A6CF4534BD50946CF8418FB54B531A349A32CE99423D5950918D0BB4BE6B37)