HarmonyOS 鸿蒙Next如何实现点击穿透效果

发布于 1周前 作者 sinazl 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next如何实现点击穿透效果

stack布局中，有webView加载的input框和一个用于模拟placeholder的Text()组件

demo代码

Stack({ alignContent: Alignment.TopStart }) {
  
  Web({ src: 'ndex.html', controller: this.webController })

    .backgroundColor(Color.Transparent)

    .width("100%")

    .fileAccess(true)

    .domStorageAccess(true)

    .onlineImageAccess(true)

    .imageAccess(true)

    .zoomAccess(false)

    .expandSafeArea([SafeAreaType.KEYBOARD], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])

    .javaScriptAccess(true)

  Text('点击输入文章标题')

    .maxLines(1)

    .fontSize(16)

    .fontColor('#818498')

    .padding({

      top: 6, left: 3

    })

    .textAlign(TextAlign.Start)

    .visibility(this.titleEditWebViewModel.isShowHint ? Visibility.Visible : Visibility.None)

}

点击Text组件的“点击输入文章标题”区域，无法使在其层级下面的webview组件获取焦点?这个问题有人遇到过吗？


更多关于HarmonyOS 鸿蒙Next如何实现点击穿透效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复
可通过给Text设置hitTestBehavior来控制触摸测试，详细可参考：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-hit-test-behavior-V5#hittestbehavior

可参考demo:

[@Entry](/user/Entry)
[@Component](/user/Component)
struct StackExample {
  build() {
    Stack({ alignContent: Alignment.Bottom }) {
      TextInput({ placeholder: 'Please enter the content.' })
        .showUnderline(true)
        .width('80%')
        .height(60)
        .key('BBB')
        .backgroundColor(0xd2cab3)
        .align(Alignment.Top)
        .onClick(() => {
          console.log('111')
          focusControl.requestFocus('BBB');
        })
      Text('B')
        .width('20%')
        .height('20%')
        .backgroundColor(0xc1cbac)
        .align(Alignment.Center)
        .hitTestBehavior(HitTestMode.None)
        .onClick(() => {
          console.log('123')
        })
    }.width('100%').height(150).margin({ top: 5 })
  }
}

更多关于HarmonyOS 鸿蒙Next如何实现点击穿透效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中实现点击穿透效果，可以通过自定义组件并处理触摸事件来实现。具体步骤如下：

  1. 自定义组件：首先，创建一个自定义组件，并在其中处理触摸事件。

  2. 重写触摸事件处理方法：在自定义组件中，重写onTouch事件处理方法。当触摸事件发生时，判断是否需要实现点击穿透。

  3. 消费与传递事件：在onTouch方法中，如果决定不消费该触摸事件（即实现点击穿透），则调用super.onTouch()或相关方法将事件传递给下一个事件处理者。如果决定消费该事件，则执行相应的逻辑处理。

  4. 设置触摸事件透明度：在布局文件中，为需要实现点击穿透效果的组件设置相应的属性，使其不拦截触摸事件，或者通过编程方式在代码中设置。

  5. 测试与验证：在实际设备或模拟器上测试自定义组件的点击穿透效果，确保功能正常。

示例代码（简化）：

// 伪代码，实际需用鸿蒙开发语言实现
@Override
public boolean onTouch(TouchEvent event) {
    if (shouldPassThrough(event)) {
        return super.onTouch(event); // 传递事件
    } else {
        // 处理事件
        return true;
    }
}

private boolean shouldPassThrough(TouchEvent event) {
    // 判断条件
    return true; // 或根据实际需求返回true或false
}

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部