如何阻止M3 Compose ModalBottomSheet在内部LazyColumn快速滑动时脱离？

问题说明 #

使用androidx.compose.material3:material3-android:1.2.0-alpha02版本的ModalBottomSheet，内部嵌套LazyColumn组件。当快速上下滑动（fling）列表内容时，底部弹窗会短暂从顶部或底部偏移，需要让弹窗始终固定在全屏状态。

解决方案 #

方案一：禁用ModalBottomSheet的拖拽功能 #

如果底部弹窗为固定全屏显示，无需用户拖拽调整位置，直接禁用弹窗的拖拽交互是最直接的解决方式：

// 创建底部弹窗状态时配置禁用拖拽
val bottomSheetState = rememberModalBottomSheetState(
    initialValue = ModalBottomSheetValue.Expanded,
    skipHalfExpanded = true,
    isDraggable = false // 关键：阻止弹窗响应拖拽事件
)

// 渲染ModalBottomSheet
ModalBottomSheet(
    onDismissRequest = { /* 弹窗关闭逻辑 */ },
    sheetState = bottomSheetState
) {
    BottomSheetContent() // 自定义弹窗内容组件
}

此方案从根源上避免弹窗被拖拽偏移，子列表的fling操作不会触发弹窗位置变化。

方案二：拦截嵌套滚动事件，阻止fling传递给父容器 #

若需保留弹窗的拖拽关闭功能，可通过自定义NestedScrollConnection拦截子列表的fling速度，阻止父容器（ModalBottomSheet）响应：

@Composable
fun GenresSection(
    selectedGenres: List<Genre>,
    modifier: Modifier = Modifier,
) {
    val nestedScrollConnection = remember {
        object : NestedScrollConnection {
            override suspend fun onPreFling(available: Velocity): Velocity {
                // 消耗全部fling速度，不传递给父容器
                return available
            }

            override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
                // 拦截fling类型的垂直滚动事件
                return if (source == NestedScrollSource.Fling) {
                    available.copy(x = 0f) // 仅保留水平滚动（如有），消耗垂直滚动
                } else {
                    Offset.Zero
                }
            }
        }
    }

    LazyColumn(
        modifier = modifier
            .height(400.dp)
            .nestedScroll(nestedScrollConnection)
    ) {
        items(selectedGenres) { genre ->
            GenreChoiceRow(
                text = genre.name,
                modifier = Modifier.animateItemPlacement()
            )
        }
    }
}

同时需修正弹窗内容的嵌套滚动冲突：移除父级Column的verticalScroll修饰符，避免与内部LazyColumn的滚动行为冲突：

@Composable
fun BottomSheetContent() {
    Column(modifier = Modifier.fillMaxSize()) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 16.dp)
                .weight(1f)
            // 移除此处的verticalScroll修饰符
        ) {
            GenresSection(
                selectedGenres = selectedGenres,
            )
        }
        ResetAllAndApplyFilterButtonsRow(
            modifier = Modifier
                .fillMaxWidth()
                .padding(vertical = 16.dp, horizontal = 16.dp)
        )
    }
}

关键提示 #

1. 避免嵌套滚动冲突：同一垂直方向内不要同时存在多个滚动容器（如verticalScroll和LazyColumn），否则会导致滚动事件传递混乱。
2. 按需选择方案：固定全屏弹窗优先使用方案一；需保留拖拽关闭功能时使用方案二。

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