Android 测试命令

我来详细介绍 OpenClaw（开源爪牙）项目的全面屏适配方案。

📱 全面屏适配核心要点

安全区域适配

<!-- Android 12+ 沉浸式状态栏 -->
<style name="Theme.OpenClaw" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <item name="android:windowLayoutInDisplayCutoutMode">
        shortEdges
    </item>
</style>
<!-- iOS 安全区域 -->
ios {
    deploymentTarget = "13.0"
    useSafeArea = true
}

响应式布局策略

// Android View 适配
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // 获取安全区域边距
        val windowInsetsController = ViewCompat.getWindowInsetsController(window.decorView)
        windowInsetsController?.isAppearanceLightStatusBars = true
        // 设置边缘到边缘
        WindowCompat.setDecorFitsSystemWindows(window, false)
        // 获取实际安全区域
        ViewCompat.setOnApplyWindowInsetsListener(binding.root) { view, insets ->
            val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())
            view.updatePadding(
                top = systemBars.top,
                bottom = systemBars.bottom
            )
            insets
        }
    }
}

🎨 UI组件适配方案

Flutter 适配方案

import 'package:flutter/services.dart';
void main() {
  WidgetsFlutterBinding.ensureInitialized();
  // 设置沉浸式状态栏
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
    systemNavigationBarColor: Colors.transparent,
  ));
  runApp(const OpenClawApp());
}
class SafeAreaLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        // 底部安全区域（适配虚拟导航栏）
        bottom: true,
        // 顶部安全区域（适配刘海屏）
        top: true,
        child: Container(
          // 内容区域
        ),
      ),
    );
  }
}

React Native 适配方案

// 安装必要的依赖
// react-native-safe-area-context
// react-native-screens
import { SafeAreaView, SafeAreaProvider } from 'react-native-safe-area-context';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
const App = () => {
  const insets = useSafeAreaInsets();
  return (
    <SafeAreaProvider>
      <View style={{
        flex: 1,
        paddingTop: insets.top,
        paddingBottom: insets.bottom,
        paddingLeft: insets.left,
        paddingRight: insets.right,
      }}>
        {/* 内容 */}
      </View>
    </SafeAreaProvider>
  );
};

🔧 平台特定配置

Android 配置

<!-- res/values-v27/styles.xml -->
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="Theme.OpenClaw" parent="Theme.MaterialComponents.Light.NoActionBar">
        <!-- 刘海屏适配 -->
        <item name="android:windowLayoutInDisplayCutoutMode">
            shortEdges <!-- 或 default, never -->
        </item>
        <!-- 沉浸式状态栏 -->
        <item name="android:windowTranslucentStatus">true</item>
        <item name="android:windowTranslucentNavigation">false</item>
        <!-- 全屏标志 -->
        <item name="android:windowFullscreen">false</item>
    </style>
</resources>
<!-- AndroidManifest.xml -->
<activity
    android:name=".MainActivity"
    android:theme="@style/Theme.OpenClaw"
    android:screenOrientation="portrait"
    android:configChanges="orientation|screenSize|smallestScreenSize|screenLayout"
    android:windowSoftInputMode="adjustResize">
</activity>

iOS 配置

// Info.plist
<key>UIStatusBarStyle</key>
<string>UIStatusBarStyleLightContent</string>
<key>UIViewControllerBasedStatusBarAppearance</key>
<true/>
// 设置安全区域
override func viewDidLoad() {
    super.viewDidLoad()
    if #available(iOS 11.0, *) {
        additionalSafeAreaInsets = UIEdgeInsets(
            top: 0, 
            left: 0, 
            bottom: 34, // 针对iPhone X+底部安全区域
            right: 0
        )
    }
    // 扩展布局到安全区域
    edgesForExtendedLayout = [.top, .bottom]
}

📐 尺寸和比例适配

设计稿基准

// 通用适配工具类
class SizeConfig {
  static late MediaQueryData _mediaQueryData;
  static late double screenWidth;
  static late double screenHeight;
  static late double blockSizeHorizontal;
  static late double blockSizeVertical;
  static void init(BuildContext context) {
    _mediaQueryData = MediaQuery.of(context);
    screenWidth = _mediaQueryData.size.width;
    screenHeight = _mediaQueryData.size.height;
    blockSizeHorizontal = screenWidth / 100;
    blockSizeVertical = screenHeight / 100;
  }
}
// 使用
Container(
  width: SizeConfig.blockSizeHorizontal * 80, // 屏幕宽度的80%
  height: SizeConfig.blockSizeVertical * 30,  // 屏幕高度的30%
)

