如何移除Jetpack Compose中Scaffold组件BottomNavigation栏的导航动画？

这确实是Jetpack Compose导航中常见的一个小坑——默认的页面过渡动画会作用于整个Scaffold的内容，包括底部导航栏，导致它跟着淡入淡出。不过有几种可靠的方法可以解决这个问题，我给你推荐最直接且符合最佳实践的方案：

方案一：将BottomNavigationBar提升到NavHost之外（推荐） #

核心思路是让底部导航栏成为全局组件，不参与页面导航的动画范围。具体来说，就是把BottomNavigationBar放在包裹NavHost的父级Scaffold中，而不是每个页面自己的Scaffold里。这样导航时，只有NavHost内的页面内容会执行过渡动画，底部导航栏始终保持静态。

代码示例：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val navController = rememberNavController()
            YourAppTheme {
                // 父级Scaffold承载全局底部导航栏
                Scaffold(
                    bottomBar = {
                        BottomNavigationBar(navController = navController)
                    }
                ) { innerPadding ->
                    // NavHost只负责切换页面内容
                    NavHost(
                        navController = navController,
                        startDestination = "home",
                        modifier = Modifier.padding(innerPadding)
                    ) {
                        composable("home") { HomeScreen() }
                        composable("profile") { ProfileScreen() }
                        composable("settings") { SettingsScreen() }
                    }
                }
            }
        }
    }
}

@Composable
fun BottomNavigationBar(navController: NavHostController) {
    val navItems = listOf(
        BottomNavItem("home", "首页", Icons.Default.Home),
        BottomNavItem("profile", "我的", Icons.Default.Person),
        BottomNavItem("settings", "设置", Icons.Default.Settings)
    )
    val currentRoute = navController.currentBackStackEntryAsState().value?.destination?.route

    BottomNavigation {
        navItems.forEach { item ->
            BottomNavigationItem(
                icon = { Icon(item.icon, contentDescription = item.label) },
                label = { Text(item.label) },
                selected = currentRoute == item.route,
                onClick = {
                    navController.navigate(item.route) {
                        // 优化导航行为，避免重复入栈
                        popUpTo(navController.graph.startDestinationId) { saveState = true }
                        launchSingleTop = true
                        restoreState = true
                    }
                }
            )
        }
    }
}

// 页面组件只需要处理自身内容，无需再设置bottomBar
@Composable
fun HomeScreen() {
    Scaffold(
        topBar = { TopAppBar(title = { Text("首页") }) }
    ) { padding ->
        Box(Modifier.padding(padding)) {
            Text("这是首页内容")
        }
    }
}

这种方法的优势不仅是解决了动画问题，还符合底部导航栏的全局特性，减少了不必要的组件重建，性能更优。

方案二：给BottomNavigationBar设置固定Key（适配特殊场景） #

如果因为某些业务限制，必须将BottomNavigationBar放在每个页面的Scaffold中，可以通过给它设置一个固定的key，让Compose认为它是同一个组件，从而跳过过渡动画。

代码示例：

@Composable
fun ProfileScreen(navController: NavHostController) {
    Scaffold(
        bottomBar = {
            // 设置固定key，强制Compose复用该组件实例
            BottomNavigationBar(navController = navController)
                .key("global_bottom_nav")
        }
    ) { padding ->
        Box(Modifier.padding(padding)) {
            Text("这是个人中心内容")
        }
    }
}

不过这种方法不如方案一可靠，因为每个页面的Scaffold仍会重新创建，只是通过key复用了底部导航栏的实例，适合临时适配或特殊场景。

总结下来，方案一是最推荐的实现方式，既解决了动画问题，也符合Jetpack Compose的组件设计原则。

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