HarmonyOS 鸿蒙Next中使用 hdsEffect.pressShadow() 给组件设置按压阴影

HarmonyOS 鸿蒙Next中使用 hdsEffect.pressShadow() 给组件设置按压阴影

一、最常用：使用 hdsEffect.pressShadow()（推荐）

适用于 任意自定义组件：Button、Column、Row、Text 等。

1. 先导入

import { hdsEffect } from '@kit.UIDesignKit';

2. 3 种阴影类型

hdsEffect.PressShadowType.NONE           // 无阴影
hdsEffect.PressShadowType.BLEND_GRADIENT // 渐变阴影
hdsEffect.PressShadowType.BLEND_WHITE    // 白色半透明遮罩（最常用）

3. 完整代码示例（直接复制可用）

@Entry
@Component
struct PressShadowDemo {
  build() {
    Column({ space: 20 }) {
      
      // 1. 白色遮罩按压效果（最常用）
      Text("按我 - BLEND_WHITE")
        .width(200)
        .height(60)
        .backgroundColor("#f0f0f0")
        .textAlign(TextAlign.Center)
        .borderRadius(12)
        // 👇 核心：按压阴影
        .effect(
          hdsEffect.pressShadow(hdsEffect.PressShadowType.BLEND_WHITE)
        )

      // 2. 渐变按压效果
      Text("按我 - BLEND_GRADIENT")
        .width(200)
        .height(60)
        .backgroundColor("#e0e0e0")
        .textAlign(TextAlign.Center)
        .borderRadius(12)
        .effect(
          hdsEffect.pressShadow(hdsEffect.PressShadowType.BLEND_GRADIENT)
        )
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

二、鸿蒙标准 Button 自带按压效果（最简单）

鸿蒙原生 Button 默认自带按压阴影，无需手动设置：

Button("原生自带按压阴影")
  .width(200)
  .height(60)

三、如果你想关闭按压阴影

.effect(
  hdsEffect.pressShadow(hdsEffect.PressShadowType.NONE)
)

核心总结

  1. 按压阴影 = 点击时的半透明遮罩
  2. 调用方式：.effect(hdsEffect.pressShadow(类型))
  3. 支持所有组件
  4. 3 种类型：NONE / BLEND_GRADIENT / BLEND_WHITE

补充Demo：圆角 + 按压阴影 + 点击反馈 + 禁用态

import { hdsEffect } from '@kit.UIDesignKit';

@Entry
@Component
struct BtnDemo {
  @State isDisabled: boolean = false;

  build() {
    Column({ space: 20 }) {
      // 1. 主按钮（带渐变按压阴影）
      Button('主按钮')
        .width(260)
        .height(52)
        .backgroundColor('#0066CC')
        .fontColor(Color.White)
        .fontSize(18)
        .borderRadius(12)
        .effect(hdsEffect.pressShadow(hdsEffect.PressShadowType.BLEND_GRADIENT))
        .onClick(() => {
          console.info('点击主按钮');
        })

      // 2. 次按钮（白色遮罩按压）
      Button('次按钮')
        .width(260)
        .height(52)
        .backgroundColor('#F5F5F5')
        .fontColor('#333333')
        .fontSize(18)
        .borderRadius(12)
        .effect(hdsEffect.pressShadow(hdsEffect.PressShadowType.BLEND_WHITE))
        .onClick(() => {
          console.info('点击次按钮');
        })

      // 3. 无边框按钮（仅按压反馈）
      Button('文字按钮')
        .width(260)
        .height(52)
        .backgroundColor(Color.Transparent)
        .fontColor('#0066CC')
        .fontSize(18)
        .borderRadius(12)
        .effect(hdsEffect.pressShadow(hdsEffect.PressShadowType.BLEND_WHITE))
        .onClick(() => {
          console.info('点击文字按钮');
        })

      // 4. 禁用按钮（无按压效果）
      Button('禁用按钮')
        .width(260)
        .height(52)
        .backgroundColor('#DCDCDC')
        .fontColor('#999999')
        .fontSize(18)
        .borderRadius(12)
        .effect(hdsEffect.pressShadow(hdsEffect.PressShadowType.NONE))
        .enabled(!this.isDisabled)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .backgroundColor('#F7F8FA')
  }
}

效果说明

  • BLEND_GRADIENT：中心亮、边缘暗的渐变按压，适合主按钮
  • BLEND_WHITE：一层柔和白色半透明遮罩，适合浅色按钮
  • NONE：关闭按压阴影，适合禁用态

更多关于HarmonyOS 鸿蒙Next中使用 hdsEffect.pressShadow() 给组件设置按压阴影的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

不错。

更多关于HarmonyOS 鸿蒙Next中使用 hdsEffect.pressShadow() 给组件设置按压阴影的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


hdsEffect.pressShadow() 是鸿蒙Next中用于为组件添加按压阴影效果的API，需在组件上调用。该效果通过阴影的视觉变化反馈用户触摸操作。在组件的onClick或触摸事件中调用此方法即可实现。注意需确保组件已配置合适的阴影属性。

在HarmonyOS Next中，hdsEffect.pressShadow() 是 @kit.UIDesignKit 提供的按压效果API，其技术实现本质是通过 .effect() 接口对组件附加按下态（Pressed State）的视觉遮罩层。

您提供的示例代码完整且正确。核心要点如下：

  1. API 位置：import { hdsEffect } from '@kit.UIDesignKit';
  2. 绑定方式：在任意可点击组件（Button、Column、Text、Row 等）上调用 .effect(hdsEffect.pressShadow(type))。
  3. 类型参数：
    • PressShadowType.BLEND_WHITE：叠加纯白色半透明遮罩（最常用，通用性强）。
    • PressShadowType.BLEND_GRADIENT：叠加中心亮、边缘暗的径向渐变遮罩（适合深色或主色按钮）。
    • PressShadowType.NONE：显式关闭按压阴影（常用于禁用态）。

技术说明：

  • 该效果仅作用于按压态（手指按下时），抬起后自动消失，无需编写 onTouch 或状态变量控制，系统自动处理。
  • 与鸿蒙原生 Button 组件的默认按压阴影不同，pressShadow() 是统一的效果API，适用于自定义绘制或非标准按钮组件，效果不随组件背景色改变而改变（它是一个固定的遮罩层）。
  • 在“禁用态”（.enabled(false)）下，按压阴影通常不响应，使用 NONE 可确保禁用态无任何额外遮罩。
回到顶部