使用按钮 Jetpack Compose 从单个屏幕导航到底部选项卡屏幕

Question

我有一个身份验证页面，在身份验证页面之后，我基本上导航到一个选项卡式应用程序。

问题是，一旦我点击标签，底部栏就会消失。

下面是我的代码的样子

sealed class ScreenM(val route: String) {
    object Landing: Screen("landingm")
    object Tab: Screen("tabm")
}

sealed class Screen(val route: String) {
    object PasswordLogin: Screen("passwordlogin")
    object TabBar: Screen("tabbar")
}

sealed class TabbarItem(var route: String, var icon: Int, var title: String) {
    object Home : TabbarItem("tabhome", R.drawable.ic_home_tab_icon, "Home")
    object Profile : TabbarItem("tabprofile", R.drawable.ic_profile_tab_icon, "Profile")
}

我的应用程序入口点是

@Composable
fun App() {
    val navController = rememberNavController()
    NavHost(navController, startDestination = ScreenM.Landing.route) {
        addLandingTopLevel(navController = navController)
        addTabBarTopLevel(navController = navController)
    }
}

private fun NavGraphBuilder.addLandingTopLevel(
    navController: NavController,
) {
    navigation(
        route = ScreenM.Landing.route,
        startDestination = Screen.Home.route
    ) {
        addPasswordLogin(navController)
    }
}
private fun NavGraphBuilder.addPasswordLogin(navController: NavController) {
    composable(route = Screen.PasswordLogin.route) {
        PasswordLoginView(navController)
    }
}

private fun NavGraphBuilder.addTabBarTopLevel(
    navController: NavController,
) {
    navigation(
        route = ScreenM.Tab.route,
        startDestination = Screen.TabBar.route
    ) {
        addTabBar(navController)
        addHome(navController)
        addProfile(navController)
    }
}

private fun NavGraphBuilder.addTabBar(navController: NavController) {

    composable(route = Screen.TabBar.route) {
        TabBarView(navController)
    }
}

private fun NavGraphBuilder.addHome(navController: NavController) {
    composable(route = TabbarItem.Home.route) {
        HomeView()
    }
}
private fun NavGraphBuilder.addProfile(navController: NavController) {
    composable(route = TabbarItem.Profile.route) {
        ProfileView()
    }
}

我正在像这样触发标签

// ...
NavigationButton(buttonText = "Login", onBackPressed = {
    navController.popBackStack()
}) {
    navController.navigate(ScreenM.Tab.route)
}
// ...

那么我的Tabbar就像

@Composable
fun TabBarView(navController: NavController) {
    Scaffold(
        bottomBar = { BottomNavigationBar(navController) }
    ) {
    }
}

那么底部导航栏是这样的

@Composable
fun BottomNavigationBar(navController: NavController) {
    val items = listOf(
        TabbarItem.Home,
        TabbarItem.Profile
    )
    BottomNavigation(
        backgroundColor = colorResource(id = R.color.white),
        contentColor = Color.Black
    ) {
        items.forEach { item ->
            BottomNavigationItem(
                icon = { Icon(painterResource(id = item.icon), contentDescription = item.title) },
                label = { Text(text = item.title) },
                selectedContentColor = Color.Red,
                unselectedContentColor = Color.Blue.copy(0.4f),
                alwaysShowLabel = true,
                selected = false,
                onClick = {
                    navController.navigate(item.route) {
                        // Pop up to the start destination of the graph to
                        // avoid building up a large stack of destinations
                        // on the back stack as users select items
                        navController.graph.startDestinationRoute?.let { route ->
                            popUpTo(route) {
                                saveState = true
                            }
                        }
                        // Avoid multiple copies of the same destination when
                        // reselecting the same item
                        launchSingleTop = true
                        // Restore state when reselecting a previously selected item
                        restoreState = true
                    }
                }
            )
        }
    }
}

Answer 1

你有两个选择。

1. 在每个标签内显示BottomNavigationBar

   1.1。不确定代码中的 addTabBar 导航路线是什么，我认为不需要，因为看起来您只有两个选项卡：TabbarItem.Home 和 TabbarItem.Profile。

   1.2。您可以在每个视图中添加BottomNavigationBar，指定所选项目。在HomeView 内部可能是这样的：

   BottomNavigationBar(navController, selectedTab = TabbarItem.Home)
   

   1.3。根据选择的tab，需要选择BottomNavigationBar需要的项

   @Composable
   fun BottomNavigationBar(navController: NavController, selectedTab: TabbarItem) {
       val items = listOf(
           TabbarItem.Home,
           TabbarItem.Profile
       )
       BottomNavigation(
           // ...
       ) {
           items.forEach { item ->
               BottomNavigationItem(
                   // ...
                   selected = selectedTab == item,
                   // ...
   

2. 在NavHost 之外有一个导航栏，您可以在documentation 中找到一个示例