学习

Seminar Week 5 Summary · Jimmy Huang's Blog

导航组件	适用屏幕	典型位置	目的地数量	特点
导航栏（Navigation Bar）	小屏 / 紧凑窗口（compact window size），如手机	常见于底部，也可不局限于底部	3–5 个	每个目的地由 icon + label 表示，且始终有一个处于激活状态
导航轨（Navigation Rail）	中到大屏，如平板、桌面	屏幕侧边	3–7 个	适合更宽的布局，能承载更多顶层目的地
导航抽屉（Navigation Drawer）	旧命名/旧思路	侧边抽屉	-	在 Material 3 Expressive 中已被弱化/弃用，不是这周的重点

窗口大小	推荐组件
小屏（compact）	导航栏（Navigation Bar）
中屏 / 大屏（medium / expanded）	折叠或展开的标准导航轨（Collapsed / Expanded Standard Navigation Rail）
较小屏幕下的抽屉式展开导航	Expanded Modal Navigation Rail

类型	特征	适用场景	是否可隐藏
折叠式导航轨（Collapsed Navigation Rail）	沿窗口前导边缘常驻显示	中到超大窗口，如平板、桌面	一般不应隐藏
展开式导航轨（Expanded Navigation Rail）	可以展开更多内容	标准大屏，或以 modal 方式用于小屏	可以隐藏，通常由菜单图标触发

组件	本质	作用	记忆方式
NavController	类（class），有状态	控制页面跳转，维护返回栈	“导航大脑”
NavHost	可组合函数（Composable）	承载所有 screen，连接 controller 和 graph	“屏幕容器”
Navigation Graph	导航资源 / 路由图	定义有哪些 destinations，以及它们的关系	“应用地图”

配置项	作用	可以这样理解
`popUpTo(...)`	把某些 destination 从返回栈中弹出	控制返回栈不要无限膨胀
`saveState = true`	弹出前保存 UI 状态	以后回来时还能恢复
`launchSingleTop = true`	避免重复创建同一个顶部 destination	防止连续点同一 tab 产生多个副本
`restoreState = true`	恢复之前保存的状态	回到旧 tab 时保留原状态
`inclusive = false`	保留 `popUpTo` 指向的那个起点 destination	不把起始页一起删掉

参数	作用
`navController`	告诉 NavHost 谁来控制导航
`startDestination`	指定应用启动后默认先进入哪个 destination
`builder`	在这里逐个注册 composable destination

参数	作用
`icon`	图标内容
`label`	标签文本
`selected`	是否为当前激活目的地
`onClick`	点击时如何导航

代码

kotlin

@Composable
fun AppNavigation() {

    // 创建一个导航控制器
    // 可以把它理解成：页面跳转的“总指挥”
    val navController = rememberNavController()

    // 监听当前导航返回栈中的页面
    // 这样当页面切换时，Compose 会自动刷新 UI
    val navBackStackEntry by navController.currentBackStackEntryAsState()

    // 当前所在的页面信息（destination）
    val currentDestination = navBackStackEntry?.destination

    // Scaffold 是一个页面骨架
    // 常用于组织顶部栏、底部栏、中间内容区
    Scaffold(

        // 顶部栏
        topBar = {
            /* TopAppBar(...) */
        },

        // 底部导航栏
        bottomBar = {
            NavigationBar {

                // 遍历所有导航目的地，给每一个目的地生成一个底部按钮
                destinations.forEach { destination ->

                    NavigationBarItem(

                        // 按钮图标
                        icon = { /* Icon(...) */ },

                        // 按钮文字
                        label = { Text(destination.label) },

                        // 判断当前按钮是否处于“选中状态”
                        // 如果当前页面 route 和这个按钮的 route 一样，就高亮
                        selected = currentDestination?.route == destination.route,

                        // 点击按钮时触发页面跳转
                        onClick = {
                            navController.navigate(destination.route) {

                                // 跳转时回到导航图的起始页面层级
                                // 避免底部导航切换时堆积过多重复页面
                                popUpTo(navController.graph.findStartDestination().id) {

                                    // 保存被切走页面的状态
                                    // 比如滚动位置、输入内容等
                                    saveState = true
                                }

                                // 如果当前已经在目标页面，就不要重复创建一个新的页面
                                launchSingleTop = true

                                // 如果之前保存过这个页面的状态，就恢复它
                                restoreState = true
                            }
                        }
                    )
                }
            }
        }
    ) { innerPadding ->

        // NavHost：导航容器
        // 它负责根据 route（路由）来决定当前显示哪个页面
        NavHost(
            navController = navController,

            // App 启动后默认先进入 home 页面
            startDestination = "home",

            // 给内容区域加上 Scaffold 提供的内边距
            // 避免内容被顶部栏或底部栏挡住
            modifier = Modifier.padding(innerPadding)
        ) {

            // 当路由是 "home" 时，显示 HomeScreen()
            composable("home") { HomeScreen() }

            // 当路由是 "history" 时，显示 HistoryScreen()
            composable("history") { HistoryScreen() }

            // 当路由是 "profile" 时，显示 ProfileScreen()
            composable("profile") { ProfileScreen() }
        }
    }
}

