如何在Jetpack Compose中让状态栏颜色随TopAppBar滚动同步变化？

你已经完成了状态栏透明、允许内容延伸到状态栏的基础配置，接下来只需要让TopAppBar的颜色变化同步覆盖到状态栏区域即可，具体实现如下：

1. 基础配置确认（你已完成，可直接跳过） #

确保在Activity的onCreate方法中添加：

window.setFlags(
    WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
    WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS
)

在Compose代码中获取SystemUiController并设置状态栏透明：

val systemUiController = rememberSystemUiController()
systemUiController.setStatusBarColor(Color.Transparent)

2. 同步状态栏与TopAppBar的颜色变化 #

核心思路是：借助TopAppBar的滚动行为状态计算当前背景色，将该颜色同时应用到状态栏区域和TopAppBar本身。

完整示例代码：

// 定义TopAppBar的滚动行为
val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(rememberScrollState())

// 根据滚动折叠比例计算平滑过渡的颜色
val appBarColor = Color.lerp(
    Color.Transparent,
    MaterialTheme.colorScheme.primary,
    scrollBehavior.state.collapsedFraction
)

// 根据当前背景色动态调整状态栏图标颜色，保证可读性
LaunchedEffect(appBarColor) {
    val isDarkBackground = appBarColor.luminance() < 0.5f
    systemUiController.setStatusBarContentColor(if (isDarkBackground) Color.White else Color.Black)
}

Scaffold(
    topBar = {
        // 用Box包裹，让背景覆盖状态栏区域
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .background(appBarColor)
                .statusBarsPadding() // 自动适配状态栏高度，避免TopAppBar内容被遮挡
        ) {
            TopAppBar(
                title = { Text("我的页面") },
                scrollBehavior = scrollBehavior,
                // 设置TopAppBar背景为透明，让外层Box的颜色透出来
                colors = TopAppBarDefaults.topAppBarColors(containerColor = Color.Transparent)
            )
        }
    },
    content = { paddingValues ->
        // 可滚动内容示例
        LazyColumn(
            modifier = Modifier.fillMaxSize(),
            contentPadding = paddingValues
        ) {
            items(100) {
                Text("列表项 $it", modifier = Modifier.padding(horizontal = 16.dp, vertical = 12.dp))
            }
        }
    }
)

关键说明 #

• scrollBehavior.state.collapsedFraction表示TopAppBar的折叠比例（0为完全展开，1为完全折叠），通过Color.lerp可以实现透明到主题色的平滑渐变，你也可以替换为自己需要的颜色组合。
• 外层Box的statusBarsPadding()会自动适配设备状态栏高度，既保证TopAppBar内容不被遮挡，又让Box的背景完整覆盖状态栏区域，实现颜色同步。
• LaunchedEffect监听颜色变化，动态切换状态栏图标颜色，解决深色背景下图标不可读的问题。

内容的提问来源于stack exchange，提问作者NoVa Vineuro