Android Jetpack Compose共享元素过渡无动画且背景界面未消失求助

针对你遇到的「无过渡动画」和「背景页面未消失」两个问题，直接给出排查方向和修正方案：

一、背景页面未消失的核心原因 #

你大概率用了默认的NavHost而非库提供的SharedElementsNavHost。compose-shared-elements需要通过自定义导航容器管理页面进出栈，用默认NavHost会导致两个页面叠加显示。

修正方法：
替换导航容器为SharedElementsNavHost，示例代码：

SharedElementsNavHost(navController = navController, startDestination = "profile") {
    composable("profile") { ProfileScreen(navController) }
    composable("details/{userId}") { backStackEntry ->
        val userId = backStackEntry.arguments?.getString("userId") ?: ""
        UserDetailsScreen(userId)
    }
}

二、无过渡动画的常见错误点 #

1. 共享元素Key不匹配 #

两个页面中需要过渡的元素（头像、名称）必须使用完全相同的key，建议用唯一标识（比如用户ID）拼接，确保每个元素的key全局唯一且对应。

正确示例：
ProfileScreen的头像：

SharedElement(key = "avatar_$userId", screenKey = "profile") {
    Image(/* 你的头像配置 */)
}

UserDetailsScreen的头像：

SharedElement(key = "avatar_$userId", screenKey = "details/$userId") {
    Image(/* 你的头像配置 */)
}

2. 导航时未指定共享元素 #

调用navigate时必须通过sharedElements参数声明要过渡的元素映射，否则库无法识别需要参与动画的元素。

修正代码：

Button(onClick = {
    navController.navigate("details/$userId") {
        sharedElements(
            listOf(
                "avatar_$userId" to "avatar_$userId",
                "name_$userId" to "name_$userId"
            )
        )
    }
}) {
    Text("查看详情")
}

3. 元素未被正确包裹 #

所有需要过渡的元素都必须用SharedElement组件包裹，不能仅在单个页面添加。比如头像和名称，两个页面都要套上SharedElement。

4. 库版本兼容性 #

检查compose-shared-elements的版本是否与你的Compose版本匹配，比如Compose 1.5.x对应库的0.17.x版本，版本不兼容会直接导致动画失效。

三、其他注意事项 #

• 尽量让SharedElement直接包裹目标元素（Image、Text），减少嵌套层级，避免复杂嵌套影响动画识别。
• 如果两个页面中元素尺寸差异过大，过渡效果可能不够直观，可以适当调整尺寸让过渡更自然。

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