底部导航 Android Jetpack Compose 问题答案

【问题标题】：Bottom Nav Android Jetpack Compose issue底部导航 Android Jetpack Compose 问题
【发布时间】：2023-03-03 20:43:01
【问题描述】：

下面是底部nav实现的概述。应用程序显示底部导航栏，但选择项目时，它会多次调用navhost。我看到 Jetpack compose samples https://github.com/android/compose-samples/tree/main/Jetsnack 的类似问题。是否有任何解决方法可以避免多次 Navhost 调用？

@Composable
fun MainScreen() {
    val navController = rememberNavController()
    Scaffold(
        bottomBar = { BottomMenu(navController = navController) }
    ) {
        BottomNavGraphBar(navController = navController)
    }
}

// handling the click event

  BottomNavigationItem(
        
        onClick = {
            navController.navigate(screen.route) {
                popUpTo(navController.graph.findStartDestination().id)
                launchSingleTop = true
            }
        }
    )

//NavHost implementation
@Composable
fun BottomNavGraphBar(navController: NavHostController) {
    NavHost(
        navController = navController,
        startDestination = Screen.Home.route
    ) {
        composable(route = Screen.Home.route) {
            Log.d("BottomNavGraph","BottomNavGraph->HomeScreen")
            HomeScreen()
        }
        composable(route = Screen.Settings.route) {
            Log.d("BottomNavGraph","BottomNavGraph->AppSettingsScreen")
            AppSettingsScreen()
        }
        composable(route = Screen.Profile.route) {
            Log.d("BottomNavGraph","BottomNavGraph->ProfileScreen")
            ProfileScreen()
        }
    }
}

<!---LogCat-->
// When app is launched
BottomNavGraph->HomeScreen
BottomNavGraph->HomeScreen
// clicked on the profile.
BottomNavGraph->HomeScreen
BottomNavGraph->ProfileScreen
BottomNavGraph->HomeScreen
BottomNavGraph->ProfileScreen

【问题讨论】：

这是预期行为。在动画期间，重组可以连续发生多次，最多每帧一次。这正是在这种情况下发生的事情 - 两条路线之间的过渡：旧路线正在消失，而新路线正在出现。

标签： android kotlin android-jetpack-compose android-bottomnav

【解决方案1】：

Compose 可以（并且将取决于多种情况）调用可组合函数来“重新组合”它们。虽然它很智能，并且可以缓存可组合函数的输出作为它们之前的输入，因此它不必重新计算它们的结果（例如它们发出的 UI）。

在您的示例中，composable(..) { ... } 可能会被重新组合，但如果您在其中使用可组合项（例如一些 Texts），它将使用上次渲染时的缓存。

您不必担心函数会被调用，但您必须注意计算。这就是为什么你要使用remember 来计算一些东西并将它存储在缓存中，所以它不会再次重新计算。

【讨论】：