HarmonyOS鸿蒙Next中Badge组件如何实现击红点处和按钮事件都生效

HarmonyOS鸿蒙Next中Badge组件如何实现击红点处和按钮事件都生效

import { promptAction } from "@kit.ArkUI"
@Entry
@Component
export struct BadgeClickTest {
  @State badgeCount: number = 80;

  build() {
    Stack() {
      Badge({
        count: this.badgeCount,
        maxCount: 99,
        position: { x: 80, y: 2 },
        style: { fontSize: '30vp', badgeColor: $r('sys.color.ohos_id_color_badge_red') }
      }) {
        Button('点击+1：')
          .width(150)
          .align(Alignment.Start)
          .onClick(() => {
            this.badgeCount += 1
          })
      }
    }.width('100%').height('100%')
  }
}

更多关于HarmonyOS鸿蒙Next中Badge组件如何实现击红点处和按钮事件都生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

将按钮点击事件迁移至Badge组件，示例代码如下：

@Entry
@Component
export struct BadgeClickTest {
  @State badgeCount: number = 80;
  build() {
    Stack() {
      Badge({
        count: this.badgeCount,
        maxCount: 99,
        position: { x: 80, y: 2 },
        style: { fontSize: '30vp', badgeColor: $r('sys.color.ohos_id_color_badge_red') }
      }) {
        Button('点击+1：')
          .width(150)
          .align(Alignment.Start)
      }
      .onClick((e) => {
        this.badgeCount += 1
      })
    }.width('100%').height('100%')
  }
}

更多关于HarmonyOS鸿蒙Next中Badge组件如何实现击红点处和按钮事件都生效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


将按钮点击事件迁移至Badge组件，示例代码如下：

@Entry
@Component
export struct BadgeClickTest {
  @State badgeCount: number = 80;
  build() {
    Stack() {
      Badge({
        count: this.badgeCount,
        maxCount: 99,
        position: { x: 80, y: 2 },
        style: { fontSize: '30vp', badgeColor: $r('sys.color.ohos_id_color_badge_red') }
      }) {
        Button('点击+1：')
          .width(150)
          .align(Alignment.Start)
      }
      .onClick((e) => {
        this.badgeCount += 1
      })
    }.width('100%').height('100%')
  }
}

在HarmonyOS Next中，Badge组件的事件处理需结合布局与事件冒泡机制。 使用Badge包裹目标组件，并设置onClick事件。 为同时响应红点与按钮点击，需在Badge外层容器（如Column或Row）添加点击事件，或使用HitTestBehavior控制事件传递。 示例：

Badge({
  count: 1,
  position: BadgePosition.RightTop,
}) {
  Button('按钮')
    .onClick(() => {
      // 按钮事件
    })
}
.onClick(() => {
  // Badge红点事件
})

通过事件冒泡，点击红点或按钮均可触发对应逻辑。

在HarmonyOS Next中，Badge组件默认会拦截其覆盖区域内的点击事件。要实现点击红点（Badge）和底层按钮（Button）事件都生效，需要为Badge组件也添加onClick事件处理，并手动触发底层按钮的逻辑。

以下是修改后的关键代码示例：

import { promptAction } from "@kit.ArkUI"
@Entry
@Component
export struct BadgeClickTest {
  @State badgeCount: number = 80;

  build() {
    Stack() {
      Badge({
        count: this.badgeCount,
        maxCount: 99,
        position: { x: 80, y: 2 },
        style: { fontSize: '30vp', badgeColor: $r('sys.color.ohos_id_color_badge_red') }
      })
      // 为Badge添加onClick事件
      .onClick(() => {
        // 点击Badge时也执行增加计数的逻辑
        this.badgeCount += 1;
      }) {
        Button('点击+1：')
          .width(150)
          .align(Alignment.Start)
          .onClick(() => {
            this.badgeCount += 1
          })
      }
    }.width('100%').height('100%')
  }
}

核心原理：

  1. Badge组件通过.onClick()方法单独注册点击事件。
  2. 当用户点击Badge区域时，会触发Badge的onClick事件。
  3. 点击Button的非Badge覆盖区域，则触发Button的onClick事件。
  4. 两个事件处理器都执行this.badgeCount += 1，实现了点击红点和按钮都能增加计数的效果。

这样处理既保持了Badge的视觉提示功能，又确保了用户交互的完整性。

回到顶部