在 Jetpack Compose 中一個「頁面」的存在感被削弱,因為不用單獨定義 xml 檔案,全部都是使用 kotlin 定義的 Composable 方法。
不過頁面依然存在,多個頁面之間的跳轉、返回上一頁等依然很複雜,Navigation 能夠很好的幫助我們處理。
home 和 settings 兩個頁面的內容如下:
使用 navController.navigate("settings") 切換到設定頁面時,會自動在 BackStack 中增加,使用返回按鍵時就可以回到上一個頁面,想要切換頁面後不能夠回到上一頁,可以使用上面 popUpTo 的範例。
在 NavHost 的 {} 內部, 除了使用 composable ,還可以使用 navigation ,相當於把 composable 群組起來:
參考資料:
Android Developers - Navigation with Compose
StackOverflow - Is the navigation graph obsolete when I use Jetpack Compose Navigation?
不過頁面依然存在,多個頁面之間的跳轉、返回上一頁等依然很複雜,Navigation 能夠很好的幫助我們處理。
安裝套件
開啟 build.gradle.kts (Module :app) 加入下面的程式碼:
dependencies {
val nav_version = "2.7.6"
implementation("androidx.navigation:navigation-compose:$nav_version")
}
導航(Navigation)範例
下面是一個基本的 Navigation 範例,在 NavHost 的 startDestination 指定開始時的頁面是 home ,在裡面有定義兩個可以導航的頁面,home 和 settings。
@Composable
fun MainScanner() {
// 導航控制器
val navController = rememberNavController()
// 定義導航的起點和每個頁面
NavHost(
navController = navController,
startDestination = "home" // 起點路徑
) {
// 定義可導航的頁面
composable("home") { // 路徑: home
Home(navController)
}
composable("settings") { // 路徑: settings
Settings(navController)
}
}
}
home 和 settings 兩個頁面的內容如下:
@Composable
fun Home(navController: NavController) {
Column {
Text("Home")
// 切換到 Settings 頁面的按鈕
Button(onClick = {
navController.navigate("settings")
}) {
Text("切換到 Settings 頁面")
}
}
}
@Composable
fun Settings(navController: NavController) {
Column {
Text("Settings")
// 切換到 Home 頁面的按鈕
Button(onClick = {
navController.navigate("home")
}) {
Text("切換到 Home 頁面")
}
// 切換到 Home 頁面的按鈕,並且會清除返回堆疊
Button(onClick = {
navController.navigate("home") {
popUpTo("home") { // 清除返回的堆疊(BackStack),無法使用返回按鍵回到上一頁
inclusive = true
}
}
}) {
Text("切換到 Home 頁面,並清除「返回」的頁面")
}
}
}
使用 navController.navigate("settings") 切換到設定頁面時,會自動在 BackStack 中增加,使用返回按鍵時就可以回到上一個頁面,想要切換頁面後不能夠回到上一頁,可以使用上面 popUpTo 的範例。
在 NavHost 的 {} 內部, 除了使用 composable ,還可以使用 navigation ,相當於把 composable 群組起來:
@Composable
fun MainScanner() {
// 導航控制器
val navController = rememberNavController()
// 定義導航的起點和每個頁面
NavHost(
navController = navController,
startDestination = "auth" // 起點
) {
// 定義可導航的頁面
composable("home") { // 路徑: home
Home(navController)
}
composable("settings") { // 路徑: settings
Settings(navController)
}
navigation(
route = "auth", // 路徑: auth
startDestination = "login", // 指向此群組路徑時,會導航到 login 頁面
) {
composable("login") { // 路徑: login
Text(text = "Login")
}
composable("register") { // 路徑: register
Text(text = "Register")
}
composable("forgot_password") { // 路徑: forgot_password
Text(text = "Forgot Password")
}
}
}
}
參考資料:
Android Developers - Navigation with Compose
StackOverflow - Is the navigation graph obsolete when I use Jetpack Compose Navigation?
留言
張貼留言
如果有任何問題、建議、想說的話或文章題目推薦,都歡迎留言或來信: a@ruyut.com