Jetpack Compose 进阶：实现列表嵌套悬停（LazyColumn & HorizontalPager）

在 Jetpack Compose 中，处理嵌套滚动（Nested Scrolling）是构建复杂 UI 界面时的常见挑战。特别是当您在一个垂直滚动的列表（LazyColumn）中嵌套了水平分页器（HorizontalPager），而分页器内部又包含了另一个垂直列表（LazyColumn）时，默认的滚动行为往往不符合预期：用户滑动时，总是内部列表优先滚动，而外部的顶部 Header 迟迟不收起。

本文将深入探讨如何利用 Compose 的 NestedScrollConnection，实现**"父级滚动优先"**的机制，确保顶部内容（如大图或 Header）在用户滑动时能立即收起。

💥 遇到的问题：默认的嵌套滚动行为

在以下结构中：

LazyColumn (外部/父级)
  - Item: 顶部 Header/大图
  - StickyHeader: TabRow/悬浮头
  - Item: HorizontalPager (内部/子级)
    - Pager Page 内部：LazyColumn (真正的滚动内容)

默认行为： 用户在内部 LazyColumn 上垂直滑动时，内部列表会优先滚动到其内容边缘，然后滚动事件才会传递给外部 LazyColumn，导致顶部 Header 延迟收起，用户体验不佳。

目标行为： 用户在任何位置垂直滑动时，都应优先 触发外部 LazyColumn 滚动（收起顶部 Header），直到悬浮头粘住，然后内部列表才开始滚动。

🛠️ 解决方案核心：自定义 NestedScrollConnection

Compose 提供了 NestedScrollConnection 接口，允许我们在滚动事件到达子级组件之前（onPreScroll）和惯性动画开始之前（onPreFling）进行拦截和消耗。

我们将创建这个连接，并将其应用于 HorizontalPager 内部的 LazyColumn。

步骤一：定义连接和 Scope

我们需要一个 CoroutineScope 来处理 Fling 动画，以及 LazyColumn 的 LazyListState。

Kotlin

@OptIn(ExperimentalFoundationApi::class, ExperimentalPagerApi::class)
@Composable
fun PrioritizeParentScrollScreen() {
    val outerListState = rememberLazyListState()
    val scope = rememberCoroutineScope() // 用于处理 Fling 动画

    // Pager 的 State
    val pagerState = rememberPagerState(initialPage = 0)

    // 核心：自定义 NestedScrollConnection
    val nestedScrollConnection = remember {
        object : NestedScrollConnection {
            // ... onPreScroll 和 onPreFling 逻辑在此处定义 ...
        }
    }

    // ... LazyColumn 结构 ...
}

步骤二：拦截拖动手势 (onPreScroll)

onPreScroll 处理用户拖动手势产生的滚动。要实现父级优先，我们只需要检查外部列表是否还能滚动，如果能，就消耗掉传入的所有垂直增量。

Kotlin

override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
    // 只有垂直滚动才处理
    if (available.y == 0f) return Offset.Zero

    // 只要外部列表可以滚动，就消耗掉所有的垂直增量
    if (outerListState.canScrollForward || outerListState.canScrollBackward) {
        // 关键：手动 dispatchRawDelta 驱动父级列表滚动
        // 注意：dispatchRawDelta 的参数是像素，且与 available.y 方向相反
        outerListState.dispatchRawDelta(-available.y) 

        // 告知子级：父级已消耗全部 available，你不用动了
        return available 
    }

    // 父级不能滚动，事件传递给子列表
    return Offset.Zero
}

【原理】 ：我们返回了 available，告诉系统父级消耗了所有滚动距离，因此子列表（内部 LazyColumn）不进行任何滚动，事件被用于驱动外部 LazyColumn。

步骤三：拦截惯性滚动 (onPreFling)

onPreFling 处理快速滑动结束后产生的惯性动画。如果仅处理 onPreScroll，Fling 动画将只在子级发生，导致页面闪烁。

在 onPreFling 中，我们需要使用 CoroutineScope 手动启动父级列表的 Fling 动画。

Kotlin

override suspend fun onPreFling(available: Velocity): Velocity {
    // 只有垂直惯性速度才处理
    if (available.y == 0f) return Velocity.Zero

    // 检查父级是否可以滚动
    if (outerListState.canScrollForward || outerListState.canScrollBackward) {
        
        // 关键：在 Coroutine 中启动父级 Fling 动画 (scrollBy 具有惯性效果)
        // 注意：将 Velocity 转换为像素增量，方向相反
        scope.launch {
            outerListState.scrollBy(-available.y)
        }

        // 告知子级：父级已经处理了所有惯性速度，子级不应再处理 Fling
        return available 
    }

    // 父级不能滚动，速度传递给子列表
    return Velocity.Zero
}

【原理】 ：onPreFling 是一个 suspend 函数，我们利用 scope.launch 手动调用 outerListState.scrollBy 来驱动父级进行惯性滚动，并返回 available，阻止惯性速度传递到子列表。

步骤四：在子列表上应用连接

最后，将这个自定义的 nestedScrollConnection 应用到 HorizontalPager 内部的 LazyColumn 上。

Kotlin

@Composable
fun TabContentList(nestedScrollConnection: NestedScrollConnection) {
    LazyColumn(
        // ... state
        modifier = Modifier
            .fillMaxSize()
            // ⭐️ 关键：将连接应用到内部 LazyColumn 上
            .nestedScroll(nestedScrollConnection) 
    ) {
        // ... 内部列表内容
    }
}

🎉 总结

通过自定义 NestedScrollConnection 并覆盖 onPreScroll 和 onPreFling，我们成功地拦截了子级 LazyColumn 的滚动和惯性事件，并将其优先分配给了外部 LazyColumn。

这种模式确保了在用户任何垂直滑动操作下，外部的 Header/大图都能立即收起，直到悬浮头粘住，从而提供了更流畅、符合预期的用户体验。这是在 Jetpack Compose 中构建复杂 App Bar 交互和嵌套列表时，一项非常实用的高级技巧。