1. 導入依賴

  implementation("androidx.navigation:navigation-compose:2.7.7")

2.kotlin編譯版本升級

 composeOptions {kotlinCompilerExtensionVersion = "1.5.0"}

3.插件版本升級

// Top-level build file where you can add configuration options common to all sub-projects/modules.
plugins {id("com.android.application") version "8.1.4" apply falseid("org.jetbrains.kotlin.android") version "1.8.10" apply falseid("androidx.navigation.safeargs.kotlin") version "2.7.7" apply false
}buildscript {repositories {google()}dependencies {val nav_version = "2.7.7"classpath("androidx.navigation:navigation-safe-args-gradle-plugin:$nav_version")}
}

4.開始編程

4.1 創建導航欄并傳入簡單參數

package com.tiger.jetpackcomposesideimport android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Button
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.navigation.NavType
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import androidx.navigation.navArgument
import com.tiger.jetpackcomposeside.ui.theme.JetpackComposeSideThemeclass MainActivity : ComponentActivity() {override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {JetpackComposeSideTheme {Home()}}}
}@Composable
fun Home() {val navController = rememberNavController()NavHost(navController = navController, startDestination = "profile/1") {composable("profile/{userId}", arguments = listOf(navArgument("userId"){type = NavType.IntType})) {val userId = it.arguments?.getInt("userId")Profile(userId) {navController.navigate("ajax/${it}")}}composable("ajax/{userId}", arguments = listOf(navArgument("userId"){type = NavType.IntType})) {val userId = it.arguments?.getInt("userId")Ajax(userId) {navController.navigate("profile/${it}")}}}}// Define the Profile composable.
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun Profile(int: Int?,onNavigateToFriendsList: (int:Int) -> Unit) {val text = remember {mutableStateOf("")}Box(contentAlignment = Alignment.Center, modifier = Modifier.fillMaxSize()) {Column {Text(text = "profile的內容  AJAX傳過來的內容${int}")TextField(value =text.value , onValueChange ={text.value = it} )Button(onClick = { onNavigateToFriendsList(text.value.toInt()) }) {Text("Go to Ajax")}}}}// Define the FriendsList composable.
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun Ajax(int: Int?,onNavigateToProfile: (int:Int) -> Unit) {val text = remember {mutableStateOf("")}Box(contentAlignment = Alignment.Center, modifier = Modifier.fillMaxSize()) {Column {Text(text = "Ajax的內容 Profile傳過來的內容${int}")TextField(value =text.value , onValueChange ={text.value = it} )Button(onClick = { onNavigateToProfile(text.value.toInt()) }) {Text("Go to Profile")}}}
}