kotlin，jetpack compose 最简导航（navigation）案例学习

// 添加导航组件依赖，用于支持Compose中的导航功能
implementation ("androidx.navigation:navigation-compose:2.8.9")

// 定义包名
package com.example.mynavigation// 导入所需的Android和Compose库
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.navigation.NavController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import com.example.mynavigation.ui.theme.MyNavigationTheme// 定义MainActivity类，继承自ComponentActivity
class MainActivity : ComponentActivity() {// 重写onCreate方法，用于初始化Activityoverride fun onCreate(savedInstanceState: Bundle?) {// 调用父类的onCreate方法super.onCreate(savedInstanceState)// 启用边缘到边缘的显示模式enableEdgeToEdge()// 设置Activity的内容视图setContent {// 使用自定义的主题MyNavigationTheme {// 创建一个导航控制器val navController = rememberNavController()// 定义导航图NavHost(navController = navController, startDestination = "home") {// 定义home目的地的界面composable("home") { HomeScreen(navController) }// 定义detail456目的地的界面，并传递id参数composable("detail/{id}") { backStackEntry ->// 从导航参数中获取idval id = backStackEntry.arguments?.getString("id")// 显示DetailScreen界面DetailScreen(navController, id)}}}}}
}// 定义HomeScreen可组合函数，用于显示主界面
@Composable
fun HomeScreen(navController: NavController) {// 使用Column布局，填充整个屏幕，内容垂直和水平居中Column(modifier = Modifier.fillMaxSize(), // 填充整个屏幕verticalArrangement = Arrangement.Center, // 垂直居中horizontalAlignment = Alignment.CenterHorizontally // 水平居中) {// 定义一个按钮，点击后导航到detail456界面，并传递id参数Button(onClick = { navController.navigate("detail/123") }) {// 按钮上显示文本Text("Navigate with ID 123")}}
}// 定义DetailScreen可组合函数，用于显示详情界面
@Composable
fun DetailScreen(navController: NavController, id: String?) {// 使用Column布局，填充整个屏幕，内容垂直和水平居中Column(modifier = Modifier.fillMaxSize(), // 填充整个屏幕verticalArrangement = Arrangement.Center, // 垂直居中horizontalAlignment = Alignment.CenterHorizontally // 水平居中) {// 显示详情界面的标题Text("Detail Screen")// 显示传递过来的id，如果id为空则显示"Unknown"Text("ID:  ${id ?: "Unknown"}")// 定义一个按钮，点击后返回上一个界面Button(onClick = { navController.navigateUp() }) {// 按钮上显示文本Text("Back")}}
}