如何在Jetpack Compose中为ModalBottomSheet设置最大最小高度

要实现弹窗展开时占屏幕50%-90%的高度，你需要通过自定义SheetState锚点+内容高度限制的组合方式来控制，具体实现如下：

核心步骤 #

• 获取屏幕高度，基于比例计算弹窗的最小/最大高度值
• 给ModalBottomSheetState设置自定义锚点，让弹窗仅在指定高度状态间切换
• 在弹窗内容容器中添加高度范围限制，确保内容适配设定的高度区间

修改后的完整代码 #

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.heightIn
import androidx.compose.material3.ModalBottomSheet
import androidx.compose.material3.SnapOffset
import androidx.compose.material3.SnapSpec
import androidx.compose.material3.rememberModalBottomSheetState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.unit.dp

@Composable
fun CustomHeightModalSheet(
    isClosable: Boolean,
    onBottomSheetDismiss: () -> Unit,
    content: @Composable () -> Unit
) {
    val scope = rememberCoroutineScope()
    val screenHeight = LocalConfiguration.current.screenHeightDp.dp
    val minSheetHeight = screenHeight * 0.5f
    val maxSheetHeight = screenHeight * 0.9f

    // 创建带自定义锚点的SheetState，限定弹窗仅在隐藏/50%/90%高度状态切换
    val previewSheetState = rememberModalBottomSheetState(
        skipPartiallyExpanded = false,
        snapSpec = SnapSpec(
            anchors = listOf(0.dp, minSheetHeight, maxSheetHeight),
            initialAnchor = minSheetHeight,
            snapOffset = SnapOffset.Fixed
        )
    )

    ModalBottomSheet(
        onDismissRequest = {
            if (previewSheetState.isVisible && isClosable) {
                scope.launch {
                    onBottomSheetDismiss()
                    previewSheetState.hide()
                }
            }
        },
        sheetState = previewSheetState,
        modifier = Modifier.fillMaxSize()
    ) {
        // 给内容容器设置高度范围限制，确保内容不会超出设定区间
        Column(
            modifier = Modifier
                .heightIn(min = minSheetHeight, max = maxSheetHeight)
                .fillMaxWidth()
        ) {
            content()
        }
    }
}

关键说明 #

• 屏幕高度适配：通过LocalConfiguration获取设备屏幕高度，避免硬编码数值，适配不同尺寸的设备
• 锚点控制：自定义SnapSpec后，弹窗只会在隐藏、50%屏幕高度、90%屏幕高度这三个状态间切换，用户拖动时会自动吸附到最近的锚点
• 内容高度限制：heightIn修饰符确保弹窗内容的高度不会低于最小高度、超过最大高度，避免内容溢出或高度不足

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