如何在Flutter中检测手机水平翻转事件并实现元素显隐切换？

要实现仅响应沿X轴的水平翻转、切换元素可见性的需求，可以通过浏览器的DeviceOrientation API完成，核心是监听设备绕X轴的旋转事件，过滤Y轴相关动作，同时维护状态来控制元素显示/隐藏。

核心逻辑 #

1. 请求设备方向权限：现代浏览器需用户授权才能访问设备方向数据
2. 监听deviceorientation事件，提取X轴旋转角度（beta值）
3. 识别X轴翻转动作：通过对比前后beta值的变化，判定完整翻转行为（如角度从正区间跨到负区间，或反之）
4. 维护切换状态：用变量记录元素当前可见性，每次触发有效翻转时切换状态

代码实现 #

<!-- HTML结构 -->
<div id="targetElement" style="width: 200px; height: 200px; background: #42b983; margin: 2rem auto;"></div>

// 目标元素
const targetElement = document.getElementById('targetElement');
// 记录元素当前可见状态，初始为可见
let isElementVisible = true;
// 记录上一次X轴旋转角度，用于判断翻转动作
let lastBeta = null;
// 翻转阈值：当beta值跨越±90度时判定为一次有效翻转
const flipThreshold = 90;

// 请求设备方向权限
async function requestOrientationPermission() {
  if (typeof DeviceOrientationEvent !== 'undefined' && typeof DeviceOrientationEvent.requestPermission === 'function') {
    try {
      const permission = await DeviceOrientationEvent.requestPermission();
      if (permission === 'granted') {
        startListeningOrientation();
      } else {
        console.error('设备方向权限被拒绝');
      }
    } catch (err) {
      console.error('请求权限失败:', err);
    }
  } else {
    // 非iOS13+或无需权限的浏览器直接监听
    startListeningOrientation();
  }
}

// 开始监听设备方向
function startListeningOrientation() {
  window.addEventListener('deviceorientation', handleOrientationChange);
}

// 处理方向变化事件
function handleOrientationChange(event) {
  const { beta } = event;
  // 忽略初始值无效的情况
  if (beta === null || lastBeta === null) {
    lastBeta = beta;
    return;
  }

  // 仅处理沿X轴的翻转：当beta值跨越±flipThreshold时判定为一次有效翻转
  // 完全忽略Y轴（gamma）的变化，确保不响应垂直翻转
  const isFlip = (lastBeta < -flipThreshold && beta > flipThreshold) || (lastBeta > flipThreshold && beta < -flipThreshold);
  
  if (isFlip) {
    // 切换元素可见性
    isElementVisible = !isElementVisible;
    targetElement.style.display = isElementVisible ? 'block' : 'none';
    // 更新lastBeta，避免重复触发
    lastBeta = beta;
  } else {
    // 未触发有效翻转时，持续更新lastBeta
    lastBeta = beta;
  }
}

// 页面加载时请求权限并开始监听
window.addEventListener('load', requestOrientationPermission);

关键说明 #

• X轴旋转识别：beta值代表设备绕X轴的旋转角度，范围为-180°到180°。当设备完成一次水平翻转（沿X轴），beta值会从大于90°变为小于-90°，或反之
• 过滤Y轴动作：代码仅关注beta值变化，完全忽略gamma（绕Y轴的旋转角度）的影响，确保不响应垂直翻转
• 状态控制：通过isElementVisible变量记录当前状态，每次有效翻转时切换，实现首次翻转隐藏、再次翻转显示的循环
• 兼容性：支持大多数现代浏览器，iOS 13+需要用户手动授权设备方向权限

内容的提问来源于stack exchange，提问作者Dhaval Kansara