Jetpack Compose中ModalBottomSheetLayout切换内容高度异常问题求助

针对你遇到的小屏幕下切换内容出现底部滑落动画异常的问题，试试以下几个针对性方案：

1. 固定BottomSheet最小高度，避免尺寸跳变 #

ModalBottomSheetLayout会根据内容高度自动调整自身高度，切换到更小内容时的高度突变容易触发冲突动画。给内容外层设置最小高度，确保前后高度差可控：

ModalBottomSheetLayout(
    sheetState = sheetState,
    sheetContent = {
        Crossfade(targetState = currentScreen) { screen ->
            when(screen) {
                is FirstScreen -> FirstScreenContent()
                is SecondScreen -> SecondScreenContent()
            }
        }.heightIn(min = 280.dp) // 根据你的内容设置合适的最小高度
    }
) {
    // 主界面内容
}

2. 分离BottomSheet与内容的动画逻辑 #

关闭BottomSheet自带的高度动画，让内容切换动画单独处理，避免两者叠加冲突：

// 用SnapSpec取消BottomSheet的平滑高度动画
val sheetState = rememberModalBottomSheetState(
    initialValue = ModalBottomSheetValue.Expanded,
    animationSpec = SnapSpec()
)

// 内容用AnimatedContent配合animateContentSize实现平滑尺寸变化
ModalBottomSheetLayout(
    sheetState = sheetState,
    sheetContent = {
        AnimatedContent(targetState = currentScreen, transitionSpec = {
            fadeIn() with fadeOut() using SizeTransform(clip = false)
        }) { screen ->
            when(screen) {
                is FirstScreen -> FirstScreenContent()
                is SecondScreen -> SecondScreenContent()
            }
        }.animateContentSize()
    }
) {
    // 主界面内容
}

3. 同步内容切换与BottomSheet状态 #

用LaunchedEffect在内容切换完成后再触发BottomSheet的状态调整，确保动画时序一致：

LaunchedEffect(currentScreen) {
    // 等待内容切换动画完成后，再调整BottomSheet状态
    delay(120)
    sheetState.animateTo(ModalBottomSheetValue.Expanded)
}

// 内容层设置顶部对齐，避免底部空白导致的滑落视觉
ModalBottomSheetLayout(
    sheetState = sheetState,
    sheetContent = {
        Crossfade(targetState = currentScreen) { screen ->
            when(screen) {
                is FirstScreen -> FirstScreenContent()
                is SecondScreen -> SecondScreenContent()
            }
        }.wrapContentHeight(align = Alignment.Top)
    }
) {
    // 主界面内容
}

4. 替换为BottomSheetScaffold（终极方案） #

如果ModalBottomSheetLayout的默认行为限制太多，改用BottomSheetScaffold可以获得更灵活的动画控制：

val sheetState = rememberBottomSheetState(BottomSheetValue.Collapsed)
val scope = rememberCoroutineScope()

BottomSheetScaffold(
    sheetContent = {
        AnimatedContent(targetState = currentScreen) { screen ->
            when(screen) {
                is FirstScreen -> FirstScreenContent()
                is SecondScreen -> SecondScreenContent()
            }
        }.animateContentSize()
    },
    sheetPeekHeight = 0.dp,
    sheetState = sheetState
) {
    Button(onClick = {
        currentScreen = if(currentScreen is FirstScreen) SecondScreen else FirstScreen
        scope.launch { sheetState.expand() }
    }) {
        Text("切换页面")
    }
}

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