Jetpack Compose中LazyVerticalGrid子项无法占满高度的问题

你的问题出在：使用GridCells.Adaptive的LazyVerticalGrid中，跨整行的子项默认高度由内容决定（你的空Box没有高度），fillMaxSize()无法生效——因为Grid的item布局没有给内部元素传递高度约束。

以下是两种可行的解决方案：

方案1：让跨列item占满Grid全部可用高度 #

直接给item添加modifier并设置fillMaxHeight()，强制item占满Grid的高度空间，再让内部Box填充整个item：

Box(modifier = Modifier.fillMaxSize()) {
    LazyVerticalGrid(
        GridCells.Adaptive(120.dp),
        horizontalArrangement = Arrangement.spacedBy(8.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp),
        modifier = Modifier.fillMaxSize()
    ) {
        item(
            span = { GridItemSpan(maxLineSpan) },
            modifier = Modifier.fillMaxHeight() // 让item占满Grid的可用高度
        ) {
            Box(
                modifier = Modifier.fillMaxSize().background(Color.Red)
            ) {
                // 可在此添加内容
            }
        }
    }
}

方案2：指定固定高度（按需使用） #

如果不需要占满全部高度，可直接给内部Box设置固定高度或最小高度：

Box(modifier = Modifier.fillMaxSize()) {
    LazyVerticalGrid(
        GridCells.Adaptive(120.dp),
        horizontalArrangement = Arrangement.spacedBy(8.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp),
        modifier = Modifier.fillMaxSize()
    ) {
        item(span = { GridItemSpan(maxLineSpan) }) {
            Box(
                modifier = Modifier.height(200.dp).fillMaxWidth().background(Color.Red)
            ) {
                // 可在此添加内容
            }
        }
    }
}

补充说明 #

• GridCells.Adaptive会根据指定的最小宽度自动计算列数，单列表格的高度由该列最高子项决定；
• 跨列item不受单列表格高度约束，必须主动设置高度约束，内部元素才能填充空间。

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