android-jetpack-compose - 有什么方法可以删除 Jetpack Compose 脚手架中 bottomNavigation 栏的导航动画吗？

Question

我正在为屏幕使用脚手架，并且在 bottomBar 函数中插入了一个 bottomNavigationBar。

当我点击 bottomNavigationBar 中的某个项目时，我导航到带有此栏的另一个屏幕，Jetpack Compose 使用它的默认过渡动画，看起来像淡出。

但底部的 navigationBar 也会在过渡期间淡化，这看起来很糟糕，因为我希望它根本没有动画。

有什么方法可以移除 bottomNavigationBar 的过渡动画吗？

Answer 1

根据the documentation ，导航动画由 this issue 跟踪.

正如您在上一条评论中看到的，用于导航的动画 API 目前由相应的 accompanist library 提供。 .但是，将来它将被移回标准导航库。因此，目前我建议您使用 Accompanist 库，而不是“默认”库。

如果你已经这样做了，你可以用这样的东西替换动画:

AnimatedNavHost(
    navController = navController,
    startDestination = ROUTE_MAIN,
    enterTransition = {
        if (initialState.destination.route == ROUTE_MAIN) {
            EnterTransition.None
        } else {
            slideInHorizontally(
                initialOffsetX = { it },
                animationSpec = tween(300)
            )
        }
    },
    exitTransition = {
        if (initialState.destination.route == ROUTE_MAIN) {
            ExitTransition.None
        } else {
            slideOutHorizontally(
                targetOffsetX = { -it },
                animationSpec = tween(300)
            )
        }
    },
    popEnterTransition = {
        if (targetState.destination.route == ROUTE_MAIN) {
            EnterTransition.None
        } else {
            slideInHorizontally(
                initialOffsetX = { -it },
                animationSpec = tween(300)
            )
        }
    },
    popExitTransition = {
        if (targetState.destination.route == ROUTE_MAIN) {
            ExitTransition.None
        } else {
            slideOutHorizontally(
                targetOffsetX = { it },
                animationSpec = tween(300)
            )
        }
    },
) {
    composable(ROUTE_MAIN) { ... }
    composable(ROUTE_DETAILS) { ... }
    ...
}

如您在上面的示例中所见，我使用 EnterTransition.None 和 ExitTransition.None 从 ROUTE_MAIN 禁用动画> 基于当前路线 (initialState.destination.route) 和目标路线 (targetState.destination.route)。