OpenClaw 的刘海屏适配需要根据不同平台和开发框架进行针对性处理。以下是主流的适配方案

iOS 适配方案

Safe Area 适配（推荐）

// 使用 safeAreaLayoutGuide
let safeArea = view.safeAreaLayoutGuide
myView.topAnchor.constraint(equalTo: safeArea.topAnchor).isActive = true
// 或者使用 safeAreaInsets
let topInset = view.safeAreaInsets.top

状态栏高度获取

let statusBarHeight = UIApplication.shared.statusBarFrame.height
let safeAreaTop = UIApplication.shared.windows.first?.safeAreaInsets.top ?? 0

Android 适配方案

全屏沉浸式适配

// Android 9.0+ 刘海屏适配
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
    window.attributes.layoutInDisplayCutoutMode = 
        WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES
    // 获取刘海区域信息
    window.decorView.setOnApplyWindowInsetsListener { view, insets ->
        val cutout = insets.displayCutout
        val notchHeight = cutout?.safeInsetTop ?: 0
        // 处理布局
        view.setPadding(0, notchHeight, 0, 0)
        insets
    }
}

XML 布局适配

<!-- 使用 fitSystemWindows -->
<LinearLayout
    android:fitsSystemWindows="true"
    android:layout_height="match_parent">
</LinearLayout>

React Native 适配

使用 SafeAreaView

import { SafeAreaView, StyleSheet } from 'react-native';
const App = () => (
  <SafeAreaView style={styles.container}>
    {/* 内容 */}
  </SafeAreaView>
);
const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Platform.OS === 'ios' ? 44 : 0,
  }
});

使用 react-native-safe-area-context

import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
<SafeAreaProvider>
  <SafeAreaView style={{ flex: 1 }}>
    {/* 内容 */}
  </SafeAreaView>
</SafeAreaProvider>

Flutter 适配方案

SafeArea Widget

SafeArea(
  top: true,  // 避开刘海区域
  bottom: true,
  child: YourWidget(),
)

MediaQuery 获取安全区域

final padding = MediaQuery.of(context).padding;
final safeAreaTop = padding.top;

Web 适配方案

CSS 环境变量（现代浏览器）

/* 适配刘海屏 */
body {
  padding: 
    env(safe-area-inset-top, 20px)
    env(safe-area-inset-right, 20px)
    env(safe-area-inset-bottom, 20px)
    env(safe-area-inset-left, 20px);
}
/* 固定定位元素适配 */
.header {
  padding-top: constant(safe-area-inset-top); /* iOS 11.0-11.2 */
  padding-top: env(safe-area-inset-top); /* iOS 11.2+ */
}

JavaScript 检测

// 检测安全区域
const safeArea = {
  top: CSS.supports('top: env(safe-area-inset-top)') 
    ? `env(safe-area-inset-top)` 
    : '0px'
};
// 动态设置样式
document.documentElement.style.setProperty(
  '--safe-area-top', 
  safeArea.top
);

跨平台解决方案

统一适配策略

// 设备信息检测
const getDeviceInfo = () => {
  const { platform, isPad } = DeviceInfo;
  const isNotchDevice = 
    (platform === 'ios' && !isPad) || 
    (platform === 'android' && hasNotch);
  return {
    statusBarHeight: isNotchDevice ? 44 : 20,
    safeAreaTop: isNotchDevice ? 44 : 0
  };
};

CSS-in-JS 适配方案

const notchStyles = {
  paddingTop: Platform.select({
    ios: 44,
    android: hasNotch ? 24 : 0,
    default: 0
  })
};

设计建议

内容布局原则

• 重要交互元素避开刘海区域保持可见可延伸到刘海区域

测试设备清单

iOS: iPhone X/XS/11/12/13/14/15 系列
Android: 华为、小米、OPPO、vivo 等刘海/挖孔屏设备

最佳实践

1. 渐进增强：先适配主流设备，再考虑边缘情况
2. 弹性设计：使用相对单位而非固定像素
3. 用户测试：在实际设备上验证适配效果
4. 降级方案：为不支持 env() 的浏览器提供降级样式

调试工具

• iOS Simulator：模拟各种刘海屏设备
• Android Studio Layout Inspector
• Chrome DevTools：模拟移动设备安全区域
• React Native Debugger

根据你的具体技术栈选择合适的适配方案，如果是混合开发,建议使用相应的跨平台解决方案。

标签： OpenClaw 刘海屏适配