将 BottomNavigation 与列表相结合 - Jetpack compose 中带有动画的详细导航

Question

考虑到一个典型的应用程序具有一些底部栏按钮和部分，用户可以在其中从列表导航到详细信息，理想情况下，我希望为底部栏过渡保留良好的默认淡入淡出效果，并为列表详细信息过渡滑入/滑出。这是我过于简化的相关代码。-

Scaffold(
    ...
    bottomBar = {
        BottomNavigation() {
        }
    }
) { padding ->
    NavHost(navController, startDestination = TabView.Home.route) {
        composable(TabView.Home.route) {
            Home()
        }
        navigation(route = TabView.Browse.route, startDestination = NavigationDestination.Games.route) {
            composable(route = NavigationDestination.GamesList.route) {
                GamesList()                
            }
            composable(route = NavigationDestination.GameDetail.route) {
                GameDetail()
            }
        }
        composable(TabView.Contact.route) {
            ContactForm()
        }
    }
}

我的第一个方法是将所需的动画添加到我的

GameDetail

路线中，如下所示。-

enterTransition = { slideIntoContainer(AnimatedContentTransitionScope.SlideDirection.Start, tween(transitionDuration)) },
exitTransition = { slideOutOfContainer(AnimatedContentTransitionScope.SlideDirection.Start, tween(transitionDuration)) },
popEnterTransition = { slideIntoContainer(AnimatedContentTransitionScope.SlideDirection.End, tween(transitionDuration)) },
popExitTransition = { slideOutOfContainer(AnimatedContentTransitionScope.SlideDirection.End, tween(transitionDuration)) }

如果我打开详细信息并弹回来，它会按预期工作，但如果我点击详细信息中的不同选项卡按钮，则会出现不需要的结果（即主屏幕出现淡入，但游戏详细信息会随着幻灯片动画消失）。

是否有一种简单的方法可以让幻灯片动画仅在“推送”/“弹出”细节时起作用，而在浏览底部栏时不起作用？

更一般地说，是否有更好的方法来组合这两种动画？拥有两个独立的 navController 会是更好的做法吗？

Answer 1

我最终使用独立的

NavController

，而不是在单个

navigation

内添加嵌套的

NavHost

。看起来像这样。-

NavHost(tabNavController, startDestination = TabNavigationDestination.Home.route) {
    composable(route = TabNavigationDestination.Home.route) {
        val homeNavController = rememberNavController()
        currentNavController = homeNavController
        NavHost(homeNavController, startDestination = NavigationDestination.UserProfile.route) {
            composable(
                NavigationDestination.UserProfile.route,
                enterTransition = { slideIntoContainer(AnimatedContentTransitionScope.SlideDirection.Start, tween(transitionDuration)) },
                exitTransition = { slideOutOfContainer(AnimatedContentTransitionScope.SlideDirection.Start, tween(transitionDuration)) },
                popEnterTransition = { slideIntoContainer(AnimatedContentTransitionScope.SlideDirection.End, tween(transitionDuration)) },
                popExitTransition = { slideOutOfContainer(AnimatedContentTransitionScope.SlideDirection.End, tween(transitionDuration)) },
            ) {
                UserProfile()  
            }
            ...
        }
    }
}

现在我为每个嵌套的

NavHost

都有独立的输入/输出动画，另外我可以检查

previousBackStackEntry

中是否有

currentNavController

，以便在顶部栏中显示/隐藏后退按钮（这在问题中的方法）。

值得一提的是，我一开始就放弃了这种方法，因为我需要知道当前的路线，以便在导航栏中渲染动态标题+后退按钮，我通过添加

currentNavController

作为状态来解决这个问题。-

var currentNavController by remember { mutableStateOf<NavController?>(null) }

不确定这是否是性能方面的最佳方法（它可能涉及额外的重组），但它绝对可以工作，而不会弄乱因使用单个

navController

而产生的许多问题，而且我还可以在不同的选项卡项目（以前我无法确保每条路线都不同）。

有关嵌套导航 + 示例项目的更多有用信息，请参阅 此视频。-