如何实现嵌套LazyColumn中子列表滑动时整体页面同步滑动？

示例现象：滑动内层LazyColumn列表时，仅该列表自身滚动，外层LazyColumn页面无法同步上滑。

问题核心 #

多层可滑动组件嵌套（外层LazyColumn → HorizontalPager → 内层LazyColumn）时，滑动事件会被最内层组件优先消费，导致外层组件无法响应滑动操作。

方案一：嵌套滑动事件协调（推荐） #

通过NestedScrollConnection让内层列表滑动到边界时，将剩余滑动事件传递给外层列表，实现联动滑动。

1. 传递外层列表状态到内层 #

在外层RadioStationPage中，将已定义的listState传递给ProgramRankPager，再逐层传递到ProgramRankList：

// RadioStationPage
LazyColumn(state = listState, modifier = Modifier.fillMaxSize()) {
    // ...其他item
    item { ProgramRankPager(outerListState = listState, /* 其他参数 */) }
}

// ProgramRankPager
@Composable
private fun ProgramRankPager(
    outerListState: LazyListState,
    // ...其他参数
) {
    Column(/*...*/) {
        TabRow(/*...*/)
        HorizontalPager(/*...*/) { page ->
            when(page) {
                0 -> ProgramRankList(programStatus = /*...*/, outerListState = outerListState)
                // 其他页面同理
            }
        }
    }
}

2. 给内层LazyColumn添加嵌套滑动连接 #

修改ProgramRankList，通过nestedScroll修饰符协调滑动事件：

@Composable
private fun ProgramRankList(
    programStatus: List<YourBeanType>,
    outerListState: LazyListState
) {
    val nestedScrollConnection = remember {
        object : NestedScrollConnection {
            override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
                // 内层滑到顶部，且向上滑动时，让外层处理
                val outerCanScrollUp = outerListState.canScrollForward || outerListState.firstVisibleItemScrollOffset > 0
                if (!outerCanScrollUp && available.y > 0) {
                    return Offset.Zero // 允许外层消费滑动事件
                }
                // 内层滑到底部，且向下滑动时，让外层处理
                val outerCanScrollDown = outerListState.canScrollBackward
                if (!outerCanScrollDown && available.y < 0) {
                    return Offset.Zero
                }
                return super.onPreScroll(available, source)
            }
        }
    }

    LazyColumn(
        modifier = Modifier
            .fillMaxSize()
            .nestedScroll(nestedScrollConnection),
        state = rememberLazyListState()
    ) {
        items(programStatus) { item ->
            item?.let { bean ->
                ProgramRankListItem(/*...*/)
            }
        }
    }
}

方案二：调整布局结构（更优架构） #

如果内层列表不需要独立滑动，可重构布局避免嵌套滑动：

1. 将TabRow作为外层LazyColumn的一个独立item
2. 移除内层LazyColumn，根据HorizontalPager的当前页面，动态在外层LazyColumn中加载对应列表项

这种方式从根源消除滑动冲突，但需要同步处理页面切换时的列表状态，适合无需内层独立滑动的场景。

方案三：禁用内层滑动 #

如果内层列表不需要用户手动滑动，直接禁用其滑动能力，让外层全权处理：

@Composable
private fun ProgramRankList(programStatus: List<YourBeanType>) {
    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        state = rememberLazyListState(),
        userScrollEnabled = false // 禁用内层滑动
    ) {
        items(programStatus) { item ->
            item?.let { bean ->
                ProgramRankListItem(/*...*/)
            }
        }
    }
}

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