Jetpack Compose中Firebase登录后HomeScreen重复渲染问题

我基于Firebase实现了登录流程，通过RootNavGraph处理认证逻辑且仅调用一次。登录成功后跳转至带底部导航栏的HomeNavGraph，流程逻辑符合预期，但出现HomeScreen被反复渲染的无限循环，日志显示HomeScreen与HomeNavGraph被持续调用。

相关代码片段 #

登录成功后的导航逻辑

when (it) {
    is Resource.Failure -> {
       // TODO("Add a forgot password section")
        val context = LocalContext.current
        Toast.makeText(context, it.exception.message, Toast.LENGTH_LONG).show()
    }
    is Resource.Loading -> {
        CircularProgressIndicator(modifier = Modifier.constrainAs(refLoader) {
            top.linkTo(parent.top)
            bottom.linkTo(parent.bottom)
            start.linkTo(parent.start)
            end.linkTo(parent.end)
        })
    }
    is Resource.Success -> {
        LaunchedEffect(Unit) {
            navController.popBackStack()
            navController.navigate(Graph.HOME)
        }
    }
}

HomeNavGraph 实现

@Composable
fun HomeNavGraph(navController: NavHostController, authViewModel: AuthViewModel) {
    NavHost(navController = navController, route = Graph.HOME,
    startDestination = BottomBarScreen.Home.route
    ) {
        composable(route = BottomBarScreen.Search.route) {
            SearchScreen()
        }
        composable(route = BottomBarScreen.Home.route) {
            Log.d("HomeNavGraph", "HomeScreen is being called")
            HomeScreen(authViewModel = authViewModel)
        }
        composable(route = BottomBarScreen.Profile.route) {
            ProfileScreen(authViewModel = authViewModel)
        }
    }
}

HomeScreen 与底部导航实现

@SuppressLint("UnusedMaterialScaffoldPaddingParameter")
@Composable
fun HomeScreen(
    authViewModel: AuthViewModel?,
    navController: NavHostController = rememberNavController()
) {
    Scaffold(
        bottomBar = { BottomBar(navController = navController) }
    ) {
        Log.d("HomeNavGraph Call", "HomeNavGraph being called from HomeScreen")
            HomeNavGraph(navController = navController, authViewModel = authViewModel!!)
    }
}

@Composable
fun BottomBar(navController: NavHostController) {
    val screens = listOf(
        BottomBarScreen.Search,
        BottomBarScreen.Home,
        BottomBarScreen.Profile
    )
    val navBackStackEntry by navController.currentBackStackEntryAsState()
    val currentDestination = navBackStackEntry?.destination
    
    val bottomBarDestination = screens.any { it.route == currentDestination?.route }
    if (bottomBarDestination) {
        BottomNavigation(
            backgroundColor = MaterialTheme.colors.secondary
        ) {
            screens.forEach { screens ->
                AddItem(
                    screen = screens,
                    currentDestination = currentDestination,
                    navController = navController
                )
            }
        }
    }
}

@Composable
fun RowScope.AddItem(
    screen: BottomBarScreen,
    currentDestination: NavDestination?,
    navController: NavHostController
) {
    BottomNavigationItem(
        label = {
            Text(text = screen.title, color = MaterialTheme.colors.secondaryVariant)
        },
        icon = {
            Icon(
                imageVector = screen.icon,
                contentDescription = "Navigation Icon",
                tint = MaterialTheme.colors.secondaryVariant
            )
        },
        selected = currentDestination?.hierarchy?.any {
            it.route == screen.route
        } == true,
        unselectedContentColor = LocalContentColor.current.copy(alpha = ContentAlpha.disabled),
        onClick = {
            navController.navigate(screen.route) {
                popUpTo(navController.graph.findStartDestination().id)
                launchSingleTop = true
            }
        }
    )
}

核心循环原因 #

你犯了嵌套NavHost的逻辑错误：

1. HomeNavGraph 作为顶层导航图，其startDestination是BottomBarScreen.Home.route，会渲染HomeScreen
2. 但HomeScreen内部又创建了新的NavHostController并调用HomeNavGraph，导致HomeNavGraph再次渲染HomeScreen，形成无限递归循环

修复步骤 #

1. 拆分职责：分离导航图与页面

HomeScreen应该是独立的内容页面，不负责嵌套整个导航图；HomeNavGraph负责管理底部三个页面的路由，底部导航栏则由导航图的外层容器承载。

2. 代码重构

重构HomeScreen为独立内容页面

@Composable
fun HomeScreen() {
    // 这里放置Home页面的实际内容，比如列表、卡片等
    Text(text = "Home Screen Content", modifier = Modifier.fillMaxSize(), textAlign = TextAlign.Center)
}

创建外层容器承载底部导航与导航图

@Composable
fun HomeWrapperScreen(navController: NavHostController, authViewModel: AuthViewModel) {
    Scaffold(
        bottomBar = { BottomBar(navController = navController) }
    ) {
        HomeNavGraph(navController = navController, authViewModel = authViewModel)
    }
}

@Composable
fun HomeNavGraph(navController: NavHostController, authViewModel: AuthViewModel) {
    NavHost(navController = navController, route = Graph.HOME,
        startDestination = BottomBarScreen.Home.route
    ) {
        composable(route = BottomBarScreen.Search.route) {
            SearchScreen()
        }
        composable(route = BottomBarScreen.Home.route) {
            Log.d("HomeNavGraph", "HomeScreen is being called")
            HomeScreen() // 现在是独立页面，不再嵌套导航图
        }
        composable(route = BottomBarScreen.Profile.route) {
            ProfileScreen(authViewModel = authViewModel)
        }
    }
}

调整登录后的导航目标

确保登录成功后跳转的Graph.HOME指向HomeWrapperScreen（如果之前的路由定义需要调整）：

is Resource.Success -> {
    LaunchedEffect(Unit) {
        navController.popBackStack()
        navController.navigate(Graph.HOME) // 确保Graph.HOME对应HomeWrapperScreen的路由
    }
}

3. 额外注意点

• 不要在页面Composable中创建新的NavHostController，导航控制器应由顶层导航图统一传递，避免多控制器导致的导航混乱
• 底部导航栏必须使用与HomeNavGraph相同的navController，才能保证路由状态同步

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