Jetpack Compose状态栏（可选导航栏）切换动画及透明设置问题

核心思路 #

让系统栏颜色跟随页面切换做动画渐变，同时确保页面内容能延伸到系统栏区域（避免透明状态栏出现白色底色），最终实现系统栏和页面CrossFade动画同步。

步骤1：配置Activity，允许内容延伸到系统栏 #

在你的Activity的onCreate方法中添加如下代码，让窗口内容覆盖系统栏区域：

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    // 允许内容延伸到状态栏和导航栏下方
    window.setFlags(
        WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
        WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS
    )
    setContent {
        // 你的Compose内容
    }
}

步骤2：绑定系统栏颜色与页面状态的动画 #

在你的导航宿主Compose函数中，实现系统栏颜色的动画过渡：

@Composable
fun NavigationHost() {
    val navController = rememberNavController()
    val systemUiController = rememberSystemUiController()
    // 获取当前页面状态（根据你的导航方式调整）
    val currentBackStackEntry by navController.currentBackStackEntryAsState()
    val currentScreen = currentBackStackEntry?.destination?.route ?: "home"

    // 为状态栏颜色创建动画状态，与CrossFade动画时长保持一致
    val statusBarColor by animateColorAsState(
        targetValue = when (currentScreen) {
            "home" -> Color(0xFFF44336) // 首页状态栏颜色
            "detail" -> Color(0xFF2196F3) // 详情页状态栏颜色
        },
        animationSpec = tween(durationMillis = 300) // 默认CrossFade时长为300ms
    )

    // 为导航栏颜色创建动画状态（可选）
    val navBarColor by animateColorAsState(
        targetValue = when (currentScreen) {
            "home" -> Color(0xFFF44336)
            "detail" -> Color(0xFF2196F3)
        },
        animationSpec = tween(durationMillis = 300)
    )

    // 当动画颜色变化时，更新系统栏
    LaunchedEffect(statusBarColor, navBarColor) {
        systemUiController.setStatusBarColor(
            color = statusBarColor,
            // 根据颜色亮度自动切换状态栏图标明暗
            darkIcons = statusBarColor.luminance() > 0.5
        )
        systemUiController.setNavigationBarColor(
            color = navBarColor,
            darkIcons = navBarColor.luminance() > 0.5
        )
    }

    // 你的CrossFade导航内容
    CrossFade(targetState = currentScreen) { screen ->
        when (screen) {
            "home" -> HomeScreen(navController)
            "detail" -> DetailScreen(navController)
        }
    }
}

步骤3：处理页面内容的系统栏内边距 #

因为内容已经延伸到系统栏下方，页面顶部/底部的UI（比如TopAppBar）需要添加内边距避免被遮挡：

@Composable
fun HomeScreen(navController: NavController) {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("首页") },
                // 添加状态栏内边距
                modifier = Modifier.statusBarsPadding()
            )
        }
    ) { paddingValues ->
        // 页面内容使用Scaffold的padding避免被导航栏/TopAppBar遮挡
        Box(modifier = Modifier.padding(paddingValues)) {
            // 首页内容
        }
    }
}

为什么之前设置透明无效？ #

直接调用systemUiController.setSystemBarsColor(Color.Transparent)但状态栏变白，是因为没有开启FLAG_LAYOUT_NO_LIMITS，此时系统会默认给状态栏添加白色背景层。开启该flag后，状态栏才会真正透明，页面内容才能延伸过去。

内容的提问来源于stack exchange，提问作者Pavel Maiseichyk