Jetpack Compose BottomSheetScaffold多停靠滑动设置问题求助

问题分析 #

你尝试给BottomSheetScaffold添加swipeable修饰符实现多停靠点滑动但未生效，核心原因有三点：

• BottomSheetScaffold内部自带手势处理逻辑，额外添加swipeable会导致手势冲突，无法正常工作。
• 你设置的锚点用了无意义的浮点数（0f、0.5f），没有对应实际屏幕高度的像素值，无法映射正确的滑动位置。
• 默认BottomSheetState仅支持Collapsed和Expanded两种状态，要实现多停靠点必须自定义锚点和状态类型。

解决方案 #

通过自定义状态枚举、计算各停靠点的实际像素位置，结合BottomSheetState的自定义锚点功能，实现初始半屏显示、可下滑至最小高度（92.dp）、上滑至全屏的需求。

步骤1：定义自定义状态枚举 #

创建枚举类明确BottomSheet的三种状态：

enum class CustomBottomSheetValue {
    Minimized,    // 最小折叠状态（92.dp高度）
    HalfExpanded, // 半屏状态
    Expanded      // 全屏状态
}

步骤2：计算各停靠点的像素位置 #

基于屏幕高度计算每个状态对应的sheet顶部偏移量：

val density = LocalDensity.current
val configuration = LocalConfiguration.current
val screenHeightPx = with(density) { configuration.screenHeightDp.dp.toPx() }

// 最小状态：sheet顶部偏移 = 屏幕高度 - 最小高度（92.dp）
val minSheetHeight = 92.dp
val minSheetTopPx = screenHeightPx - with(density) { minSheetHeight.toPx() }

// 半屏状态：sheet顶部偏移 = 屏幕高度的一半
val halfSheetTopPx = screenHeightPx / 2

// 全屏状态：sheet顶部偏移 = 0
val fullSheetTopPx = 0f

步骤3：创建自定义BottomSheetState #

使用rememberBottomSheetState生成支持多状态的实例：

val bottomSheetState = rememberBottomSheetState(
    initialValue = CustomBottomSheetValue.HalfExpanded, // 初始为半屏状态
    anchors = mapOf(
        fullSheetTopPx to CustomBottomSheetValue.Expanded,
        halfSheetTopPx to CustomBottomSheetValue.HalfExpanded,
        minSheetTopPx to CustomBottomSheetValue.Minimized
    ),
    confirmStateChange = { true } // 允许状态自由切换
)

val scaffoldState = rememberBottomSheetScaffoldState(bottomSheetState = bottomSheetState)
val coroutineScope = rememberCoroutineScope()

步骤4：构建BottomSheetScaffold #

移除多余的swipeable修饰符，使用自定义的scaffoldState：

BottomSheetScaffold(
    scaffoldState = scaffoldState,
    sheetContent = {
        Column(Modifier.fillMaxSize()) {
            Text("Sheet content")
        }
    },
    sheetPeekHeight = minSheetHeight, // 最小折叠高度
    sheetShape = RoundedCornerShape(16.dp),
    sheetBackgroundColor = Color.LightGray,
    sheetGesturesEnabled = true,
    modifier = Modifier.fillMaxSize()
) {
    Column(Modifier.fillMaxSize()) {
        TopAppBar(title = { Text("Bottom Sheet Example") })
        Text("Content")
    }
}

关键说明 #

• 无需额外添加swipeable修饰符，BottomSheetScaffold会根据自定义锚点自动处理滑动停靠逻辑。
• 初始状态设为HalfExpanded，满足页面加载时部分可见的需求，用户可上下滑动切换至Minimized或Expanded状态。
• 所有锚点基于实际屏幕高度计算，确保在不同设备上表现一致。

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