UI 层：Compose 与 ViewModel

约 794 字大约 3 分钟

2026-03-20

1. 背景与目标

本页面向 Android 初学者，先回答三个问题：

UI 状态从哪里来？
UI 状态如何更新？
为什么要把状态和一次性事件分开？

2. 相关模块与文件位置（先看树）

app/src/main/java/com/kurosu/sleepin/ui/
├─ navigation/
│  ├─ Screen.kt                                  # 路由定义
│  └─ SleepInNavHost.kt                          # 导航图 + ViewModel 创建
├─ screen/
│  ├─ home/                                      # 首页课程网格
│  ├─ course/                                    # 课程列表与编辑
│  ├─ schedule/                                  # 作息模板列表与编辑
│  ├─ timetable/                                 # 学期课表列表与编辑
│  └─ settings/                                  # 设置页
├─ component/                                    # 可复用 Compose 组件
└─ theme/                                        # Material 3 主题与颜色

3. UI 层职责拆分

*Screen.kt：渲染状态 + 上报用户事件。
*ViewModel.kt：组合数据流、调用 UseCase、输出 StateFlow。
SleepInNavHost.kt：在路由处创建 ViewModel，并从 SleepInApplication 传入依赖。

4. 核心流程：`HomeViewModel` 多源状态聚合

关键文件：app/src/main/java/com/kurosu/sleepin/ui/screen/home/HomeViewModel.kt

sequenceDiagram
	participant VM as HomeViewModel
	participant UC1 as GetTimetablesUseCase
	participant UC2 as GetSchedulesUseCase
	participant UC3 as GetActiveTimetableUseCase
	participant UC4 as GetCoursesForTimetableUseCase

	VM->>UC1: collect timetables
	VM->>UC2: collect schedules
	VM->>UC3: collect active timetable
	VM->>UC4: collect courses for active timetable
	VM->>VM: combine(...) -> HomeUiState

这部分的重点是：

通过 combine(...) 把多个数据源合并为一个 HomeUiState。
manualSelectedWeek 用可空值表示“是否覆盖自动周次”。
now 每分钟更新，用于当前时间线和今日高亮。

5. 状态与事件：为什么分开

5.1 持久状态：`StateFlow`

典型写法（各编辑器 ViewModel 都类似）：

private val _uiState = MutableStateFlow(TimetableEditorUiState())
val uiState: StateFlow<TimetableEditorUiState> = _uiState.asStateFlow()

5.2 一次性事件：`SharedFlow`

典型场景：保存成功后返回、导出 CSV 触发系统保存器。

private val _events = MutableSharedFlow<TimetableEditorEvent>()
val events: SharedFlow<TimetableEditorEvent> = _events.asSharedFlow()

这样可以避免旋转屏或重组导致重复导航。

6. Compose 收集模式（推荐）

val uiState by viewModel.uiState.collectAsStateWithLifecycle()

LaunchedEffect(viewModel) {
	viewModel.events.collect { event ->
		// 导航、弹窗、文件保存等副作用
	}
}