之前設計了很多的頁面，但是我們還沒有辦法在他們之間切換，所以這一篇要來介紹navigator

Navigator是什麼

這是導覽系統的一系列稱呼，它包含了很多的組件

• NavController
• NavHost
• 相關：Scaffold
  這一篇主要聚焦在navController和NavHost的使用，但還不能開始在應用中切換
  使用這些功能需要引入

val nav_version = "2.9.4"

  // Jetpack Compose integration
  implementation("androidx.navigation:navigation-compose:$nav_version")

NavHost

這是定義並使用各個頁面的地方，他也是個Composable物件

NavHost(
	navController = navController,
	startDestination = "main",
	modifier = modifier.padding(innerPadding) // innerpadding from scaffold
) {
	composable("main") {
		CalendarMonth(
			navController = navController,
			calendarViewModel = calendarViewModel
		)
	}
	composable("viewDay") {
		ViewDay(
			navController = navController,
			calendarViewModel = calendarViewModel
		)
	}
}

NavController

這個比較重要，他決定了和他綁定的NavHost要導覽到哪裡，所有的navigate都是在stack上增加，他會記住你導覽的路徑，所以有時候需要附加一些其他的參數來解決

val navController = rememberNavController()
// 指定路徑
navController.navigate(item.route) {
	popUpTo(navController.graph.findStartDestination().id) {
		saveState = true
	}
	launchSingleTop = true
	restoreState = true
}
// 往回
navController.popBackStack()

上面這些之後都會提到

最佳實作

以下是我了解到的最佳實作方式：

嵌套

如果說你的應用路徑非常複雜，我建議可以按照bottom bar的切換分成幾個部分，通常設定的部分很有自己做路徑的可能，也就是說分成主頁、設定等頁面獨立的導覽

路徑object

sealed class Screens(val route: String) {
	object Main: Screens("main") {
		object Calendar: Screens("calendar")
		object ViewDay: Screens("viewDay") 
	}
	object Setting: Screens("setting") {
		object AutoDeletion: Screens("setting/autodelete")
		object ColorMap: Screens("setting/color")
	}
	object TaskInputPlaceholder : Screens("taskInputPage")
}

這是另外一種方式，通過宣告sealed class，讓裡面的路徑可以嵌套，記住路徑，對於頁面的架構很有幫助

這兩種方式搭配的話應該大部分的應用都不會有問題
下一篇會開始教scaffold，並與這篇的內容結合使用