Jetpack Compose嵌套滚动可折叠Header失效：列表无法滚动问题排查

问题描述 #

尝试通过嵌套滚动实现LazyColumn滚动时Header的折叠/展开功能，但目前仅能实现Header的折叠/展开，列表完全无法滚动，代码如下：

@Composable
fun ScrollableScreenWithCollapsibleHeader() {
val headerHeight = 150.dp // Initial header height
var headerOffset by remember { mutableStateOf(0f) }
val nestedScrollConnection = remember {
    object : NestedScrollConnection {
        override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
            val delta = available.y
            val newOffset = headerOffset + delta
            headerOffset = newOffset.coerceIn(0f, headerHeight.value)
            return Offset(x = 0f, y = newOffset - headerOffset)
        }
    }
}

Box(modifier = Modifier.fillMaxSize()) {
    LazyColumn(
        modifier = Modifier
            .fillMaxSize()
            .nestedScroll(nestedScrollConnection)
            .padding(top = headerHeight) // Add padding for the header
    ) {
        items(items) { item ->
            Text(item, modifier = Modifier.padding(16.dp))
        }
    }

    MyHeader(
        modifier = Modifier
            .fillMaxWidth()
            .height(headerHeight)
            .offset { IntOffset(x = 0, y = headerOffset.toInt()) }
    )
}


@Composable
fun MyHeader(modifier: Modifier = Modifier) {
// ... Your header content here ...
Box(modifier = modifier.background(Color.LightGray)) {
    Text("Header", modifier = Modifier.padding(16.dp))
}
}

错误原因分析 #

1. 偏移范围逻辑颠倒：offset的y轴向下为正，折叠Header需要向上偏移（y为负值），但你将headerOffset限制在0f到headerHeight.value之间，导致Header只能向下移动，不符合折叠逻辑。
2. 滚动消耗计算错误：onPreScroll返回的是当前组件消耗的滚动量，你之前返回的newOffset - headerOffset实际为0（因为headerOffset已修正为合法值），导致所有滚动偏移被“无效消耗”，LazyColumn无法获取剩余偏移进行滚动。
3. 列表位置设置不合理：padding(top = headerHeight)让列表始终固定在Header下方，Header折叠后会留出空白，且未同步列表的位置偏移。

修正后的代码 #

@Composable
fun ScrollableScreenWithCollapsibleHeader(items: List<String>) {
    val headerHeight = 150.dp
    // 将dp转换为像素值，方便偏移计算
    val headerHeightPx = with(LocalDensity.current) { headerHeight.toPx() }
    // 0: Header完全展开，-headerHeightPx: Header完全折叠
    var headerOffset by remember { mutableStateOf(0f) }

    val nestedScrollConnection = remember {
        object : NestedScrollConnection {
            override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
                // available.y > 0 表示向下滚动，available.y < 0 表示向上滚动
                val delta = available.y
                val newOffset = headerOffset + delta
                // 限制偏移范围，确保Header不会超出折叠/展开边界
                headerOffset = newOffset.coerceIn(-headerHeightPx, 0f)
                // 计算实际消耗的滚动量：delta减去超出边界的剩余偏移
                val consumed = delta - (newOffset - headerOffset)
                return Offset(0f, consumed)
            }
        }
    }

    Box(modifier = Modifier.fillMaxSize()) {
        LazyColumn(
            modifier = Modifier
                .fillMaxSize()
                .nestedScroll(nestedScrollConnection)
                // 让列表随Header的偏移同步移动
                .offset { IntOffset(x = 0, y = headerOffset.toInt()) },
            // 内容顶部留白，避免列表项被Header遮挡
            contentPadding = PaddingValues(top = headerHeight)
        ) {
            items(items) { item ->
                Text(item, modifier = Modifier.padding(16.dp))
            }
        }

        MyHeader(
            modifier = Modifier
                .fillMaxWidth()
                .height(headerHeight)
                .offset { IntOffset(x = 0, y = headerOffset.toInt()) }
        )
    }
}

@Composable
fun MyHeader(modifier: Modifier = Modifier) {
    Box(modifier = modifier.background(Color.LightGray)) {
        Text("Header", modifier = Modifier.padding(16.dp))
    }
}

关键修正点说明 #

• 调整偏移范围：将headerOffset的范围改为-headerHeightPx到0f，符合向上折叠、向下展开的逻辑。
• 正确计算滚动消耗：返回Header实际消耗的滚动量，剩余偏移会自动传递给LazyColumn，实现列表滚动。
• 同步列表位置：通过offset让LazyColumn随Header偏移同步移动，结合contentPadding保证列表项不被遮挡。

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