Jetpack Compose页面切换动画时去除白色背景或更换背景的解决方案咨询

嘿，我来帮你排查这个页面切换动画时出现白色背景的问题～ 你尝试在MainActivity里设置Window背景却没生效，大概率是因为Jetpack Compose的导航组件（NavHost）或者页面本身的布局覆盖了Window的背景，尤其是在动画过渡的瞬间，下面给你几个可行的解决思路和修改示例：

1. 提前设置Window背景并移除Compose内的LaunchedEffect #

你之前在Compose的LaunchedEffect里设置Window背景，时机可能太晚了——动画开始时这个代码还没执行，所以过渡时还是白色。建议直接在onCreate的setContent之前就设置Window背景：

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    // 先设置Window背景和状态栏颜色，在setContent之前执行
    window.setBackgroundDrawableResource(R.color.black1)
    window.statusBarColor = ContextCompat.getColor(this, R.color.black1)
    
    setContent {
        MarusTheme(darkColors = darkColors()) {
            navController = rememberNavController()
            RootNavigationGraph(navController = navController)
            AuthState()
        }
    }
}

2. 给NavHost设置背景色 #

NavHost默认没有背景，动画过渡时旧页面滑走后会露出底层的Window，但如果Window背景设置了还是没效果，直接给NavHost加上背景色，确保整个导航区域的背景统一：
假设你的RootNavigationGraph里包含NavHost，修改它的代码：

@Composable
fun RootNavigationGraph(navController: NavHostController) {
    NavHost(
        navController = navController,
        startDestination = "你的起始路由",
        // 添加背景修饰符
        modifier = Modifier.fillMaxSize().background(Color(R.color.black1))
    ) {
        // 你的路由定义，包括OrderDetailsScreens的代码
        composable(route = OrderDetailsScreens,
            arguments = listOf(navArgument("id") {
                type = NavType.StringType
            }), 
            enterTransition ={
                slideIntoContainer(
                    AnimatedContentTransitionScope.SlideDirection.Left,
                    animationSpec = tween(700)
                )
            }, 
            exitTransition = {
                slideOutOfContainer(
                    AnimatedContentTransitionScope.SlideDirection.Right,
                    animationSpec = tween(700)
                )
            },
            popEnterTransition = {
                slideIntoContainer(
                    AnimatedContentTransitionScope.SlideDirection.Left,
                    animationSpec = tween(700)
                )
            },
            popExitTransition = {
                slideOutOfContainer(
                    AnimatedContentTransitionScope.SlideDirection.Right,
                    animationSpec = tween(700)
                )
            }
        ) { backStackEntry ->
            val id = backStackEntry.arguments?.getString("id") ?: NO_VALUE
            OrderDetailsScreen(
                id = id,
                navBack = {
                    navController.popBackStack()
                },
                navToCarpets = {
                    navController.navigate(OrderDetailsScreens.Carpets.route + "/$id")
                },
            )
        }
    }
}

3. 给每个页面的根布局设置背景 #

确保你的OrderDetailsScreen（以及其他所有页面）的根布局都设置了背景色，避免页面内容未填满区域时露出空白：

@Composable
fun OrderDetailsScreen(
    id: String,
    navBack: () -> Unit,
    navToCarpets: () -> Unit
) {
    // 根布局使用fillMaxSize+background确保覆盖整个屏幕
    Box(modifier = Modifier.fillMaxSize().background(Color(R.color.black1))) {
        // 页面的其他内容，比如文本、按钮等
        // ...
    }
}

4. 检查Theme中的背景设置 #

另外可以确认一下你的MarusTheme里，是否在darkColors()中正确设置了背景色，避免Theme默认的白色背景影响：

private val DarkColorScheme = darkColors(
    background = Color(R.color.black1),
    surface = Color(R.color.black1)
)

@Composable
fun MarusTheme(
    darkColors: ColorScheme = DarkColorScheme,
    content: @Composable () -> Unit
) {
    MaterialTheme(
        colorScheme = darkColors,
        content = content
    )
}

按照上面的步骤修改后，页面切换动画时应该就不会再出现白色背景了～

备注：内容来源于stack exchange，提问作者Надир Парилаев