Jetpack Compose 如何在Scaffold中实现悬浮于主内容上方的Topbar

核心逻辑：Scaffold默认会给内容区域传入包含TopBar高度的innerPadding，只要不对主内容应用顶部方向的padding，即可避免主内容被挤压，实现TopBar悬浮效果。

示例代码 #

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.statusBarsPadding
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Scaffold
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun FloatingTopBarScaffold() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("悬浮顶部栏") },
                // 可自定义背景色，半透明效果更适配悬浮场景
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = Color(0x80000000) // 半透明黑色
                ),
                modifier = Modifier.statusBarsPadding() // 适配状态栏，避免顶到状态栏文字
            )
        }
    ) { innerPadding ->
        Box(
            modifier = Modifier
                .fillMaxSize()
                // 仅应用底部和左右边距，忽略顶部的TopBar高度padding
                .padding(
                    bottom = innerPadding.calculateBottomPadding(),
                    start = innerPadding.calculateStartPadding(LocalLayoutDirection.current),
                    end = innerPadding.calculateEndPadding(LocalLayoutDirection.current)
                )
        ) {
            // 你的全屏主内容，比如背景图、全屏列表等
            Image(
                painter = painterResource(id = R.drawable.bg_fullscreen),
                contentDescription = null,
                contentScale = ContentScale.Crop,
                modifier = Modifier.fillMaxSize()
            )
        }
    }
}

适配提示 #

• 如果不需要适配Scaffold的底部导航栏、snackbar等组件的边距，可以直接删除主内容的padding配置，直接使用Modifier.fillMaxSize()即可
• 若主内容是可滚动列表，想避免列表顶部内容被TopBar遮挡，可以给列表的第一个元素或者列表本身加Modifier.padding(top = 56.dp)（默认Material3 TopAppBar高度为56.dp）
• 可以根据需求调整TopBar的背景透明度、阴影效果，保证顶部栏文字和图标在不同背景下都清晰可见

内容的提问来源于stack exchange，提问作者Shreyash.K