如何让Jetpack Compose的LazyGrid在系统栏后方渲染

云上老周

2026-8-30

问题根因

这不是组件异常，是Modifier.statusBarsPadding()的默认行为完全符合设计逻辑：

给任意组件添加statusBarsPadding()修饰符时，修饰符会为组件整体增加等同于状态栏高度的顶部外边距，组件自身的布局边界、背景绘制范围都会被整体下推到状态栏下方，自然无法渲染到系统栏后方。
你在网格上方添加Spacer/Box预留顶部间距的实现逻辑，本质和给网格加statusBarsPadding完全一致，都是把网格整体从状态栏位置往下挤，所以会出现完全相同的表现。
额外提一句：你原来的根布局只用了fillMaxWidth()没有占满全屏高度，本身就没法实现内容延伸到整个窗口的效果，沉浸式场景下根容器必须用fillMaxSize()占满窗口。

正确实现方式

如果你的需求是保留网格背景延伸到状态栏后方的沉浸式效果，同时保证网格内的卡片内容不被状态栏遮挡，不要给LazyVerticalGrid整体加statusBarsPadding，而是通过网格自带的contentPadding参数给列表内容加顶部内边距即可：

@Composable
fun LibraryScreen(navController: NavController) {
    val statusBarTopPadding = with(LocalDensity.current) {
        WindowInsets.statusBars.getTop(this).toDp()
    }
    Surface(
        color = Color.Magenta,
        modifier = Modifier.fillMaxSize()
    ) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(horizontal = 10.dp)
        ) {
            LazyVerticalGrid(
                columns = GridCells.Fixed(3),
                horizontalArrangement = Arrangement.spacedBy(10.dp),
                verticalArrangement = Arrangement.spacedBy(10.dp),
                // 仅给列表内容区域加内边距，不影响组件本身的布局边界
                contentPadding = PaddingValues(top = statusBarTopPadding),
                modifier = Modifier
                    .fillMaxSize()
                    .background(color = Color.Black)
            ) {
                items(40) {
                    AlbumCard(
                        "TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE TITLE ",
                        "ARTIST ARTIST ARTIST ARTIST ARTIST ARTIST ARTIST "
                    )
                }
            }
        }
    }
}

补充说明：

上述实现用的是Compose 1.2+版本内置的WindowInsets能力，不需要额外引入Accompanist的Insets依赖，如果你还在使用Accompanist版本的Insets，把取值逻辑替换成Accompanist的对应API即可，核心逻辑不变。
这个写法同时支持列表滚动时内容自然滑入状态栏区域的沉浸式效果，不会出现滚动时内容被状态栏硬遮挡的问题。

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