HarmonyOS 鸿蒙Next页面上创建两个button，只有一个可以收到click事件

发布于 1周前 作者 wuwangju 来自 鸿蒙OS

HarmonyOS 鸿蒙Next页面上创建两个button，只有一个可以收到click事件

代码如下：

首先创建页面： 
@Entry
@Component
struct SplashScreenPage {
@State pageShowTime: number = CommonConstants.TIME_DEFAULT_VALUE;
@State intervalID: number = CommonConstants.INTERVAL_ID_DEFAULT;


build() {
Column() {
Stack({ alignContent: Alignment.TopStart }) {
Image($r(‘app.media.ic_splash_page_background’))
.width(CommonConstants.IMAGE_WIDTH)
.height(CommonConstants.IMAGE_HEIGHT)


HideButton();
SkipButton({ secondsCount: (CommonConstants.DELAY_SECONDS - this.pageShowTime) });
}
.layoutWeight(CommonConstants.STACK_LAYOUT_WEIGHT)
.width(CommonConstants.STACK_WIDTH);
}
.alignItems(HorizontalAlign.Start)
.width(CommonConstants.COLUMN_WIDTH)
.height(CommonConstants.COLUMN_HEIGHT)
}
}


其次分别创建两个button


@Component
struct SkipButton {
@Prop secondsCount: number = 0;


build() {
Flex({
direction: FlexDirection.Row,
justifyContent: FlexAlign.End
}) {
Text($r(‘app.string.skip’, this.secondsCount))
.onClick(() => {
console.log(“EntryAbility Skip Button is clicked”);
})
}
}
}


@Component
struct HideButton {
build() {
Flex({
direction: FlexDirection.Row,
justifyContent: FlexAlign.Start
}) {
Text($r(‘app.string.hide’))
.onClick(() => {
console.log(“EntryAbility Hide Button is clicked”);
})
}
}
}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

发现只有SkipButton能够收到click事件，HIdeButton收不到


更多关于HarmonyOS 鸿蒙Next页面上创建两个button，只有一个可以收到click事件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

可以加入属性 .hitTestBehavior(HitTestMode.Transparent)，参考文档：‘https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-universal-attributes-hit-test-behavior-V13’


参考代码：

[@Component](/user/Component)
struct SkipButton {
  [@Prop](/user/Prop) secondsCount: number = 0;

build() {
Flex({
direction: FlexDirection.Row,
justifyContent: FlexAlign.End
}) {
Text($r(‘app.string.app_name’, this.secondsCount))
.onClick(() => {
console.log(“EntryAbility Skip Button is clicked”);
})
}
.hitTestBehavior(HitTestMode.Transparent)
}
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

更多关于HarmonyOS 鸿蒙Next页面上创建两个button，只有一个可以收到click事件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙系统中，如果你在页面上创建了两个Button，但只有一个可以收到click事件，这通常是由以下几个原因导致的：

  1. 事件监听未正确设置：确保每个Button都正确设置了点击事件监听器。检查代码中是否有遗漏或错误的监听器绑定。

  2. Button重叠：如果两个Button在布局中重叠，可能只有最上层的Button能接收到点击事件。检查布局文件，确保Button不重叠且各自占据独立的空间。

  3. 焦点问题：某些情况下，如果Button未正确获取焦点，也可能导致无法接收点击事件。确保Button是可聚焦的，并且在需要时能够请求焦点。

  4. 布局属性：检查Button的布局属性，如clickable、enabled等，确保它们都被设置为允许接收点击事件的状态。

  5. 资源文件冲突：确保没有资源文件（如ID）的冲突，这可能导致事件被错误地分发到错误的组件上。

如果以上检查均无误，但问题依旧存在，那么可能是更底层的系统或框架问题。此时，建议直接联系官方客服进行进一步的排查和解决。如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部