Android Jetpack Compose中NavHost重复导航的原因排查

我用Jetpack Compose的NavHost做页面导航，场景很简单：

• ScreenNavHost里定义了两个路由：userList和editLogin
• UserListForm里的按钮点击调用navController.navigate("editLogin")跳转到EditLoginForm
• EditLoginForm里的按钮点击调用navController.popBackStack()返回UserListForm

但日志里出现了大量重复的导航记录，和预期不符：

应用启动日志 #

+++ enter AppContent
 +++ --- exit AppContent
 +++ enter ScreenNavHost
 +++  ScreenNavHost.NavHost.composable("userList") 
 +++ enter UserListForm
 +++ --- exit ScreenNavHost

点击UserListForm按钮后的日志 #

+++ in UserListForm.Button.onClick{}, call navController.navigate("editLogin")
 +++  ScreenNavHost.NavHost.composable("userList") 
 +++ enter UserListForm
 +++  ScreenNavHost.NavHost.composable("editLogin") 
 +++ enter EditLoginForm
 +++  ScreenNavHost.NavHost.composable("userList")
 +++ enter UserListForm
 +++  ScreenNavHost.NavHost.composable("editLogin") 
 +++ enter EditLoginForm
 +++  ScreenNavHost.NavHost.composable("editLogin") 
 +++ enter EditLoginForm 

点击EditLoginForm按钮后的日志 #

+++ in EditLoginForm.Button.onClick{}, call navController.popBackStack()
 +++  ScreenNavHost.NavHost.composable("editLogin") 
 +++ enter EditLoginForm
 +++  ScreenNavHost.NavHost.composable("userList") 
 +++ enter UserListForm
 +++  ScreenNavHost.NavHost.composable("editLogin") 
 +++ enter EditLoginForm
 +++  ScreenNavHost.NavHost.composable("userList") 
 +++ enter UserListForm
 +++  ScreenNavHost.NavHost.composable("userList") 
 +++ enter UserListForm

想问下这些重复导航是NavHost的正常行为，还是我代码写错了？相关代码如下：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            AppContent()
        }
    }
}

@Composable
fun AppContent() {
    Log.w("+++", "+++ enter AppContent")
    MyTestNavApplicationTheme {
        val navController = rememberNavController()

        Scaffold() { innerPadding ->
            ScreenNavHost(
                navController = navController,
                modifier = Modifier.padding(innerPadding)
            )
        }
    }
    Log.w("+++", "+++ --- exit AppContent")
}

@Composable
fun ScreenNavHost(
    navController: NavHostController,
    modifier: Modifier = Modifier
) {
    Log.i("+++", "+++ enter ScreenNavHost")
    Box(modifier=Modifier.border(width=0.dp, color= Color(0xFF004940))) {
        NavHost(navController = navController, startDestination = "userList", modifier = modifier) {
            composable("userList") {
                Log.i("+++", "+++  ScreenNavHost.NavHost.composable(\"userList\") ")
                UserListForm(navController)
            }

            composable("editLogin") {
                Log.i("+++", "+++  ScreenNavHost.NavHost.composable(\"editLogin\") ")
                EditLoginForm(navController)
            }
        }
    }
    Log.i("+++", "+++ --- exit ScreenNavHost")
}

@Composable
fun UserListForm(navController: NavHostController) {
    Log.d("+++", "+++ enter UserListForm")
    Button(
        onClick = {
            Log.d("+++", "+++ in UserListForm.Button.onClick{}, call navController.navigate(\"editLogin\")")
            navController.navigate("editLogin")
        }
    ) {
        Text("back -->")
    }
}

@Composable
fun EditLoginForm(navController: NavHostController) {
    Log.d("+++", "+++ enter EditLoginForm")
    Button(
        onClick = {
            Log.d("+++", "+++ in EditLoginForm.Button.onClick{}, call navController.popBackStack()")
            navController.popBackStack()
        }
    ) {
        Text("back -->")
    }
}

这不是NavHost的预期行为，完全是你日志放的位置不对导致的误解。

问题根源 #

你把日志直接写在了Composable函数的根层级里，而Composable会在重组时反复执行。Jetpack Compose的重组机制会在状态变化（比如导航状态改变）时，重新执行相关的Composable代码，每次重组都会触发日志输出，看起来像是“重复导航”，但实际上导航只发生了一次。

举个具体的例子：当你调用navController.navigate("editLogin")时，导航状态变化触发ScreenNavHost和内部NavHost重组，重组过程中当前活跃的目的地（editLogin）和之前的目的地（userList）对应的composable代码都会被执行几次，导致日志重复输出。

修复方案 #

要准确追踪页面的进入/退出，得用LaunchedEffect包裹日志，它只会在Composable首次进入或者指定的key变化时执行一次，不会在重组时重复触发。

修改后的核心代码示例：

@Composable
fun UserListForm(navController: NavHostController) {
    // 仅在首次进入时执行一次
    LaunchedEffect(Unit) {
        Log.d("+++", "+++ enter UserListForm")
    }
    Button(
        onClick = {
            Log.d("+++", "+++ in UserListForm.Button.onClick{}, call navController.navigate(\"editLogin\")")
            navController.navigate("editLogin")
        }
    ) {
        Text("Go to EditLogin")
    }
}

@Composable
fun EditLoginForm(navController: NavHostController) {
    LaunchedEffect(Unit) {
        Log.d("+++", "+++ enter EditLoginForm")
    }
    Button(
        onClick = {
            Log.d("+++", "+++ in EditLoginForm.Button.onClick{}, call navController.popBackStack()")
            navController.popBackStack()
        }
    ) {
        Text("Back to UserList")
    }
}

同样，ScreenNavHost和AppContent里的日志也要用LaunchedEffect包裹，避免重组时重复输出：

@Composable
fun ScreenNavHost(
    navController: NavHostController,
    modifier: Modifier = Modifier
) {
    LaunchedEffect(Unit) {
        Log.i("+++", "+++ enter ScreenNavHost")
    }
    Box(modifier=Modifier.border(width=0.dp, color= Color(0xFF004940))) {
        NavHost(navController = navController, startDestination = "userList", modifier = modifier) {
            composable("userList") {
                LaunchedEffect(Unit) {
                    Log.i("+++", "+++  ScreenNavHost.NavHost.composable(\"userList\") ")
                }
                UserListForm(navController)
            }

            composable("editLogin") {
                LaunchedEffect(Unit) {
                    Log.i("+++", "+++  ScreenNavHost.NavHost.composable(\"editLogin\") ")
                }
                EditLoginForm(navController)
            }
        }
    }
    LaunchedEffect(Unit) {
        Log.i("+++", "+++ --- exit ScreenNavHost")
    }
}

验证结果 #

修改后，每次导航只会输出一次进入日志，不会再出现重复的情况，能准确反映实际的导航行为。

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