// 安全区域布局示例
import { StyleSheet } from '@ohos.arkui.adaptive';

const styles = StyleSheet.create({
  safeArea: {
    paddingTop: '$system.topSafeAreaHeight',
    paddingBottom: '$system.bottomSafeAreaHeight'
  }
});

状态栏透明

通过 `Window` 类的 `setWindowSystemBarProperties` 方法设置状态栏为透明：

补充说明

API 版本适配方案

// 版本兼容处理
const API_VERSION = 9; // 实际API版本号
if (API_VERSION >= 8) {
  mainWindow.setWindowSystemBarProperties({...});
} else {
  // 旧版本备用方案
  mainWindow.setStatusBarColor('#00000000');
}

安全区域计算

考虑使用系统提供的安全区域参数： $$ safeAreaHeight = screenHeight - statusBarHeight - navigationBarHeight $$

动态主题切换

// 监听主题变化
themeManager.on('themeChange', (newTheme) => {
  this.currentTheme = newTheme;
  this.updateStatusBar();
});

视觉适配建议

1. 渐变色过渡：在靠近系统栏区域使用颜色渐变 $$ gradient = linear-gradient(to top, rgba(0,0,0,0.5), transparent) $$
2. 内容间距：保持最小安全距离 $$ minPadding = max(statusBarHeight, 20px) $$

调试技巧

1. 开启开发人员选项中的"显示布局边界"
2. 使用hilog输出实际尺寸值：

   hilog.info(DOMAIN, TAG, `StatusBar height: ${statusBarHeight}`);
   

性能优化

避免频繁调用透明设置：

// 仅在必要时更新
if (currentStatusBarColor !== targetColor) {
  mainWindow.setWindowSystemBarProperties({...});
}