Jetpack Compose：Bottom Sheet展开时主内容偏移效果实现咨询

BottomSheetScaffold本身没有内置参数直接实现主内容随Bottom Sheet展开收缩的效果，但可以通过监听Bottom Sheet的滑动状态，动态调整主内容的缩放或位移来模拟谷歌地图的交互逻辑。

实现步骤 #

1. 初始化并传入BottomSheet的状态对象，用于获取滑动偏移量
2. 根据偏移量计算主内容的缩放比例或位移值，动态应用到主内容组件上

代码示例 #

val bottomSheetState = rememberBottomSheetState(initialValue = BottomSheetValue.Collapsed)

BottomSheetScaffold(
    sheetContent = {
        Box(modifier = Modifier.height(440.dp)) {
            Metermodule()
        }
    },
    sheetPeekHeight = 80.dp,
    sheetElevation = 10.dp,
    sheetState = bottomSheetState, // 关联BottomSheet状态
    content = { padding ->
        // 计算缩放比例：收起时为1.0，完全展开时缩小至0.95（可根据需求调整）
        val scaleFactor = 1f - (bottomSheetState.currentOffset / bottomSheetState.maxOffset) * 0.05f
        
        MapScreen(
            modifier = Modifier
                .padding(padding)
                .scale(scaleFactor)
                .align(Alignment.Center) // 确保主内容始终居中
        )
    }
)

替代方案（位移而非缩放） #

如果更倾向于主内容向上位移而非缩放，可替换为以下逻辑：

val bottomSheetState = rememberBottomSheetState(initialValue = BottomSheetValue.Collapsed)

BottomSheetScaffold(
    // 其他参数保持不变
    sheetState = bottomSheetState,
    content = { padding ->
        // 计算向上位移量：完全展开时移动20dp（可自定义数值）
        val translateY = (bottomSheetState.currentOffset / bottomSheetState.maxOffset) * 20.dp
        
        MapScreen(
            modifier = Modifier
                .padding(padding)
                .translationY(translateY)
        )
    }
)

关键说明 #

• bottomSheetState.currentOffset：获取Bottom Sheet当前的垂直偏移量（收起时为0，完全展开时等于maxOffset的负值）
• bottomSheetState.maxOffset：Bottom Sheet从收起状态到完全展开状态的总偏移距离
• 缩放比例或位移数值可根据视觉需求自行调整，以匹配谷歌地图的交互体验

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