Compose中如何阻止ModalBottomSheet随列表滚动下滑

你的问题根源是LazyColumn的滚动事件和ModalBottomSheet的拖拽事件发生冲突，导致滚动列表时弹窗跟着滑动。要让弹窗固定在指定高度，仅通过关闭图标触发关闭，可按以下方式修改代码：

修改后的完整代码 #

var isClosable by remember { mutableStateOf(false) }
val scope = rememberCoroutineScope()

val previewSheetState = rememberModalBottomSheetState(
    initialValue = SheetValue.Expanded,
    skipPartiallyExpanded = true,
    enableDrag = false, // 禁止拖拽调整弹窗状态
    confirmValueChange = { sheetValue ->
        // 仅允许关闭操作的状态变更
        sheetValue == SheetValue.Hidden && isClosable
    }
)

ModalBottomSheet(
    onDismissRequest = {
        scope.launch {
            isClosable = true
            onBottomSheetDismiss(false)
            previewSheetState.hide()
        }
    },
    sheetState = previewSheetState,
    dragHandle = {
        Column {
            Row(
                Modifier
                    .fillMaxWidth()
                    .background(Color.White)
                    .padding(start = 15.dp, top = 5.dp, end = 10.dp),
                Arrangement.SpaceBetween,
                Alignment.CenterVertically
            ) {
                Text(
                    text = "Hello",
                    fontSize = 15.sp,
                    fontWeight = FontWeight.SemiBold
                )

                Icon(
                    imageVector = Icons.Default.Close,
                    contentDescription = "Close",
                    tint = Color.Black,
                    modifier = Modifier
                        .size(20.dp)
                        .clickable(
                            interactionSource = remember { MutableInteractionSource() },
                            indication = null
                        ) {
                            scope.launch {
                                isClosable = true
                                onBottomSheetDismiss(false)
                                previewSheetState.hide()
                            }
                        }
                )
            }
            HorizontalDivider(thickness = 1.dp, modifier = Modifier.fillMaxWidth())
        }
    },
    containerColor = Color.Transparent
) {
    // 固定弹窗内容高度，实现指定高度需求
    Box(modifier = Modifier.height(400.dp)) {
        LazyColumn {
            items(50) { index ->
                Text(text = "列表项 $index", modifier = Modifier.padding(16.dp))
            }
        }
    }
}

关键修改说明 #

• 禁用拖拽交互：在rememberModalBottomSheetState中设置enableDrag = false，彻底阻止弹窗响应拖拽操作，避免和LazyColumn的滚动冲突。
• 固定初始状态：设置initialValue = SheetValue.Expanded，确保弹窗默认完全展开。
• 限制状态变更：confirmValueChange中仅允许关闭（SheetValue.Hidden）的状态变更，进一步确保弹窗状态不会被意外修改。
• 指定弹窗高度：通过给LazyColumn外层的Box设置固定height，精确控制弹窗的展示高度，替代原来的padding(top=80.dp)方式，更直观可控。

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