如何让Jetpack Compose中的Scaffold覆盖顶部通知栏？

完全可行，你可以通过以下步骤实现：

1. 允许布局延伸到系统栏区域 #

在你的Activity的onCreate方法中添加代码，让应用布局可以覆盖系统状态栏：

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    WindowCompat.setDecorFitsSystemWindows(window, false)
    setContent {
        // 你的Compose内容
    }
}

2. 调整状态栏样式适配布局 #

在Compose代码中，通过rememberSystemUiController设置状态栏背景为透明，并根据TopBar的背景色调整状态栏图标（时间、电池等）的颜色，确保图标可见：

val systemUiController = rememberSystemUiController()

SideEffect {
    systemUiController.setStatusBarColor(
        color = Color.Transparent, // 状态栏透明，让TopBar背景延伸上去
        darkIcons = true // TopBar为浅色背景时设为true显示深色图标，反之设为false
    )
}

3. 修改TopBar布局覆盖状态栏 #

调整TopBarComposable的高度，让它包含状态栏的高度，同时将内部内容向下偏移，避免被状态栏图标遮挡：

@Composable
fun TopBarComposable() {
    // 获取状态栏高度
    val statusBarHeight = WindowInsets.statusBars.getTop(LocalDensity.current)
    Box(
        modifier = Modifier
            .fillMaxWidth()
            // 叠加TopBar默认高度（56dp）与状态栏高度
            .height(56.dp + statusBarHeight.toDp())
            .background(MaterialTheme.colorScheme.primary) // 你的TopBar背景色
    ) {
        // 内部内容添加顶部padding避开状态栏区域
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(
                    top = statusBarHeight.toDp(),
                    start = 16.dp,
                    end = 16.dp,
                    bottom = 16.dp
                )
                .align(Alignment.BottomCenter),
            horizontalArrangement = Arrangement.SpaceBetween,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text(text = "页面标题", style = MaterialTheme.typography.titleLarge)
            IconButton(onClick = { /* 编辑按钮逻辑 */ }) {
                Icon(Icons.Default.Edit, contentDescription = "编辑")
            }
        }
    }
}

4. 保持Scaffold内容区域的正确布局 #

维持原有Scaffold结构，注意给ContentComposable传入innerPadding，避免内容被TopBar和BottomBar遮挡：

val scaffoldState = rememberScaffoldState()

Scaffold(
    scaffoldState = scaffoldState,
    topBar = { TopBarComposable() },
    drawerContent = { DrawerContentComposable() },
    content = { innerPadding ->
        ContentComposable(modifier = Modifier.padding(innerPadding))
    },
    bottomBar = { BottomBarComposable() },
    drawerShape = RectangleShape
)

完成以上设置后，你的Scaffold顶部会完全覆盖状态栏区域，达成你期望的效果。

内容的提问来源于stack exchange，提问作者Android Dev