Jetpack Compose 简单的底部导航

Question

我目前正在使用 Jetpack Compose 开发 Android 应用程序，并且正在尝试实现底部导航栏。

我为我的导航项定义了一个密封类，每个类都有一个路线、标签和图标。它看起来像这样：

sealed class Navigation(val route: String, val label: String, val icon: Int) {
    data object Home : Navigation("home", "Home", R.drawable.home_ico)
    data object Profile : Navigation("profile", "Profile", R.drawable.person_ico)
    data object Search : Navigation("search", "Search", R.drawable.search_vector)
}

我还有一个主要可组合函数来设置我的 NavHost：

@Composable
fun Main(navController: NavHostController) {
    NavHost(navController = navController, startDestination = Navigation.Home.route) {
        composable(Navigation.Home.route) {
            HomeScreen()
        }
        composable(Navigation.Profile.route) {
            ProfileScreen()
        }
        composable(Navigation.Search.route) {
            SearchScreen()
        }
    }
}

我有一个 BottomNavigationBar 可组合函数，应该显示底部导航栏：

@Composable
fun BottomNavigationBar(navController: NavHostController, currentItem: MutableIntState) {
    val navBackStackEntry by navController.currentBackStackEntryAsState()
    val currentDestination = navBackStackEntry?.destination

    val navigationItems = listOf(
        Navigation.Home.route,
        Navigation.Profile.route,
        Navigation.Search.route
    )
    // Im stuck here
}

但是，我不确定如何继续在 BottomNavigationBar 可组合项中实现 BottomNavigation。我希望底部导航栏中的每个项目都对应于一个导航对象，并且当单击某个项目时，应用程序应该导航到相应的屏幕。

Answer 1

您应该使用

Scaffold

来实现此目的。

@Composable
fun Main(navController: NavHostController) {
    Scaffold(
        bottomBar = {
            BottomNavigationBar(navController)
        }
    ) {
        NavHost(navController = navController, startDestination = Navigation.Home.route) {
            composable(Navigation.Home.route) {
                HomeScreen()
            }
            composable(Navigation.Profile.route) {
                ProfileScreen()
            }
            composable(Navigation.Search.route) {
                SearchScreen()
            }
        }
    }
}   

然后使用

BottomNavigation

:

@Composable
fun BottomNavigationBar(navController: NavHostController) {
    val navBackStackEntry by navController.currentBackStackEntryAsState()
    val currentDestination = navBackStackEntry?.destination

    val navigationItems = listOf(
        Navigation.Home.route,
        Navigation.Profile.route,
        Navigation.Search.route
    )
    BottomNavigation {
      navigationItems.forEach { screen ->
        BottomNavigationItem(
          icon = { /* Add an icon here */ },
          label = { Text("Label") },
          selected = currentDestination?.hierarchy?.any { it.route == screen.route } == true,
          onClick = {
            navController.navigate(screen.route)
          }
        )
      }
    }
}

更多信息这里。