媒体查询适配

/* Web端响应式设计 */
.container {
  max-width: 100%;
  margin: 0 auto;
  padding: env(safe-area-inset-top) 
           env(safe-area-inset-right) 
           env(safe-area-inset-bottom) 
           env(safe-area-inset-left);
}
@media screen and (min-width: 375px) and (max-width: 812px) {
  /* iPhone X - 13 系列 */
  .container {
    padding-top: 44px; /* 状态栏高度 */
    padding-bottom: 34px; /* Home指示条高度 */
  }
}

🎮 游戏引擎适配

Unity 适配方案

using UnityEngine;
public class FullScreenAdapter : MonoBehaviour
{
    void Start()
    {
        // 获取安全区域
        Rect safeArea = Screen.safeArea;
        // 适配Canvas
        RectTransform panel = GetComponent<RectTransform>();
        Canvas canvas = GetComponentInParent<Canvas>();
        // 计算安全区域锚点
        if (canvas != null && canvas.renderMode == RenderMode.ScreenSpaceCamera)
        {
            Vector2 min = canvas.worldCamera.ScreenToViewportPoint(
                new Vector3(safeArea.xMin, safeArea.yMin));
            Vector2 max = canvas.worldCamera.ScreenToViewportPoint(
                new Vector3(safeArea.xMax, safeArea.yMax));
            panel.anchorMin = min;
            panel.anchorMax = max;
        }
    }
    // 横竖屏适配
    void Update()
    {
        switch (Screen.orientation)
        {
            case ScreenOrientation.Portrait:
                // 竖屏布局
                break;
            case ScreenOrientation.LandscapeLeft:
            case ScreenOrientation.LandscapeRight:
                // 横屏布局
                break;
        }
    }
}

📱 常见全面屏分辨率参考

设备类型	分辨率	宽高比	状态栏高度	底部安全区
iPhone 14 Pro	1179×2556	5:9	47pt	34pt
iPhone 14	1170×2532	5:9	47pt	34pt
小米13	1080×2400	20:9	约33dp	约10dp
华为Mate 50	1212×2616	5:9	约36dp	约10dp
Galaxy S23	1080×2340	5:9	约32dp	约8dp

🔍 测试要点

测试设备覆盖

adb shell wm density                 # 查看DPI
adb shell getprop ro.build.version   # 查看Android版本
# iOS 模拟器测试
xcrun simctl list devices           # 列出模拟器
xcrun simctl boot "iPhone 14 Pro"   # 启动模拟器

自动化测试脚本

# Python + Appium 全面屏测试
def test_fullscreen_adaptation():
    # 获取屏幕信息
    screen_size = driver.get_window_size()
    safe_area = driver.execute_script("return window.safeArea")
    # 验证UI元素位置
    elements = ["#header", "#footer", "#content"]
    for element in elements:
        location = driver.find_element(element).location
        assert safe_area["top"] <= location["y"] <= safe_area["bottom"]

📦 推荐适配库

跨平台解决方案

# package.json 推荐依赖
dependencies:
  # React Native
  "react-native-safe-area-context": "^4.5.0"
  "react-native-screens": "^3.20.0"
  # Flutter
  flutter_screenutil: ^5.6.0
  safe_area: ^2.0.0
  # Android
  androidx.core:core-ktx:1.10.0
  androidx.window:window:1.1.0

💡 最佳实践建议

1. 使用百分比布局替代固定像素
2. 优先使用系统安全区域API
3. 为关键操作区域保留足够间距
4. 测试横竖屏切换的稳定性
5. 考虑折叠屏设备的适配
6. 动态获取设备信息，避免硬编码

🚀 快速开始模板

// Android 快速适配模板
@Composable
fun OpenClawFullScreenContent() {
    val windowInsets = WindowInsets.systemBars
    Box(
        modifier = Modifier
            .fillMaxSize()
            .windowInsetsPadding(windowInsets.only(WindowInsetsSides.Top + WindowInsetsSides.Bottom))
    ) {
        // 主要内容
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(horizontal = 16.dp)
        ) {
            // 界面内容
        }
    }
}

这样配置后，OpenClaw 应用将在各种全面屏设备上获得优秀的显示效果和用户体验。