Jetpack Compose：LazyColumn嵌套LazyVerticalGrid的滚动问题优化

解决这个问题的核心是避免Lazy容器嵌套（LazyColumn 套 LazyVerticalGrid），因为Lazy系列组件都需要父级提供明确的可用高度，嵌套时父级LazyColumn的无限高度会导致子级LazyVerticalGrid无法计算自身尺寸，最终引发崩溃。

推荐两种无需固定高度的实现方式：

方式一：可滚动Column + 权重分配（最简洁） #

将整个页面放在带垂直滚动的Column中，通过Modifier.weight(1f)让LazyVerticalGrid自动占据标题和LazyRow之外的剩余空间：

@Composable
fun SingleScreenLayout() {
    val scrollState = rememberScrollState()
    
    Column(
        modifier = Modifier
            .fillMaxSize()
            .verticalScroll(scrollState)
    ) {
        // 标题组件
        Text(
            text = "标题",
            fontSize = 24.sp,
            modifier = Modifier.padding(16.dp)
        )

        // LazyVerticalGrid：用weight占据剩余空间
        LazyVerticalGrid(
            columns = GridCells.Fixed(2),
            modifier = Modifier
                .weight(1f)
                .fillMaxWidth(),
            contentPadding = PaddingValues(8.dp)
        ) {
            items(20) { index ->
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(100.dp)
                        .background(Color.LightGray)
                        .padding(8.dp),
                    contentAlignment = Alignment.Center
                ) {
                    Text(text = "Grid Item $index")
                }
            }
        }

        // LazyRow：放在底部
        Text(
            text = "横向滚动列表",
            fontSize = 18.sp,
            modifier = Modifier.padding(start = 16.dp, top = 16.dp, bottom = 8.dp)
        )
        LazyRow(
            modifier = Modifier.fillMaxWidth(),
            contentPadding = PaddingValues(horizontal = 16.dp)
        ) {
            items(15) { index ->
                Box(
                    modifier = Modifier
                        .width(120.dp)
                        .height(80.dp)
                        .background(Color.Blue.copy(alpha = 0.5f))
                        .padding(8.dp)
                        .margin(end = 8.dp),
                    contentAlignment = Alignment.Center
                ) {
                    Text(text = "Row Item $index")
                }
            }
        }
    }
}

原理说明： #

• Column配合verticalScroll实现整页滚动，替代原有的LazyColumn嵌套。
• Modifier.weight(1f)强制LazyVerticalGrid填充标题和LazyRow之外的所有可用垂直空间，无需固定高度。
• LazyVerticalGrid和LazyRow内部的滚动逻辑不受影响，各自独立工作。

方式二：ConstraintLayout（更灵活的布局控制） #

如果需要更精细的位置控制，可以用ConstraintLayout：

@Composable
fun SingleScreenWithConstraintLayout() {
    val scrollState = rememberScrollState()
    ConstraintLayout(
        modifier = Modifier
            .fillMaxSize()
            .verticalScroll(scrollState)
    ) {
        val (title, grid, rowTitle, row) = createRefs()

        // 标题
        Text(
            text = "标题",
            fontSize = 24.sp,
            modifier = Modifier
                .padding(16.dp)
                .constrainAs(title) {
                    top.linkTo(parent.top)
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                }
        )

        // LazyVerticalGrid
        LazyVerticalGrid(
            columns = GridCells.Fixed(2),
            modifier = Modifier
                .fillMaxWidth()
                .constrainAs(grid) {
                    top.linkTo(title.bottom)
                    bottom.linkTo(rowTitle.top)
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                    height = Dimension.fillToConstraints // 填充上下约束间的空间
                },
            contentPadding = PaddingValues(8.dp)
        ) {
            items(20) { index ->
                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(100.dp)
                        .background(Color.LightGray)
                        .padding(8.dp),
                    contentAlignment = Alignment.Center
                ) {
                    Text(text = "Grid Item $index")
                }
            }
        }

        // 横向列表标题
        Text(
            text = "横向滚动列表",
            fontSize = 18.sp,
            modifier = Modifier
                .padding(start = 16.dp, top = 16.dp, bottom = 8.dp)
                .constrainAs(rowTitle) {
                    top.linkTo(grid.bottom)
                    start.linkTo(parent.start)
                }
        )

        // LazyRow
        LazyRow(
            modifier = Modifier
                .fillMaxWidth()
                .constrainAs(row) {
                    top.linkTo(rowTitle.bottom)
                    bottom.linkTo(parent.bottom)
                    start.linkTo(parent.start)
                    end.linkTo(parent.end)
                },
            contentPadding = PaddingValues(horizontal = 16.dp)
        ) {
            items(15) { index ->
                Box(
                    modifier = Modifier
                        .width(120.dp)
                        .height(80.dp)
                        .background(Color.Blue.copy(alpha = 0.5f))
                        .padding(8.dp)
                        .margin(end = 8.dp),
                    contentAlignment = Alignment.Center
                ) {
                    Text(text = "Row Item $index")
                }
            }
        }
    }
}

原理说明： #

通过Dimension.fillToConstraints让LazyVerticalGrid自动填充标题和横向列表标题之间的垂直空间，同样无需固定高度，同时保持整页可滚动。

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