Jetpack Compose BottomsheetScaffold默认展开时弹窗异常置顶问题

当设置BottomSheetScaffold默认状态为BottomSheetValue.Expanded时，弹窗会先出现在屏幕顶部再滑到正确底部位置，根源是直接实例化BottomSheetState没有正确处理初始布局位置。

解决方案 #

• 放弃直接创建BottomSheetState实例，改用rememberBottomSheetState记忆状态，它会正确处理初始位置的布局逻辑
• 配合skipHiddenState = true（因sheetPeekHeight设为0dp，隐藏状态和折叠状态视觉等价，跳过可避免不必要的状态过渡）

修改后的代码 #

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun testBottomsheet(){
    val scope = rememberCoroutineScope()
    val bottomSheetScaffoldState = rememberBottomSheetScaffoldState(
        drawerState = rememberDrawerState(DrawerValue.Open),
        bottomSheetState = rememberBottomSheetState(
            initialValue = BottomSheetValue.Expanded,
            skipHiddenState = true
        ),
    )
    BottomSheetScaffold(
        scaffoldState = bottomSheetScaffoldState,
        sheetContent = {
            Box(
                Modifier
                    .fillMaxWidth()
                    .height(200.dp)
            ) {
                Text(text = "Hello from sheet")
            }
        }, 
        sheetPeekHeight = 0.dp
    ) {
        Button(onClick = {
            scope.launch {
                if (bottomSheetScaffoldState.bottomSheetState.isExpanded) {
                    bottomSheetScaffoldState.bottomSheetState.collapse()
                } else {
                    bottomSheetScaffoldState.bottomSheetState.expand()
                }
            }
        }) {
            Text(text = "Expand/Collapse Bottom Sheet")
        }
    }
}

关键说明 #

• rememberBottomSheetState：Compose提供的状态记忆API，初始化时会直接计算并渲染底部弹窗的正确位置，消除从顶部滑入的异常动画
• skipHiddenState = true：由于sheetPeekHeight为0，折叠状态和隐藏状态无视觉差异，跳过隐藏状态能让状态切换更流畅，同时避免初始阶段的无效过渡
• 展开/折叠逻辑：借助rememberCoroutineScope()获取协程作用域，在点击事件中通过协程控制弹窗状态切换

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