如何在Jetpack Compose中拖拽Material3 ModalBottomSheet至全屏

要让ModalBottomSheet支持向上拖拽最大化至全屏，核心是利用Material3的多锚点状态管理——默认的SheetState仅配置了关闭和初始展开状态，需添加全屏锚点并允许状态切换。

修改步骤： #

1. 配置多锚点SheetState
   初始化rememberModalBottomSheetState时，指定初始状态为部分展开，同时关闭skipPartiallyExpanded参数，让Sheet支持在「部分展开」「全屏展开」「隐藏」三个状态间切换。

2. 自适应内容展示
   根据Sheet的当前状态调整布局：部分展开时显示基础信息，全屏时展示更多内容；也可直接让内容填充可用空间，自动适配不同状态。

修改后的完整代码： #

@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
@OptIn(ExperimentalMaterial3Api::class)
@Composable
private fun Content(
    onDismissClicked: () -> Unit
) {
    // 配置支持多锚点的Sheet状态：初始部分展开，允许切换到全屏
    val sheetState = rememberModalBottomSheetState(
        initialValue = ModalBottomSheetValue.PartiallyExpanded,
        skipPartiallyExpanded = false
    )

    Scaffold(
        containerColor = Color.Transparent,
        modifier = Modifier.testTag(SCAFFOLD)
    ) { _ ->
        ModalBottomSheet(
            onDismissRequest = { onDismissClicked() },
            sheetState = sheetState,
            modifier = Modifier.testTag(BOTTOM_SHEET)
        ) {
            // 根据Sheet状态切换内容，带平滑过渡动画
            AnimatedContent(targetState = sheetState.currentValue, label = "") { state ->
                when (state) {
                    ModalBottomSheetValue.PartiallyExpanded -> {
                        // 原基础信息布局
                        Row(
                            modifier = Modifier.height(128.dp),
                            horizontalArrangement = Arrangement.spacedBy(10.dp),
                            verticalAlignment = Alignment.Top
                        ) {
                            Icon(
                                painter = painterResource(id = R.drawable.ic_point),
                                contentDescription = null,
                                modifier = Modifier
                                    .size(38.dp)
                                    .padding(start = 10.dp)
                                    .testTag(POINT_ICON)
                            )
                            Text(
                                text = "Test",
                                fontSize = 28.sp,
                                modifier = Modifier.testTag(POINT_TITLE)
                            )
                        }
                    }
                    ModalBottomSheetValue.Expanded -> {
                        // 全屏状态下的更多内容
                        Column(
                            modifier = Modifier.fillMaxSize().padding(16.dp),
                            verticalArrangement = Arrangement.Top
                        ) {
                            Icon(
                                painter = painterResource(id = R.drawable.ic_point),
                                contentDescription = null,
                                modifier = Modifier
                                    .size(38.dp)
                                    .padding(bottom = 16.dp)
                                    .testTag(POINT_ICON)
                            )
                            Text(
                                text = "Test",
                                fontSize = 28.sp,
                                modifier = Modifier.testTag(POINT_TITLE)
                            )
                            Spacer(modifier = Modifier.height(24.dp))
                            // 新增更多信息组件
                            Text(text = "更多详情内容1", fontSize = 16.sp)
                            Text(text = "更多详情内容2", fontSize = 16.sp)
                            Text(text = "更多详情内容3", fontSize = 16.sp)
                        }
                    }
                    else -> {} // 隐藏状态无需处理
                }
            }
        }
    }
}

关键说明： #

• skipPartiallyExpanded = false：开启部分展开与全屏展开的状态切换，默认值为true会跳过部分展开直接到全屏。
• AnimatedContent：为状态切换添加平滑过渡动画，优化用户体验。
• 内容布局：可针对不同状态单独设计UI，也可直接让内容fillMaxSize()，自动适配不同状态的空间。

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