說明
在 UserMainScreen (route 名稱為 user_main) 的文字方塊中輸入姓名，按下按鈕後，傳給 UserDetailScreen。
UserDetailScreen (route 名稱為 user_detail) 接受姓名參數，在畫面中顯示資料。
程式碼
第一個畫面: UserMainScreen (user_main)
在 NavGraph 的部分，沒什麼需要注意的地方
composable(
route="user_main",
) {
UserMainScreen(
navController = navController,
)
}在 Composable 的部分，要注意 Button 的 onClick ，其所用類似 URL 的表示方式
反斜線表示為必要欄位，問號則表示為非必要欄位
@Composable
fun UserMainScreen(
navController: NavHostController,
) {
Column(
modifier = Modifier.padding(50.dp),
) {
var text by remember {
mutableStateOf("")
}
Text(text = "User Main Screen")
TextField(
value = text,
onValueChange = {
text = it
},
)
Spacer(modifier = Modifier.height(16.dp))
Button(
onClick = {
// 以類似 URL 的方式傳遞資料
navController.navigate("user_detail/$text")
}
) {
Text(text = "To User Detail Screen")
}
}
}第二個畫面：UserDetailScreen (user_detail)
NavGraph 的部分，有比較多東西要注意
composable(
route="user_detail" + "/{name}",
arguments = listOf(
navArgument("name") {
type = NavType.StringType
defaultValue = "Steve"
nullable = true
}
)
) { entry ->
UserDetailScreen(
name = entry.arguments?.getString("name")
)
}Composable 的部分，只要注意傳入的參數即可
@Composable
fun UserDetailScreen(
name: String?
) {
Column(
modifier = Modifier.padding(50.dp)
) {
Text(text = "Hello, $name")
}
}
完整程式碼
build.gradle.kt (Module level: app)
...
dependencies {
...
implementation("androidx.navigation:navigation-compose:2.9.0")
}
UserScreens.kt
@Composable
fun UserMainScreen(
navController: NavHostController,
) {
Column(
modifier = Modifier.padding(50.dp),
) {
var text by remember {
mutableStateOf("")
}
Text(text = "User Main Screen")
TextField(
value = text,
onValueChange = {
text = it
},
)
Spacer(modifier = Modifier.height(16.dp))
Button(
onClick = {
navController.navigate("user_detail/$text")
}
) {
Text(text = "To User Detail Screen")
}
}
}
@Composable
fun UserDetailScreen(
name: String?
) {
Column(
modifier = Modifier.padding(50.dp)
) {
Text(text = "Hello, $name")
}
}
MainActivity.kt
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContent {
NavigationLab2Theme {
val navController = rememberNavController()
NavHost(
navController = navController,
startDestination = "user_main",
modifier = Modifier
) {
userGraph(navController)
}
}
}
}
}
fun NavGraphBuilder.userGraph(
navController: NavHostController
) {
composable(
route="user_main",
) { entry ->
UserMainScreen(
navController = navController,
)
}
composable(
route="user_detail" + "/{name}",
arguments = listOf(
navArgument("name") {
type = NavType.StringType
defaultValue = "Steve"
nullable = true
}
)
) { entry ->
UserDetailScreen(
name = entry.arguments?.getString("name")
)
}
}
Comments