Jetpack Compose中如何为Persistent Bottom Sheet添加顶部可折叠触发视图？

核心原因 #

默认Divider高度极窄，点击区域过小，且Bottom Sheet自身的手势处理会优先拦截触摸事件，导致clickable逻辑无法触发。

修复方案 #

1. 扩大点击区域并处理状态切换 #

将Divider与TextView包裹在父容器中，给父容器添加点击事件，同时通过协程控制Bottom Sheet的展开/折叠状态：

val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = false)
val scope = rememberCoroutineScope()

ModalBottomSheet(
    sheetState = sheetState,
    onDismissRequest = { /* 关闭Bottom Sheet逻辑 */ },
    sheetContent = {
        Column {
            // 可点击的顶部栏（包含Divider和标题）
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .clickable {
                        scope.launch {
                            // 切换展开/折叠状态
                            if (sheetState.isExpanded) {
                                sheetState.partialExpand()
                            } else {
                                sheetState.expand()
                            }
                        }
                    }
                    .padding(vertical = 8.dp)
            ) {
                Divider(modifier = Modifier.fillMaxWidth())
                Text(
                    text = "用户列表",
                    modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp),
                    style = MaterialTheme.typography.titleMedium
                )
            }

            // 用户列表区域
            Box(modifier = Modifier.fillMaxWidth()) {
                LazyColumn {
                    items(20) { index ->
                        Text(
                            text = "用户 $index",
                            modifier = Modifier.padding(16.dp),
                            style = MaterialTheme.typography.bodyLarge
                        )
                    }
                }
            }
        }
    }
)

2. 关键细节说明 #

• 给父容器加clickable而非直接给Divider，解决了Divider点击区域过小的问题，同时让整个顶部栏都能响应点击。
• 使用rememberCoroutineScope启动协程，因为sheetState的expand()、partialExpand()都是挂起函数，必须在协程中调用。
• 初始化sheetState时设置skipPartiallyExpanded = false，确保Bottom Sheet支持部分展开状态，才能实现折叠效果。

3. 额外优化：增强拖拽提示 #

如果需要更直观的拖拽视觉提示，可以自定义顶部Divider样式：

Column(
    modifier = Modifier
        .fillMaxWidth()
        .clickable { /* 切换状态逻辑 */ }
        .padding(vertical = 8.dp),
    horizontalAlignment = Alignment.CenterHorizontally
) {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.Center
    ) {
        Divider(
            modifier = Modifier.width(40.dp),
            thickness = 4.dp,
            color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.3f)
        )
    }
    Text(
        text = "用户列表",
        modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp),
        style = MaterialTheme.typography.titleMedium
    )
}

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