用Jetpack Compose實作一款多功能義務役App Part3 (with Jetpack Compose Navigation)

Navigation with NavigationBar

在之前的文章中我們實作出了App的第一個功能，在實作出更多功能前，我們要為App添加Navigation的功能，讓使用者能在不同功能的Screen中切換。

什麼是Navigation？

Navigation是一個能夠讓使用者在不同Screen中進行導覽的框架，例如：A Screen → B Screen或A Screen → B Screen → A Screen(如果不是使用Jetpack Compose而是使用view則是在fragment中進行導覽，例如 fragment A → fragment B 之間的導覽)。

使用Navigation需要先加入

dependencies {
    implementation("androidx.navigation:navigation-compose:2.7.7")
}

Bottom Navigation Bar

在這裡我打算用bottom navigation bar 的方式做navigation，所以需要先設定bottom app bar。

Scaffold(
        bottomBar = {
            NavigationBar {
                val navBackStackEntry by navController.currentBackStackEntryAsState()
                val currentRoute = navBackStackEntry?.destination
                var selectedItemIndex by rememberSaveable {
                    mutableStateOf(0)
                }
                ////
            }
        },
        //////
    )

botttom app bar需要在Scaffold中設定，另外要確保Scaffold函數放在足夠高的層級中，以確保所有的Screen都能在bottom navigation bar的範圍中。

宣告navigation bar選項中的值

data class BottomNavigationItem (
    val title: String,
    val selectedIcon: ImageVector,
    val unSelectedIcon: ImageVector,
    val route: String
)
////
 val items = listOf(
     BottomNavigationItem(
     title = "退伍日計算",
     selectedIcon = Icons.Filled.DateRange,
     unSelectedIcon = Icons.Outlined.DateRange,
     route = Screens.DatePickerScreen.name
     ),
     BottomNavigationItem(
     title = "飲水小卡",
     selectedIcon = Icons.Filled.Add,
     unSelectedIcon = Icons.Outlined.Add,
     route = Screens.DrinkWaterScreen.name
     )
)

enum class 設定route的時候會用到

enum class Screens {
    DatePickerScreen,
    DrinkWaterScreen
}

到這裡可以先試試看，會出現Navigation bar，但點選的時候不會有導覽的動作，因為還沒有告訴Navhost要compose哪個route。

所以下一步要告訴NavHost要compose的route。

Scaffold(
///
) {
////
NavHost(
    navController = navController,
    startDestination = Screens.DatePickerScreen.name,
    modifier = Modifier.padding(paddingValues)
) {
    composable(route = Screens.DatePickerScreen.name) {
        DatePickerScreen()
}
    composable(route = Screens.DrinkWaterScreen.name) {
       DrinkWaterCardScreen()
    }
  }
}

填入要進行Navigation 的route就大功告成啦！

原始碼在這裡

下一篇預計會把飲水小卡時做出來。