第七章：状态管理实战与架构总结

第七章：状态管理实战与架构总结

本章通过完整的首页/个人中心/详情页数据流分析，巩固 MVVM + Repository + UiState 架构模式。

7.1 首页完整数据流

// 1. HomePage 调用 viewModel@ComposablefunHomePage(navController:NavController){valviewModel:HomeViewModel=viewModel()valuiStatebyviewModel.uiState.collectAsState()HomePageContent(uiState=uiState,onArticleClick={article->navController.navigate(AppRoutes.detailRoute(article.id))},onSearchChange=viewModel::updateSearchKeyword,onSortConfirm=viewModel::sortByTitle,onRetry=viewModel::loadData,)}// 2. ViewModel 管理状态classHomeViewModel:ViewModel(){privatevarsourceList=mutableListOf<ArticleBean>()privateval_uiState=MutableStateFlow<HomeUiState>(HomeUiState.Loading)valuiState:StateFlow<HomeUiState>=_uiState.asStateFlow()init{loadData()}funloadData(){viewModelScope.launch{_uiState.value=HomeUiState.Loadingtry{valresult=ArticleRepository.getArticleList()sourceList=result.toMutableList()_uiState.value=HomeUiState.Success(articles=result)}catch(e:Exception){_uiState.value=HomeUiState.Error(e.message?:"加载失败")}}}funupdateSearchKeyword(keyword:String){valfiltered=if(keyword.isBlank())sourceListelsesourceList.filter{it.title.contains(keyword,ignoreCase=true)}_uiState.value=HomeUiState.Success(articles=filtered,searchKeyword=keyword)}funsortByTitle(){valcurrent=_uiState.valueas?HomeUiState.Success?:return_uiState.update{HomeUiState.Success(articles=current.articles.sortedBy{it.title},searchKeyword=current.searchKeyword,)}}}// 3. Composable 渲染不同状态@ComposablefunHomePageContent(uiState:HomeUiState,...){when(uiState){isHomeUiState.Loading->Box(contentAlignment=Alignment.Center){CircularProgressIndicator()}isHomeUiState.Error->Column{Text(uiState.message);Button(onRetry){Text("重试")}}isHomeUiState.Success->HomeSuccessContent(uiState)}}

7.2 个人中心完整数据流

// ViewModelclassProfileViewModel:ViewModel(){privateval_uiState=MutableStateFlow<ProfileUiState>(ProfileUiState.Loading)valuiState:StateFlow<ProfileUiState>=_uiState.asStateFlow()init{loadProfile()}funloadProfile(){viewModelScope.launch{_uiState.value=ProfileUiState.Loadingtry{valuser=ProfileRepository.getProfile()// 本地示例数据，300ms 延迟_uiState.value=ProfileUiState.Success(user=user)}catch(e:Exception){_uiState.value=ProfileUiState.Error(e.message?:"加载失败")}}}funsetNotificationEnabled(enabled:Boolean){_uiState.update{state->if(stateisProfileUiState.Success)state.copy(notificationEnabled=enabled)elsestate}}}// UiState 定义sealedinterfaceProfileUiState{dataobjectLoading:ProfileUiStatedataclassSuccess(valuser:ProfileUser,valnotificationEnabled:Boolean=true):ProfileUiStatedataclassError(valmessage:String):ProfileUiState}

特点：

• 通知开关状态保存在Success.notificationEnabled
• 调用setNotificationEnabled直接更新 UI 状态，无需网络请求

7.3 详情页完整数据流

// DetailPage 绑定 ViewModel@ComposablefunDetailPage(navController:NavController,articleId:Int){valviewModel:DetailViewModel=viewModel(key="detail_$articleId",factory=DetailViewModelFactory(articleId),)valuiStatebyviewModel.uiState.collectAsState()DetailPageContent(uiState=uiState,onBackClick={navController.popBackStack()})}// ViewModelclassDetailViewModel(privatevalarticleId:Int):ViewModel(){privateval_uiState=MutableStateFlow<DetailUiState>(DetailUiState.Loading)valuiState:StateFlow<DetailUiState>=_uiState.asStateFlow()init{loadArticle()}funloadArticle(){viewModelScope.launch{_uiState.value=DetailUiState.Loadingvalarticle=ArticleRepository.getArticleById(articleId)// 从缓存读取_uiState.value=if(article!=null)DetailUiState.Success(article)elseDetailUiState.Error("未找到该商品")}}}// Factory（因为 ViewModel 有构造参数）classDetailViewModelFactory(privatevalarticleId:Int):ViewModelProvider.Factory{overridefun<T:ViewModel>create(modelClass:Class<T>):T{returnDetailViewModel(articleId)asT}}

7.4 三页面对比总结

7.5 架构统一性

每个页面的代码结构完全一致：

XxxPage(navController) → viewModel() 获取 ViewModel → collectAsState() 监听 UI 状态 → XxxPageContent(uiState, callbacks) → when(uiState) { Loading / Success / Error }

Repository 职责清晰：

• ArticleRepository.getArticleList()→ 网络 + 缓存
• ArticleRepository.getArticleById(id)→ 缓存查询
• ProfileRepository.getProfile()→ 本地示例数据

7.6 课后练习建议

7.7 后续可改进方向

7.8 总结

• 三个页面遵循统一的 MVVM + sealed UiState 模式
• ViewModel 管理状态，Composable 只负责渲染
• Repository 统一数据来源，网络/本地/缓存分层
• 状态变化通过 StateFlow 观察，collectAsState() 转为 Compose 状态
• UI 与业务逻辑完全解耦，便于测试与维护

恭喜完成 MyFirstCompose 教程学习！🎉

上一章：第六章：UI 组件与 Material3 主题