Jetpack Compose：LazyColumn与BottomSheetScaffold嵌套滚动控制问题

要实现「优先滚动LazyColumn，滚至顶部后再允许BottomSheet收起」的效果，核心是通过NestedScrollConnection拦截滚动事件，根据LazyColumn的滚动状态决定是否将事件传递给父级BottomSheet。

完整实现代码 #

@Composable
fun BottomSheetWithLazyColumn() {
    val scaffoldState = rememberBottomSheetScaffoldState()
    val lazyListState = rememberLazyListState()

    // 自定义嵌套滚动连接，控制事件传递逻辑
    val nestedScrollConnection = remember {
        object : NestedScrollConnection {
            override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
                // 判断用户是否在向下滚动（Compose中y轴向下为正，向下拖拽时available.dy为负）
                val isScrollingDown = available.dy < 0
                // 判断LazyColumn是否已滚至顶部
                val isLazyColumnAtTop = lazyListState.firstVisibleItemIndex == 0 &&
                        lazyListState.firstVisibleItemScrollOffset == 0

                return if (isScrollingDown && !isLazyColumnAtTop) {
                    // LazyColumn未到顶，消耗当前滚动事件，不让BottomSheet响应
                    available
                } else {
                    // LazyColumn已到顶，或向上滚动，允许BottomSheet处理事件
                    Offset.Zero
                }
            }
        }
    }

    BottomSheetScaffold(
        scaffoldState = scaffoldState,
        sheetDragHandle = {
            // 可添加拖拽手柄UI，比如一条横线
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(4.dp)
                    .background(Color.Gray)
                    .align(Alignment.CenterHorizontally)
            )
        },
        sheetContent = {
            LazyColumn(
                modifier = Modifier
                    .fillMaxSize()
                    .nestedScroll(nestedScrollConnection),
                state = lazyListState
            ) {
                // 示例列表内容
                items(100) { index ->
                    Text(
                        text = "列表项 $index",
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(horizontal = 16.dp, vertical = 12.dp)
                    )
                }
            }
        }
    ) {
        // 主屏幕内容区域
        Text(
            text = "主内容",
            modifier = Modifier.fillMaxSize().wrapContentSize()
        )
    }
}

关键逻辑说明 #

1. rememberLazyListState()：跟踪LazyColumn的滚动位置，用于判断是否已滚至顶部。
2. NestedScrollConnection的onPreScroll方法：在滚动事件传递给父布局（BottomSheet）前拦截处理：
   • 当用户向下滚动且LazyColumn未到顶时，返回available表示完全消耗当前滚动事件，BottomSheet不会响应。
   • 当LazyColumn已到顶，或用户向上滚动时，返回Offset.Zero，让BottomSheet处理滚动事件。
3. 为什么onPostScroll不生效：onPostScroll是在子布局（LazyColumn）处理完滚动后才触发，此时父布局可能已经响应了滚动事件，无法达到优先滚动子布局的效果，因此必须用onPreScroll提前拦截。

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