如何在Jetpack Compose的ModalBottomSheet中实现可滚动Column？

问题根源 #

ModalBottomSheet自带的拖拽展开/收起手势会优先拦截触摸事件，尤其是当Sheet支持部分展开状态时，上滑操作会被识别为调整Sheet位置的指令，而非内部内容的滚动请求，导致长内容无法正常滚动。

修复方案 #

1. 禁用Sheet的部分展开状态 #

创建ModalBottomSheetState时开启skipPartiallyExpanded参数，让Sheet仅保留完全展开和隐藏两种状态，避免手势冲突。

2. 调整内部滚动容器的修饰符 #

移除fillMaxHeight()，改用fillMaxWidth()让内容自适应高度，再添加垂直滚动修饰符；若需要限制Sheet最大高度，可配合heightIn指定上限。

修复后的完整代码 #

// 外部组件中管理Sheet显示状态，需用remember包裹以保持状态稳定
val showBottomSheet = remember { mutableStateOf(false) }

@Composable
@OptIn(ExperimentalMaterial3Api::class)
fun LongContentBottomSheet() {
    val scrollState = rememberScrollState()
    // 禁用部分展开状态，避免手势冲突
    val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)

    if (showBottomSheet.value) {
        ModalBottomSheet(
            onDismissRequest = { showBottomSheet.value = false },
            sheetState = sheetState
        ) {
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .verticalScroll(scrollState)
                    // 可选：限制Sheet最大高度为屏幕高度，避免短内容占满屏幕
                    .heightIn(max = LocalConfiguration.current.screenHeightDp.dp)
            ) {
                // 超长内容示例
                repeat(50) {
                    Text("Hello", fontSize = 96.sp)
                    Text("World!", fontSize = 96.sp)
                }
            }
        }
    }
}

补充说明 #

• 若必须保留部分展开状态，可通过nestedScroll修饰符手动处理手势优先级，但实现复杂度较高，优先推荐禁用部分展开状态的方案。
• 确保showBottomSheet状态用remember包裹，避免组件重组时重复初始化状态。

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