Compose Navigation跳转至其他页面时屏幕闪烁问题求助

针对你使用modifier.clickable跳转页面时出现的屏幕闪烁问题，结合你提供的代码和navigation-compose:2.7.2版本，主要排查方向和解决方法如下：

1. 修复重复导航判断逻辑 #

你当前的导航判断存在逻辑漏洞：动态路由（带参数）场景下，navController.currentDestination?.route返回的是带占位符的模板路由（比如selected_category/{categoryId}），而你拼接的是带具体参数的完整路由（比如selected_category/123），导致判断永远不成立，每次点击都会重复调用navigate，进而引发界面闪烁。

修改判断逻辑，改用目的地层级匹配：

onCategorySelectedListener = { categoryId ->
    val isAlreadyInTargetScreen = navController.currentDestination?.hierarchy?.any {
        it.route == Destinations.SelectedCategoryScreen.route
    } ?: false
    if (!isAlreadyInTargetScreen) {
        navController.navigate(
            route = "${Destinations.SelectedCategoryScreen.route}/$categoryId"
        )
    }
}

2. 添加导航选项避免重复入栈 #

在navigate时添加launchSingleTop = true选项，确保目标页面已在栈顶时不会重新创建实例，减少不必要的界面重建：

navController.navigate(
    route = "${Destinations.SelectedCategoryScreen.route}/$categoryId",
    navOptions = {
        launchSingleTop = true
    }
)

3. 排查组件不必要重组 #

检查state.categories是否会频繁触发更新，导致SuccessfulScreen和CategoriesGrid重复重组。可以通过以下方式优化：

• 确保categories对应的数据类添加@Stable或@Immutable注解，避免无意义的重组触发
• 使用remember缓存计算后的categories实例，减少传递给子组件的更新次数

4. 验证Clickable与导航动画的冲突 #

若上述方法无效，可临时调整导航动画排查是否是动画冲突导致的闪烁：

navController.navigate(
    route = "${Destinations.SelectedCategoryScreen.route}/$categoryId",
    navOptions = {
        anim {
            enter = android.R.anim.fade_in
            exit = android.R.anim.fade_out
            popEnter = android.R.anim.fade_in
            popExit = android.R.anim.fade_out
        }
    }
)

可尝试替换为更平缓的动画，观察闪烁是否消失。

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