如何高效实现Jetpack Compose LazyVerticalGrid自适应正方形项？

你的现有方案确实存在潜在性能问题——onSizeChanged会触发组件重组，当列表项数量较多时，累积的重组开销会比较明显。这里有两种更高效的替代方案：

方案一：使用AspectRatio修饰符（推荐） #

这是最简单且性能最优的方式，直接利用Compose内置的aspectRatio修饰符强制宽高比为1:1，让高度自动匹配宽度：

LazyVerticalGrid(columns = GridCells.Fixed(3)) { // 根据需求设置列数，比如3列
    items(yourDataList) { item ->
        Box(
            modifier = Modifier
                .fillMaxWidth() // 占满当前列的可用宽度
                .aspectRatio(1f) // 强制宽高比1:1，高度自动等于宽度
                .background(Color.LightGray)
        ) {
            // 网格项内容，例如文本、图片等
            Text(text = item.toString())
        }
    }
}

原理：fillMaxWidth()让网格项宽度填满所在列的空间，aspectRatio(1f)会在测量阶段直接根据宽度计算出相等的高度，全程不会触发重组，性能表现最优。

方案二：自定义Layout（特殊场景适用） #

如果需要更精细的测量控制（比如动态列数下的特殊适配），可以用自定义Layout组件直接在测量阶段确定正方形尺寸：

@Composable
fun SquareItem(content: @Composable () -> Unit) {
    Layout(content = content) { measurables, constraints ->
        // 获取当前列的最大可用宽度
        val width = constraints.maxWidth
        // 构建正方形约束：宽高强制相等
        val squareConstraints = constraints.copy(minHeight = width, maxHeight = width)
        val placeable = measurables.first().measure(squareConstraints)
        
        layout(width, width) {
            placeable.place(0, 0)
        }
    }
}

// 使用示例
LazyVerticalGrid(columns = GridCells.Adaptive(minSize = 120.dp)) {
    items(yourDataList) {
        SquareItem {
            Box(modifier = Modifier.background(Color.Blue)) {
                Text(text = it.toString())
            }
        }
    }
}

这种方式完全在测量阶段完成尺寸计算，同样不会触发重组，适合有特殊布局需求的场景，但普通正方形需求用方案一就足够。

原有方案性能一般的原因 #

onSizeChanged会在组件尺寸确定后触发状态更新，进而引发重组。虽然单一项的重组开销很小，但LazyVerticalGrid加载大量项时，每个项都要经历"测量→触发状态→重组→重新测量"的循环，累积下来会增加不必要的性能消耗。

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