LazyColumn展开卡片时无法自动上滚显示完整高度的问题求助

当前使用animateScrollToItem(index)的方式，在展开最后一张卡片时只能将其滚动到屏幕顶部，无法显示完整的展开高度。需要调整逻辑，让卡片展开后自动滚动至合适位置，确保完整内容可见。

当前代码 #

val listState = rememberLazyListState()
val coroutineScope = rememberCoroutineScope()

LazyColumn(
    state = listState
) {
    itemsIndexed(items) { index, item ->
        ExpandableCard(
            item = item,
            isExpanded = expandedCardsStates[item.id] ?: false,
            onCardClicked = {
                viewModel.expandedState(item.id)
                coroutineScope.launch {
                    listState.animateScrollToItem(index = index)
                }
            }
        )
    }
}

效果对比 #

当前效果 #

预期效果 #

解决方案 #

核心思路是等待卡片展开完成后，根据实际高度计算滚动偏移，而不是直接滚动到item顶部。以下是修改后的代码：

val listState = rememberLazyListState()
val coroutineScope = rememberCoroutineScope()

LazyColumn(
    state = listState
) {
    itemsIndexed(items) { index, item ->
        val isExpanded = expandedCardsStates[item.id] ?: false
        
        ExpandableCard(
            item = item,
            isExpanded = isExpanded,
            onCardClicked = {
                viewModel.expandedState(item.id)
            }
        )

        // 监听展开状态变化，触发自适应滚动
        LaunchedEffect(isExpanded) {
            if (isExpanded) {
                // 等待布局更新，确保卡片已完成展开动画/高度变化
                awaitLayout()
                
                // 获取当前item的布局信息
                listState.layoutInfo.visibleItemsInfo.find { it.index == index }?.let { itemInfo ->
                    // 计算卡片底部超出视口的距离
                    val viewportEnd = listState.layoutInfo.viewportEndOffset
                    val itemBottom = itemInfo.offset + itemInfo.size
                    val overflow = itemBottom - viewportEnd
                    
                    // 如果底部超出视口，滚动相应距离让卡片完整显示
                    if (overflow > 0) {
                        listState.animateScrollBy(overflow.toFloat())
                    }
                }
            }
        }
    }
}

代码说明 #

1. 监听展开状态：通过LaunchedEffect监听isExpanded的变化，仅在卡片展开时执行滚动逻辑
2. 等待布局完成：使用awaitLayout()替代固定延迟，确保Compose已更新卡片的展开高度，避免用旧尺寸计算滚动位置
3. 计算滚动偏移：通过listState.layoutInfo获取视口和卡片的位置尺寸，计算出卡片底部超出视口的距离，然后滚动对应长度，让卡片完整显示在屏幕内

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