如何让Jetpack Compose LazyVerticalGrid不可滚动并保持静态网格比例

问题说明 #

需要实现静态网格，要求所有网格项保持正方形比例；窗口调整大小时，网格不能变形，宁愿只显示网格的部分区域，也不让元素拉伸或压缩。当前使用LazyVerticalGrid的方案会在窗口 resize 时变形，且无法实现不可滚动的静态布局。

解决方案 #

放弃LazyVerticalGrid（它为滚动加载场景设计，会自适应父容器尺寸），改用静态Row+Column嵌套布局，同时通过外层容器限制网格的原始比例，超出窗口的部分直接隐藏。

修改后的代码 #

@Composable
fun GridDisplay(
    modifier: Modifier,
    gridSizeX: Int,
    gridSizeY: Int,
    zoom: Int
) {
    val gridBorderSize: Dp = 1.dp
    val cellSize = zoom.dp

    // 外层容器：固定网格原始尺寸，超出窗口部分自动隐藏
    Box(
        modifier = modifier
            .size(width = (gridSizeX * zoom).dp, height = (gridSizeY * zoom).dp)
            .overflow(Overflow.Hidden)
            .border(BorderStroke(gridBorderSize, Color.LightGray))
    ) {
        // 静态网格：Column嵌套Row生成固定布局的网格
        Column(modifier = Modifier.padding(gridBorderSize)) {
            repeat(gridSizeY) { rowIndex ->
                Row {
                    repeat(gridSizeX) { colIndex ->
                        val index = rowIndex * gridSizeX + colIndex
                        Box(
                            modifier = Modifier
                                .size(cellSize)
                                .border(BorderStroke(gridBorderSize, Color.LightGray)),
                            contentAlignment = Alignment.Center
                        ) {
                            Text(text = "index : $index")
                        }
                    }
                }
            }
        }
    }
}

关键细节解释 #

1. 外层容器控制：用Box设置固定宽高（对应网格的原始尺寸），加上.overflow(Overflow.Hidden)，窗口小于网格尺寸时自动隐藏超出部分，保证网格比例完全不变。
2. 静态网格布局：通过Column+Row的嵌套生成网格，完全替换Lazy组件，确保每个单元格尺寸由cellSize严格控制，不会被父容器强制拉伸。
3. 正方形单元格：用.size(cellSize)同时设置宽高，直接保证每个网格项为标准正方形。

原代码问题分析 #

• LazyVerticalGrid的GridCells.Fixed(gridSizeX)会强制组件自适应父容器宽度，均分列宽，因此你设置的.width(zoom.dp)会被忽略，导致单元格变形。
• Lazy组件默认支持滚动，不符合「不可滚动静态网格」的需求。

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