Jetpack Compose：带verticalScroll的Column嵌套LazyVerticalGrid触发异常

核心原因 #

外层Column添加.verticalScroll()后，其高度约束变为无限大，内部的Row也会继承这个无限高度约束。而LazyVerticalGrid作为懒加载组件，必须基于确定的高度约束才能完成测量，因此会抛出IllegalStateException。

解决方案一：替换LazyVerticalGrid为普通布局（推荐，适合少量数据） #

因为你只需要展示4张小图，数据量极小，完全不需要懒加载组件。直接用Column嵌套Row实现网格布局，天然支持自适应高度，不会有测量冲突：

// 外层可滚动Column
Column(
    modifier = Modifier
        .fillMaxSize()
        .verticalScroll(rememberScrollState()),
    verticalArrangement = Arrangement.spacedBy(16.dp),
    padding = PaddingValues(16.dp)
) {
    // 主图+小图网格的Row布局
    Row(
        horizontalArrangement = Arrangement.spacedBy(8.dp),
        modifier = Modifier.fillMaxWidth()
    ) {
        // 大尺寸主图
        Image(
            painter = painterResource(id = R.drawable.product_main),
            contentDescription = "商品主图",
            modifier = Modifier
                .weight(2f)
                .aspectRatio(1f)
                .clip(RoundedCornerShape(8.dp))
        )

        // 小图网格：Column嵌套两个Row实现2列2行
        Column(
            verticalArrangement = Arrangement.spacedBy(8.dp),
            modifier = Modifier.weight(1f)
        ) {
            Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
                Image(
                    painter = painterResource(id = R.drawable.product_thumb1),
                    contentDescription = "缩略图1",
                    modifier = Modifier
                        .weight(1f)
                        .aspectRatio(1f)
                        .clip(RoundedCornerShape(8.dp))
                )
                Image(
                    painter = painterResource(id = R.drawable.product_thumb2),
                    contentDescription = "缩略图2",
                    modifier = Modifier
                        .weight(1f)
                        .aspectRatio(1f)
                        .clip(RoundedCornerShape(8.dp))
                )
            }
            Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
                Image(
                    painter = painterResource(id = R.drawable.product_thumb3),
                    contentDescription = "缩略图3",
                    modifier = Modifier
                        .weight(1f)
                        .aspectRatio(1f)
                        .clip(RoundedCornerShape(8.dp))
                )
                Image(
                    painter = painterResource(id = R.drawable.product_thumb4),
                    contentDescription = "缩略图4",
                    modifier = Modifier
                        .weight(1f)
                        .aspectRatio(1f)
                        .clip(RoundedCornerShape(8.dp))
                )
            }
        }
    }

    // 其他商品详情内容
    // ...
}

解决方案二：保留LazyVerticalGrid，通过固有尺寸约束解决 #

如果一定要使用LazyVerticalGrid，可以给外层的Row添加.height(IntrinsicSize.Min) modifier，让Row基于子项的最小固有高度（也就是主图的高度）来确定自身高度，从而给LazyVerticalGrid一个确定的测量约束：

// 外层可滚动Column
Column(
    modifier = Modifier
        .fillMaxSize()
        .verticalScroll(rememberScrollState()),
    verticalArrangement = Arrangement.spacedBy(16.dp),
    padding = PaddingValues(16.dp)
) {
    // 主图+小图网格的Row布局，添加固有尺寸约束
    Row(
        horizontalArrangement = Arrangement.spacedBy(8.dp),
        modifier = Modifier
            .fillMaxWidth()
            .height(IntrinsicSize.Min) // 关键：让Row基于子项最小高度确定自身高度
    ) {
        // 大尺寸主图
        Image(
            painter = painterResource(id = R.drawable.product_main),
            contentDescription = "商品主图",
            modifier = Modifier
                .weight(2f)
                .aspectRatio(1f)
                .clip(RoundedCornerShape(8.dp))
        )

        // LazyVerticalGrid，此时高度被Row约束为确定值
        LazyVerticalGrid(
            columns = GridCells.Fixed(2),
            verticalArrangement = Arrangement.spacedBy(8.dp),
            horizontalArrangement = Arrangement.spacedBy(8.dp),
            modifier = Modifier.weight(1f)
        ) {
            items(4) { index ->
                Image(
                    painter = painterResource(id = R.drawable.product_thumb),
                    contentDescription = "缩略图${index+1}",
                    modifier = Modifier
                        .fillMaxWidth()
                        .aspectRatio(1f)
                        .clip(RoundedCornerShape(8.dp))
                )
            }
        }
    }

    // 其他商品详情内容
    // ...
}

原理说明 #

.height(IntrinsicSize.Min)会让Row先测量所有子项的最小固有高度，然后把自身高度设置为这个值。主图通过.aspectRatio(1f)确定了自身的宽高比，因此会先计算出确定的高度，LazyVerticalGrid就会继承这个高度约束，从而正常完成测量布局，不会触发无限高度的异常。

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