机制	适合场景	生命周期特点
`remember`	单个 composable 内部的临时状态	绑定在 composable 的组合生命周期中
`ViewModel`	跨 screen 共享状态、需要更稳定保留的 UI 数据	生命周期更长，可跨配置变化保留

kotlin

navController.navigate(destination.route) {
    popUpTo(navController.graph.findStartDestination().id) {
        saveState = true
        // inclusive = false
    }
    launchSingleTop = true
    restoreState = true
}

kotlin

NavHost(
    navController = navController,
    startDestination = Destination.HOME.route,
    modifier = Modifier.padding(innerPadding)
) {
    composable(Destination.HOME.route) { HomeScreen() }
    composable(Destination.HISTORY.route) { HistoryScreen() }
    composable(Destination.PROFILE.route) { ProfileScreen() }
}

kotlin

sealed class Destination(val route: String) {
    data object Home : Destination("home")
    data object History : Destination("history")
    data object Profile : Destination("profile")
}

kotlin

class UserDataViewModel : ViewModel() {
    var fullName by mutableStateOf("")
    var email by mutableStateOf("")
    var tripDate by mutableStateOf("")
    var country by mutableStateOf("")
}

kotlin

@Composable
fun TripScreen(
    navController: NavHostController,
    viewModel: UserDataViewModel
) {
    TextField(
        value = viewModel.fullName,
        onValueChange = { viewModel.fullName = it },
        label = { Text("Full Name") }
    )
}

kotlin

IconButton(onClick = {
    scope.launch {
        if (drawerState.isClosed) {
            drawerState.open()
        } else {
            drawerState.close()
        }
    }
}) {
    /* icon */
}

Seminar Week 5 Summary

本周在课程中的位置

这周真正解决的问题

Seminar Week 5 Summary

本周在课程中的位置

这周真正解决的问题

Navigation 是什么，为什么重要

基本定义

为什么导航是核心 UX 组件

复习时要抓住的一句话

Material Design 3 中的导航思路

课程这周聚焦什么

Material 3 推荐的导航类型

设计建议：不同窗口大小对应什么导航

课堂强调的实际结论

Material Design Expressive：不只是“能用”，还要“自然、吸引人”

它是什么

可以这样理解

图示真正想表达什么

Navigation Bar 与 Navigation Rail

导航栏（Navigation Bar）

它是什么

关键特点

设计含义

当前页面如何被标识

导航轨（Navigation Rail）

它是什么

关键特点

两种形态

重点区别

本周最重要的实现框架：Compose Navigation 三件套

总览

Compose 前后有什么变化

1. NavController：导航的大脑

它负责什么

back stack 要怎么理解

为什么它是“有状态”的

如何获取 NavController

这行代码意味着什么

如何拿到当前页面

这两步在做什么

复习重点

navigate()：真正发起跳转的地方

这段配置在解决什么问题

为什么这里看起来不像普通 Kotlin 调用

本节一句话总结

2. NavHost：所有 screen 的容器

它是什么

可以这样理解

NavHost 需要哪些核心参数

核心参数解释

composable(route) { ... } 在做什么

本节一句话总结

3. Navigation Graph：应用的“地图”

它是什么

它出现在哪里

为什么 destination 常常用固定结构表示

复习时最该记住的点

Scaffold + NavigationBar：手机导航最常见的实现骨架

整体结构

这说明了什么

NavigationBarItem 的关键参数

最常见的实现流程

简化版骨架示例

这段结构最值得背下来的原因

多屏之间的数据共享：为什么要用 ViewModel

问题从哪里来

ViewModel 的作用

课件中的示例

这表示什么

多屏共享状态的典型方式

数据录入页

数据展示页

可以这样理解

ViewModel 和 remember 的区别

本周要特别分清的一点

协程（Coroutines）与可展开导航轨：本周只做轻量接触

为什么会提到协程

DrawerState 的创建方式

为什么需要 rememberCoroutineScope()

`navigate()`：真正发起跳转的地方

`composable(route) { ... }` 在做什么

ViewModel 和 `remember` 的区别

为什么需要 `rememberCoroutineScope()`

4. `launchSingleTop = true` 很重要