Jetpack Compose中如何在Composable内调用enableEdgeToEdge修改指定屏幕状态栏颜色

核心思路 #

enableEdgeToEdge()的作用是开启应用的边缘到边缘模式，让状态栏和导航栏变为透明，同时允许内容延伸到系统栏下方。要修改系统栏背景色，需结合WindowInsetsController操作Activity的Window，再配合Compose导航的生命周期，确保指定屏幕进入时应用自定义颜色，离开时可按需恢复默认。

步骤1：在Activity中启用边缘到边缘模式 #

首先必须在Activity的onCreate方法中调用enableEdgeToEdge()，这是后续自定义的基础：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge() // 启用边缘到边缘模式
        setContent {
            YourAppTheme {
                // 导航宿主及应用内容
                NavHost(navController = navController, startDestination = "home") {
                    // 定义你的导航图（含嵌套导航）
                }
            }
        }
    }
}

步骤2：在指定Composable屏幕中修改系统栏颜色 #

在需要自定义状态栏/导航栏颜色的屏幕Composable中，通过LocalContext获取Activity的Window，利用WindowInsetsController设置颜色。用LaunchedEffect绑定屏幕生命周期，确保进入时执行修改；如需离开时恢复默认，可搭配DisposableEffect。

示例代码：

@Composable
fun ProfileScreen(navController: NavHostController) {
    val context = LocalContext.current
    val window = (context as Activity).window

    // 进入屏幕时设置自定义颜色
    LaunchedEffect(Unit) {
        val insetsController = WindowCompat.getInsetsController(window, window.decorView)
        // 设置状态栏背景色
        window.statusBarColor = MaterialTheme.colorScheme.primary.toArgb()
        // 设置导航栏背景色
        window.navigationBarColor = MaterialTheme.colorScheme.primary.toArgb()
        
        // 根据背景色亮度适配状态栏/导航栏图标颜色
        val isLightBackground = MaterialTheme.colorScheme.primary.luminance() > 0.5f
        insetsController.isAppearanceLightStatusBars = isLightBackground
        insetsController.isAppearanceLightNavigationBars = isLightBackground
    }

    // 离开屏幕时恢复默认透明状态（可选，按需调整）
    DisposableEffect(Unit) {
        onDispose {
            window.statusBarColor = Color.Transparent.toArgb()
            window.navigationBarColor = Color.Transparent.toArgb()
            val insetsController = WindowCompat.getInsetsController(window, window.decorView)
            insetsController.isAppearanceLightStatusBars = false
            insetsController.isAppearanceLightNavigationBars = false
        }
    }

    // 屏幕UI内容
    Scaffold { innerPadding ->
        Column(modifier = Modifier.padding(innerPadding)) {
            Text(text = "Profile Screen")
            // 其他UI元素
        }
    }
}

关键细节说明 #

• WindowCompat.getInsetsController()：兼容多Android版本的Insets控制器，替代旧版API。
• statusBarColor/navigationBarColor：直接设置系统栏背景色，因已开启边缘到边缘模式，设置的颜色会覆盖透明背景。
• isAppearanceLightStatusBars：控制状态栏图标（时间、信号等）的明暗，需根据背景色亮度自动适配，避免图标与背景融合。
• LaunchedEffect(Unit)：确保Composable首次进入时执行一次颜色修改；若需响应路由变化，可将当前屏幕的route作为LaunchedEffect的key（如LaunchedEffect(navController.currentBackStackEntry?.destination?.route)）。
• DisposableEffect：在Composable销毁时执行清理，恢复系统栏默认状态，避免影响其他屏幕。

嵌套导航图适配 #

如果使用嵌套导航图，只需在子导航图的目标屏幕中复用上述Composable内的逻辑即可，LocalContext始终能获取到宿主Activity的Window，不受嵌套层级影响。

内容的提问来源于stack exchange，提问作者Daniyal Khan