🧭 NavHost & NavController

⚡ 路由跳转实战 Jetpack Compose

📘 第三课 · 掌握 NavHost 组件详解、NavController 的创建与获取、
以及 rememberNavController() 的优雅用法。

NavHost 组件详解

🏗️ 定义： NavHost 是 Compose 导航的容器，组合 NavController 与 NavGraph，负责页面占位与切换。
🧩 核心参数： navController、startDestination、builder (composable 注册)。
📌 特性： 自动处理返回栈、过渡动画、深层链接、类型安全参数。
🎯 最佳实践： 每个屏幕对应一个 composable 路由，使用字符串路由或类型安全路由。

属性	类型	说明
navController	NavHostController	控制导航状态与动作
startDestination	String	起始路由，应用启动时显示
modifier	Modifier	修饰布局
route	String?	NavHost 自身的路由（嵌套导航）
builder	NavGraphBuilder.() → Unit	注册 composable 目的地

NavController 创建 & rememberNavController()

🔧 创建方式

rememberNavController() —— 推荐！自动在 Composable 中创建并记住实例。
NavHostController(context) —— 手动创建，需自行管理生命周期。

🧠 rememberNavController() 优势

自动绑定 Composable 生命周期
配置更改后状态保留
无需手动释放
代码简洁，官方首选

// 1. 使用 rememberNavController() 创建 NavController
@Composable
fun MyApp() {
    val navController = rememberNavController()

    NavHost(
        navController = navController,
        startDestination = "home"
    ) {
        composable("home") { HomeScreen(navController) }
        composable("profile/{userId}") { ProfileScreen(navController) }
    }
}

// 2. 在子 Composable 中获取 NavController (通过参数传递)
@Composable
fun HomeScreen(navController: NavController) {
    Button(onClick = { navController.navigate("profile/42") }) {
        Text("查看用户 42")
    }
}

📌 NavHost + NavController 协作架构图

NavController 获取方式对比

方式	作用域	生命周期	推荐指数
rememberNavController()	Composable 函数	自动跟随 Composition	⭐⭐⭐⭐⭐
LocalNavController.current	Composable 树 (CompositionLocal)	需提供 NavController	⭐⭐⭐⭐
NavHostController(context)	Activity / Fragment	手动管理	⭐⭐⭐
ViewModel + 共享	跨屏幕	ViewModel 作用域	⭐⭐⭐

💡 提示： 在 Composable 中始终优先使用 rememberNavController()，它内部使用 remember + mutableStateOf 保证重组安全。如需在嵌套导航中获取父级 NavController，可使用 LocalNavController.current (需在 NavHost 作用域内)。