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

Question

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

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

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

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

Answer 1

在根据the documentation, animation for navigation is tracked by 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 根据当前路线（initialState.destination.route) 和目标路线 (targetState.destination.route).

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

Is there any way to remove navigation animation for bottomNavigation bar in scaffold in jetpack compose?

android-jetpack-compose