HarmonyOS鸿蒙Next中横屏切换竖屏后，点击事件无法触发

HarmonyOS鸿蒙Next中横屏切换竖屏后，点击事件无法触发 应用在平板启动后，默认是横屏显示，点击后，触发win.setPreferredOrientation(window.Orientation.PORTRAIT)，应用变成竖屏展示，展示的UI界面没有问题，但是竖屏状态下，屏幕下半部分无法触发点击事件了。就很奇怪，为什么我在最外层的Stack容器添加了点击事件，竖屏状态下，下方区域为什么不能触发点击事件。开始我有考虑是不是有其他组件覆盖了Stack组件的下方区域导致无法触发。但是具体的情况就是竖屏状态下，下半部分和完全不属于这个屏幕一样，无论添加什么事件都无法被触发。我现在完全没有思路该怎么去排查这个问题。切换竖屏后，屏幕宽高值都发生了正确的变化，我实在是不知道该从哪方面去排查这个问题

cke_5614.jpeg 1b07333c-7535-4b7c-a511-34cebc876b5d.png cke_6767.png


更多关于HarmonyOS鸿蒙Next中横屏切换竖屏后，点击事件无法触发的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

【背景知识】 屏幕属性提供管理显示设备的一些基础能力，包括获取默认显示设备的信息，获取所有显示设备的信息以及监听显示设备的插拔行为。其中orientation表示屏幕当前显示的方向。

【解决方案】

针对场景一：实现应用的横竖屏切换功能，需要从以下技术方面进行考虑：设置窗口的旋转策略，监听屏幕的窗口变化，进行布局适配。

针对场景二：可采用以下两种方法来实现。

  • 解决方案一：使用windowClass.getPreferredOrientation()来获取窗口的显示方向。示例代码如下：
    let windowClass: window.Window | undefined = undefined;
try {
  let promise = window.getLastWindow(getContext())
  promise.then((data) => {
    windowClass = data
    windowClass.getPreferredOrientation(); // 获取窗口的显示方向
  }).catch((err: BusinessError) => {
    console.error('getLastWindow error')
  })
} catch (e) {
  console.error('setScreenOrientation error')
}
  • 解决方案二：使用display.getDefaultDisplaySync().orientation这个属性来判断屏幕目前所处的横竖屏状态。示例代码如下：
    let oritation: number = display.getDefaultDisplaySync().orientation;
switch (oritation) {
  case display.Orientation.PORTRAIT:
    this.status ='竖屏';
    break;
  case display.Orientation.LANDSCAPE:
    this.status ='横屏';
    break;
  case display.Orientation.PORTRAIT_INVERTED:
    this.status ='反向竖屏';
    break;
  case display.Orientation.LANDSCAPE_INVERTED:
    this.status ='反向横屏';
    break;
  default:
    this.status ='不知道';

更多关于HarmonyOS鸿蒙Next中横屏切换竖屏后，点击事件无法触发的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


测试发现，目前设备本事不支持横竖屏切换，因为使用setPreferredOrientation切换窗口的显示方向为竖屏后，使用display获取屏幕的显示方向还是为1，即为横屏，所以出现的各种问题。

测试下来发现，就是切换竖屏后，UI展示是正确的，但是有效的屏幕高度还是和横屏时候的高度一样，并没有因为变成竖屏了，他的有效高度就变了。

在HarmonyOS Next中，横屏切换竖屏后点击事件无法触发，通常与UI布局或事件分发机制有关。检查布局是否因屏幕方向变化而重新加载，导致组件ID或引用失效。确保使用onConfigurationChanged正确处理配置变更，避免页面重建。同时，验证点击事件绑定是否正确，特别是在使用ArkTS声明式UI时，需确认状态管理是否影响事件响应。

根据你的描述和截图，这是一个典型的屏幕旋转后布局或事件区域未正确更新的问题。点击事件无法触发的根本原因，通常是组件的触摸区域（Hit Test Area）在屏幕方向改变后，其坐标或尺寸仍然停留在旋转前的状态，没有与新的屏幕物理区域同步。

结合HarmonyOS Next的架构，可以从以下几个核心方向进行排查：

  1. 检查最外层容器的布局约束：你提到在最外层使用了Stack组件。请确保这个Stack或其直接父容器的尺寸约束在旋转后能正确填充整个屏幕。检查是否使用了固定的宽高（width、height）或不当的布局参数（如align、position），导致其在竖屏时实际渲染区域未能覆盖下半部分屏幕。建议：尝试为最外层Stack设置width(‘100%’)和height(‘100%’)，或使用Flex布局并设置justifyContent(FlexAlign.Start)和alignItems(HorizontalAlign.Start)以确保占满全屏。

  2. 审查window.on横竖屏切换监听与UI更新：虽然你通过win.setPreferredOrientation触发了旋转，并且观察到宽高值变化，但UI的重新布局和绘制可能与此存在时序差。关键步骤：在window.getLastWindow(this.context)获取的窗口对象上，监听‘orientationChange’事件。在该事件的回调函数中，必须显式地触发UI更新，例如通过修改@State变量来驱动最外层或关键容器的重新构建，确保所有组件的触摸区域基于新的屏幕方向进行计算。

    // 示例代码结构
import { window } from '@kit.ArkUI';

@Entry
@Component
struct MyPage {
  @State currentOrientation: window.Orientation = window.Orientation.AUTO;

  aboutToAppear() {
    let win = window.getLastWindow(this.context);
    win.on('orientationChange', (newOrientation: window.Orientation) => {
      // 强制更新UI，重新计算布局
      this.currentOrientation = newOrientation;
    });
  }
  // ... 在build方法中使用this.currentOrientation
}

  3. 排查是否存在“溢出”或“裁剪”区域：检查Stack内部或上层的组件，特别是使用了position定位、zIndex或含有clip属性的组件。在竖屏时，某个子组件可能因为定位错误或尺寸过大，导致其触摸区域覆盖了下半屏，但其自身可能不可见或无法响应点击，从而阻塞了底层Stack的事件。可以尝试简化UI，逐步移除子组件来定位问题组件。

  4. 验证触摸热区与布局边界：在竖屏状态下，使用调试工具或临时添加边框颜色，确认你认为应该响应点击的组件（如Stack）的视觉边界是否确实延伸到了屏幕底部。有时布局计算错误会导致组件实际渲染区域小于预期。

总结与建议的排查顺序： 首先，确保最外层容器在旋转后能100%占据屏幕。其次，重点检查并实现orientationChange事件监听，并在其中强制更新UI状态，这是解决旋转后交互问题的最常见且有效的方法。如果问题依旧，再逐步简化界面，排查子组件覆盖或布局裁剪问题。

回到顶部