Jetpack Compose Material3中如何使状态栏与顶部应用栏同色并实现滚动tonal elevation

要实现状态栏与顶部应用栏颜色同步，且跟随滚动状态呈现tonal elevation效果，你可以通过以下步骤完成：

核心思路 #

利用SystemUiController控制状态栏颜色，同时监听TopAppBar的滚动行为，实时计算并同步其背景色（包含滚动时的阴影高度带来的颜色变化）到状态栏。

实现步骤 #

1. 引入依赖（若未添加） #

需要使用Accompanist库的System UI控制器来修改状态栏，在模块的build.gradle.kts（或build.gradle）中添加依赖：

implementation "com.google.accompanist:accompanist-systemuicontroller:<latest-version>"

（替换<latest-version>为当前最新版本，例如0.32.0）

2. 完整代码实现 #

将以下逻辑整合到你的现有代码中：

@Composable
fun YourScreen() {
    val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior()
    val systemUiController = rememberSystemUiController()
    val colorScheme = MaterialTheme.colorScheme
    val isLightTheme = colorScheme.isLight

    // 根据滚动行为计算TopAppBar当前背景色（包含tonal elevation效果）
    val topAppBarBgColor = colorScheme.surfaceColorAtElevation(scrollBehavior.tonalElevation)

    // 同步状态栏颜色与图标可见性
    SideEffect {
        systemUiController.setStatusBarColor(
            color = topAppBarBgColor,
            darkIcons = isLightTheme
        )
    }

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            SmallTopAppBar(
                scrollBehavior = scrollBehavior,
                title = { Text("你的标题") },
                // 确保TopAppBar使用计算出的背景色，与状态栏完全同步
                colors = TopAppBarDefaults.smallTopAppBarColors(
                    containerColor = topAppBarBgColor
                )
            )
        }
    ) { innerPadding ->
        // 你的内容区域，示例为LazyColumn
        LazyColumn(
            modifier = Modifier.padding(innerPadding),
            contentPadding = PaddingValues(16.dp)
        ) {
            items(50) { index ->
                Text("列表项 $index", modifier = Modifier.padding(vertical = 8.dp))
            }
        }
    }
}

关键说明 #

• scrollBehavior.tonalElevation：由pinnedScrollBehavior自动管理，滚动时会动态调整阴影高度，surfaceColorAtElevation()方法会根据该高度计算出带阴影效果的Surface颜色，与TopAppBar默认的背景色逻辑完全一致。
• SideEffect：确保每次重组（包括滚动状态变化）时都更新状态栏颜色，实现实时同步。
• darkIcons：根据主题明暗度设置状态栏图标颜色，保证在浅色/深色背景下图标都清晰可见。

内容的提问来源于stack exchange，提问作者Sailab Banik