如何在Column与LazyVerticalGrid间共享ScrollState？

问题原因分析 #

你遇到的IllegalStateException是因为垂直滚动组件嵌套导致的测量约束冲突：LazyVerticalGrid本身是可滚动组件，当它被放在带有verticalScroll修饰符的Column中时，Column会给子组件提供无限高度的约束，而LazyVerticalGrid需要确定的高度才能正确完成测量，因此触发报错。设置固定高度后，LazyVerticalGrid会成为独立的滚动区域，无法与外层Column的ScrollState联动。

解决方案 #

要实现整个页面统一滚动并共享状态驱动动画，必须让LazyVerticalGrid作为页面唯一的滚动容器，将头部的非网格内容（如编辑按钮、标题）作为网格的跨列item，并使用LazyVerticalGrid的LazyListState替代ScrollState来共享滚动状态。

修改后的核心代码 #

1. 替换滚动状态类型

将原来的ScrollState替换为LazyListState（Lazy系列组件专用的滚动状态）：

import androidx.compose.foundation.lazy.grid.LazyListState
import androidx.compose.foundation.lazy.grid.rememberLazyListState

@Composable
fun TwitterCollapsingToolbar() {
    val scrollState = rememberLazyListState() // 替换为LazyListState
    val titleHeight = remember { mutableStateOf(0f) }
    val collapseRangePx = with(LocalDensity.current) { collapseRange.toPx() }
    val avatarSizePx = with(LocalDensity.current) { avatarSize.toPx() }
    val profileNameTopPaddingPx = with(LocalDensity.current) { paddingSmall.toPx() }
    val paddingMediumPx = with(LocalDensity.current) { paddingMedium.toPx() }

    // 计算折叠状态：当头部占位item的滚动偏移超过折叠范围时触发
    val collapseRangeReached = remember {
        derivedStateOf {
            scrollState.firstVisibleItemIndex == 0 && 
            scrollState.firstVisibleItemScrollOffset >= collapseRangePx
        }
    }

    // 计算折叠进度：处理滚动过头部后的状态
    val collapseFraction = remember(scrollState) {
        derivedStateOf {
            if (scrollState.firstVisibleItemIndex > 0) {
                1f // 完全折叠
            } else {
                (scrollState.firstVisibleItemScrollOffset / collapseRangePx).coerceIn(0f, 1f)
            }
        }
    }

    val avatarZIndex = remember {
        derivedStateOf {
            if (collapseRangeReached.value) 0f else 2f
        }
    }

    Scaffold() { padding ->
        Box(modifier = Modifier.fillMaxSize()) {
            // 移除原有的verticalScroll Column，直接用LazyVerticalGrid作为滚动容器
            LazyVerticalGrid(
                columns = GridCells.Fixed(2),
                state = scrollState, // 绑定共享的滚动状态
                horizontalArrangement = Arrangement.spacedBy(16.dp),
                verticalArrangement = Arrangement.spacedBy(16.dp),
                contentPadding = PaddingValues(16.dp),
                modifier = Modifier.fillMaxSize()
            ) {
                // 占位头部高度的item，让网格内容从头部下方开始
                item(span = { GridItemSpan(maxLineSpan) }) {
                    Spacer(Modifier.height(headerHeight))
                }
                // 编辑按钮（跨列显示）
                item(span = { GridItemSpan(maxLineSpan) }) {
                    Text(
                        text = stringResource(id = R.string.edit_profile),
                        color = Gray,
                        fontSize = 14.sp,
                        fontWeight = FontWeight.Bold,
                        modifier = Modifier
                            .align(Alignment.End)
                            .padding(horizontal = 12.dp, vertical = 8.dp)
                            .border(1.dp, Gray, RoundedCornerShape(20.dp))
                            .padding(horizontal = 16.dp, vertical = 8.dp)
                    )
                }
                // 原有的Title（跨列显示）
                item(span = { GridItemSpan(maxLineSpan) }) {
                    Text(
                        text = "Title",
                        modifier = Modifier
                            .padding(top = paddingSmall, start = paddingMedium)
                            .onGloballyPositioned {
                                titleHeight.value = it.size.height.toFloat()
                            }
                    )
                }
                // 原有的Items标题（跨列显示）
                item(span = { GridItemSpan(maxLineSpan) }) {
                    Text("Items")
                }
                // 网格内容
                items(20) { index ->
                    ItemListItem()
                }
            }

            // 以下组件保持原有逻辑，仅调整滚动状态的使用方式
            Header(scrollState, collapseRangePx, collapseFraction, Modifier.zIndex(1f), collapseRangeReached)
            Avatar(
                scrollState,
                collapseRangePx,
                paddingMediumPx,
                collapseFraction,
                collapseRangeReached,
                avatarZIndex
            )
            Toolbar(
                scrollState,
                collapseRangePx,
                titleHeight,
                avatarSizePx,
                profileNameTopPaddingPx,
                collapseRangeReached,
                Modifier.zIndex(3f).statusBarsPadding()
            )
            ToolbarActions(Modifier.zIndex(4f).statusBarsPadding())
        }
    }
}

2. 调整动画组件的滚动状态参数

以Header组件为例，修改为使用LazyListState和计算好的collapseFraction：

@Composable
fun Header(
    scrollState: LazyListState,
    collapseRangePx: Float,
    collapseFraction: State<Float>,
    modifier: Modifier,
    showToolbar: State<Boolean>
) {
    AnimatedVisibility(
        visible = !showToolbar.value,
        enter = fadeIn(animationSpec = tween(600)),
        exit = fadeOut(animationSpec = tween(600)),
        modifier = modifier
    ) {
        Box(
            modifier = modifier
                .fillMaxWidth()
                .height(headerHeight)
                .graphicsLayer {
                    val fraction = collapseFraction.value
                    val yTranslation = lerp(0.dp, -(headerHeight - toolbarHeight), fraction)
                    translationY = yTranslation.toPx()

                    val blur = lerp(0.dp, 3.dp, fraction)
                    if (blur != 0.dp) {
                        renderEffect = BlurEffect(blur.toPx(), blur.toPx(), TileMode.Decal)
                    }
                }
        ) {
            Image(
                painter = painterResource(id = R.drawable.ic_launcher_background),
                contentDescription = "",
                contentScale = ContentScale.Crop,
                modifier = Modifier.fillMaxWidth()
            )
        }
    }
}

关键说明 #

• 整个页面只有LazyVerticalGrid一个滚动容器，避免了嵌套滚动的测量冲突。
• LazyListState的firstVisibleItemIndex和firstVisibleItemScrollOffset可以准确获取滚动位置，驱动所有动画逻辑。
• 头部非网格内容通过GridItemSpan(maxLineSpan)实现跨列显示，保持原有布局结构。

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