使用按钮从单个屏幕导航到底部选项卡屏幕 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

你有两个选择。

在每个选项卡中显示 BottomNavigationBar

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

1.2。您可以在每个视图中添加 BottomNavigationBar，指定 selected 项。在 HomeView 内部，它可能看起来像这样：

BottomNavigationBar(navController, selectedTab = TabbarItem.Home)

1.3。根据 selected 选项卡，您需要 select BottomNavigationBar

所需的项目

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

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

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

Navigating to a Bottom Tab Screen from a Single screen with a button Jetpack Compose

android

android-jetpack-navigation

android-jetpack-compose