使用Jetpack Compose按钮从单个屏幕导航到底部选项卡屏幕 [英] Navigating to a Bottom Tab Screen from a Single screen with a button Jetpack Compose

问题描述

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

问题是，一旦我单击选项卡，底部栏就消失了。

下面是我的代码的外观

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)
}
// ...

那么我的选项卡栏就像

@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
                    }
                }
            )
        }
    }
}

推荐答案

您有两个选项。

1. 在每个选项卡内显示BottomNavigationBar

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

   1.2。您可以在每个视图中添加BottomNavigationBar，指定所选项目。在HomeView内部，它可能如下所示：

   BottomNavigationBar(navController, selectedTab = TabbarItem.Home)
   

   1.3。根据所选选项卡，您需要选择所需的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

   中找到一个示例

这篇关于使用Jetpack Compose按钮从单个屏幕导航到底部选项卡屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！