Compose实现软键盘上方全屏内容显示并保留过渡效果的方案

完全可以仅用Compose实现需求，核心是让全屏的ImageViewer和原界面（Scaffold）处于同一个组合树中，同时通过WindowInsets监听软键盘的高度，动态调整ImageViewer的布局，既保留共享元素过渡能力，又让内容显示在软键盘上方。

具体实现方案 #

1. 用Box包裹Scaffold和ImageViewer，确保两者在同一个组合层级（避免新Window导致的组合隔离）
2. 给ImageViewer添加WindowInsets相关的padding，让它自动避开软键盘和系统栏

代码示例

Box(modifier = Modifier.fillMaxSize()) {
    // 原界面的Scaffold，保持原有imePadding逻辑
    Scaffold(
        modifier = Modifier.imePadding(),
        topBar = { /* 你的顶部栏实现 */ },
        content = { scaffoldPadding ->
            // 原内容区域，使用Scaffold提供的内边距
            Box(modifier = Modifier.padding(scaffoldPadding)) {
                // 你的业务内容，包含共享元素过渡的源组件
            }
        },
        bottomBar = { /* 你的底部栏实现 */ }
    )

    // 全屏显示的ImageViewer，放在Scaffold上层
    ImageViewer(
        modifier = Modifier
            .fillMaxSize()
            // 合并系统栏和软键盘的Insets，让内容自动避开这些区域
            .windowInsetsPadding(WindowInsets.systemBars.union(WindowInsets.ime))
    )
}

进阶控制：手动监听软键盘状态 #

如果需要更精细的控制（比如仅在软键盘弹出时调整padding），可以手动监听IME的可见性和高度：

Box(modifier = Modifier.fillMaxSize()) {
    // 原Scaffold代码...

    val density = LocalDensity.current
    val imeInsets = LocalWindowInsets.current.ime
    // 监听软键盘高度（转成Dp）
    val imeHeightDp = remember {
        derivedStateOf {
            with(density) { imeInsets.getBottom().toDp() }
        }
    }

    ImageViewer(
        modifier = Modifier
            .fillMaxSize()
            // 避开系统栏
            .windowInsetsPadding(WindowInsets.systemBars)
            // 仅在软键盘可见时添加底部padding
            .padding(bottom = if (imeInsets.isVisible) imeHeightDp.value else 0.dp)
    )
}

关键说明 #

• 保持ImageViewer和原Scaffold在同一个组合树中，是保留共享元素过渡能力的核心（新Window会创建独立组合，导致过渡失效）
• WindowInsets.ime会自动监听软键盘的显示/隐藏状态和高度，无需手动处理系统回调
• windowInsetsPadding会自动让内容避开指定的Insets区域，比手动计算更可靠

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