如何实现类似ChatGPT官方Android App的透明状态栏（Jetpack Compose）

核心问题原因 #

当设置WindowCompat.setDecorFitsSystemWindows(window, false)后，Android系统不再自动应用主题中的android:statusBarColor，需要通过Compose的系统UI控制器手动管理状态栏颜色，同时处理侧边抽屉展开/收起时的状态栏适配。

具体实现步骤 #

1. 确认依赖配置 #

确保Module级别的build.gradle中包含Material3核心依赖：

dependencies {
    implementation "androidx.compose.material3:material3:1.2.0"
    implementation "androidx.core:core-ktx:1.12.0"
}

2. Activity基础配置 #

在Activity的onCreate方法中，保留已有配置并添加状态栏图标初始适配：

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    WindowCompat.setDecorFitsSystemWindows(window, false)
    
    // 根据系统主题设置状态栏图标明暗
    val isDarkTheme = resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK == Configuration.UI_MODE_NIGHT_YES
    WindowCompat.getInsetsController(window, window.decorView).isAppearanceLightStatusBars = !isDarkTheme

    setContent {
        JetpackComposePlayGroundTheme {
            MainApp()
        }
    }
}

3. 结合侧边抽屉动态控制状态栏 #

使用ModalNavigationDrawer时，监听抽屉状态切换，同步更新状态栏样式：

@Composable
fun MainApp() {
    val drawerState = rememberDrawerState(DrawerValue.Closed)
    val scope = rememberCoroutineScope()
    val systemUiController = rememberSystemUiController()
    val isDarkTheme = isSystemInDarkTheme()

    ModalNavigationDrawer(
        drawerState = drawerState,
        drawerContent = {
            // 侧边抽屉内容布局
            NavigationDrawerContent()
        }
    ) {
        Scaffold(
            topBar = {
                TopAppBar(
                    title = { Text("主界面") },
                    navigationIcon = {
                        IconButton(onClick = { scope.launch { drawerState.open() } }) {
                            Icon(Icons.Default.Menu, contentDescription = "打开抽屉")
                        }
                    }
                )
            }
        ) { paddingValues ->
            // 主界面内容区域，利用Scaffold的内边距适配状态栏
            Box(modifier = Modifier.padding(paddingValues)) {
                // 你的主界面内容
            }
        }
    }

    // 监听抽屉状态，动态切换状态栏样式
    LaunchedEffect(drawerState.isOpen) {
        if (drawerState.isOpen) {
            // 抽屉打开时，设置深色状态栏+浅色图标（匹配ChatGPT侧边栏风格）
            systemUiController.setStatusBarColor(
                color = Color(0xFF202123),
                darkIcons = false
            )
        } else {
            // 抽屉关闭时，恢复主界面状态栏样式
            val statusBarColor = if (isDarkTheme) Color(0xFF1E1E1E) else Color.White
            systemUiController.setStatusBarColor(
                color = statusBarColor,
                darkIcons = !isDarkTheme
            )
        }
    }
}

4. 清理主题中无效配置 #

移除主题里的android:statusBarColor配置，避免和Compose动态设置冲突：

<style name="Theme.JetpackComposePlayGround" parent="Theme.Material3.Light.NoActionBar">
    <!-- 移除原有的android:statusBarColor配置 -->
</style>

关键细节说明 #

• 用rememberSystemUiController获取Compose系统UI控制器，这是Material3提供的专门用于管理状态栏、导航栏的工具。
• 监听抽屉状态drawerState.isOpen实现动态切换，和ChatGPT App行为一致：侧边栏打开时状态栏与侧边栏同色，主界面时与顶部栏/背景融合。
• Scaffold会自动处理内容区域的内边距适配状态栏，无需额外手动调整。

内容的提问来源于stack exchange，提问作者Chirag Thummar