OpenClaw 全面屏适配主要涉及以下关键方面

openclaw OpenClaw博客 2026-04-09 1

状态栏和导航栏适配

iOS 全面屏适配

// Swift 示例
if #available(iOS 11.0, *) {
    // 安全区域适配
    let safeArea = view.safeAreaInsets
    // 调整布局约束
    additionalSafeAreaInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
}
// 或使用自动布局
make.edges.equalTo(view.safeAreaLayoutGuide)

Android 全面屏适配

// Kotlin 示例
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
    // 使用异形屏模式
    window.attributes.layoutInDisplayCutoutMode = 
        WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES
}
// 获取状态栏高度
val statusBarHeight = resources.getIdentifier(
    "status_bar_height", "dimen", "android"
).let { resources.getDimensionPixelSize(it) }

显示模式设置

AndroidManifest.xml 配置

<!-- 允许全屏显示到刘海区域 -->
<meta-data
    android:name="android.max_aspect"
    android:value="2.4" />
<!-- 适配异形屏 -->
<meta-data
    android:name="android.notch_support"
    android:value="true" />

手势导航处理

手势冲突解决

// iOS - 防止手势冲突
override func preferredScreenEdgesDeferringSystemGestures() -> UIRectEdge {
    return [.bottom] // 底部系统手势延迟响应
}
// 或完全禁用系统手势
navigationController?.interactivePopGestureRecognizer?.isEnabled = false

Android 手势处理

// 处理手势导航栏
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
    window.isNavigationBarContrastEnforced = false
    window.navigationBarColor = Color.TRANSPARENT
}
// 监听手势区域
ViewCompat.setOnApplyWindowInsetsListener(view) { v, insets ->
    val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())
    // 根据手势栏高度调整UI
    v.setPadding(0, 0, 0, systemBars.bottom)
    insets
}

布局适配方案

响应式布局设计

/* CSS 适配示例 */
:root {
    --safe-area-top: env(safe-area-inset-top);
    --safe-area-bottom: env(safe-area-inset-bottom);
    --safe-area-left: env(safe-area-inset-left);
    --safe-area-right: env(safe-area-inset-right);
}
.container {
    padding-top: calc(20px + var(--safe-area-top));
    padding-bottom: calc(20px + var(--safe-area-bottom));
    padding-left: calc(20px + var(--safe-area-left));
    padding-right: calc(20px + var(--safe-area-right));
}

Flutter 全面屏适配

// Flutter 示例
SafeArea(
  child: Scaffold(
    body: Container(
      // 自动避开刘海和底部手势区域
    ),
  ),
);
// 或手动获取安全区域
MediaQuery.of(context).padding.top // 状态栏高度
MediaQuery.of(context).viewPadding.bottom // 底部安全区域

屏幕比例适配

动态计算布局

// JavaScript 检测屏幕比例
const isNotchScreen = () => {
    // iOS 检测
    if (CSS.supports('padding-top: env(safe-area-inset-top)')) {
        return true;
    }
    // Android 检测
    const aspectRatio = window.screen.width / window.screen.height;
    return aspectRatio > 2.0;
};
// 动态调整样式
const adjustForNotch = () => {
    const safeTop = 'env(safe-area-inset-top, 20px)';
    document.documentElement.style.setProperty('--safe-top', safeTop);
};

兼容性处理

降级方案

// 旧版本兼容
func adjustLayoutForAllDevices() {
    var topInset: CGFloat = 20 // 默认状态栏高度
    var bottomInset: CGFloat = 0
    if #available(iOS 11.0, *) {
        topInset = view.safeAreaInsets.top
        bottomInset = view.safeAreaInsets.bottom
    } else {
        topInset = topLayoutGuide.length
        bottomInset = bottomLayoutGuide.length
    }
    // 应用内边距
    scrollView.contentInset = UIEdgeInsets(
        top: topInset,
        left: 0,
        bottom: bottomInset,
        right: 0
    )
}

测试要点

多设备测试：
- iPhone X 及以上机型
- Android 各种刘海屏、水滴屏、挖孔屏
- 折叠屏设备

方向切换测试：

override func viewWillTransition(to size: CGSize, 
                               with coordinator: UIViewControllerTransitionCoordinator) {
    super.viewWillTransition(to: size, with: coordinator)
    // 横竖屏切换时重新布局
    coordinator.animate(alongsideTransition: { _ in
        self.updateSafeAreaLayout()
    })
}