Android Studio中Jetpack Compose快速导航跳页异常问题

问题原因 #

连续从页面3返回至页面1后，快速点击「Next」按钮直接跳至页面3，是因为默认的navigate方法会保留导航栈中的历史实例，当栈状态未及时更新时，旧的导航记录会干扰新的跳转行为。

解决方案 #

修改导航跳转逻辑，使用popUpTo和launchSingleTop参数控制导航栈，确保每次跳转时清理冗余的栈元素，避免旧路径干扰：

修改后的代码如下：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            TestsComposeTheme {
                val navController: NavHostController = rememberNavController()
                Scaffold { innerPadding ->
                    NavHost(
                        navController = navController,
                        startDestination = NUM.ONE.name,
                        modifier = Modifier.padding(innerPadding)
                    ) {
                        composable(route = NUM.ONE.name) {
                            Column {
                                Text(text = "1")
                                Button(
                                    onClick = { 
                                        navController.navigate(NUM.TWO.name) {
                                            // 清理页面1之上的所有栈元素，确保跳转后栈为[1,2]
                                            popUpTo(NUM.ONE.name) { inclusive = false }
                                            // 确保页面2只存在一个实例
                                            launchSingleTop = true
                                        }
                                    }
                                ) { Text("Next") }
                            }
                        }

                        composable(route = NUM.TWO.name) {
                            Column {
                                Text(text = "2")
                                Button(
                                    onClick = { 
                                        navController.navigate(NUM.THREE.name) {
                                            // 清理页面2之上的所有栈元素，确保跳转后栈为[1,2,3]
                                            popUpTo(NUM.TWO.name) { inclusive = false }
                                            launchSingleTop = true
                                        }
                                    }
                                ) { Text("Next") }
                            }
                        }

                        composable(route = NUM.THREE.name) {
                            Column {
                                Text(text = "3")
                            }
                        }
                    }
                }
            }
        }
    }
}

enum class NUM {
    ONE, TWO, THREE
}

说明 #

• popUpTo(NUM.ONE.name)：指定跳转时回退到页面1，inclusive = false表示不包含页面1本身，确保栈中只保留页面1和新跳转的页面2。
• launchSingleTop = true：如果目标页面已经在栈顶，则不会重复添加新实例，避免栈中出现重复页面。

这样修改后，无论快速还是延迟点击「Next」按钮，都会按照预期路径跳转，不会出现跳过页面2直接到页面3的情况。

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