资讯动态

android-jetpack-compose-expert - SKILL

发布时间:2026/10/26 1:42:21 来源:尧图企业网站定制
name: android-jetpack-compose-expertdescription: “Expert guidance for building modern Android UIs with Jetpack Compose, covering state management, navigation, performance, and Material Design 3.”risk: safesource: communitydate_added: “2026-02-27”Android Jetpack Compose 专家概览使用 Jetpack Compose 构建生产质量 Android 应用程序的全面指南。本技能涵盖架构模式、使用 ViewModel 的状态管理、导航类型安全以及性能优化技术。何时使用此技能在使用 Jetpack Compose 启动新的 Android 项目时使用。在将旧版 XML 布局迁移到 Compose 时使用。在实现复杂的 UI 状态管理和副作用时使用。在优化 Compose 性能重组计数、稳定性时使用。在设置具有类型安全的导航时使用。逐步指南1. 项目设置与依赖确保你的libs.versions.toml包含必要的 Compose BOM 和库。[versions]composeBom2024.02.01activityCompose1.8.2[libraries]androidx-compose-bom{groupandroidx.compose,namecompose-bom,version.refcomposeBom}androidx-ui{groupandroidx.compose.ui,nameui}androidx-ui-graphics{groupandroidx.compose.ui,nameui-graphics}androidx-ui-tooling-preview{groupandroidx.compose.ui,nameui-tooling-preview}androidx-material3{groupandroidx.compose.material3,namematerial3}androidx-activity-compose{groupandroidx.activity,nameactivity-compose,version.refactivityCompose}2. 状态管理模式MVI/MVVM使用ViewModel结合StateFlow来公开 UI 状态。避免公开MutableStateFlow。// UI State DefinitiondataclassUserUiState(valisLoading:Booleanfalse,valuser:User?null,valerror:String?null)// ViewModelclassUserViewModelInjectconstructor(privatevaluserRepository:UserRepository):ViewModel(){privateval_uiStateMutableStateFlow(UserUiState())valuiState:StateFlowUserUiState_uiState.asStateFlow()funloadUser(){viewModelScope.launch{_uiState.update{it.copy(isLoadingtrue)}try{valuseruserRepository.getUser()_uiState.update{it.copy(useruser,isLoadingfalse)}}catch(e:Exception){_uiState.update{it.copy(errore.message,isLoadingfalse)}}}}}3. 创建屏幕可组合项在“Screen”可组合函数中使用状态并将数据传递给无状态组件。ComposablefunUserScreen(viewModel:UserViewModelhiltViewModel()){valuiStatebyviewModel.uiState.collectAsStateWithLifecycle()UserContent(uiStateuiState,onRetryviewModel::loadUser)}ComposablefunUserContent(uiState:UserUiState,onRetry:()-Unit){Scaffold{padding-Box(modifierModifier.padding(padding)){when{uiState.isLoading-CircularProgressIndicator()uiState.error!null-ErrorView(uiState.error,onRetry)uiState.user!null-UserProfile(uiState.user)}}}}例子示例 1类型安全的导航使用新的导航 Compose 类型安全在最近版本中可用。// Define DestinationsSerializableobjectHomeSerializabledataclassProfile(valuserId:String)// Setup NavHostComposablefunAppNavHost(navController:NavHostController){NavHost(navController,startDestinationHome){composableHome{HomeScreen(onNavigateToProfile{id-navController.navigate(Profile(userIdid))})}composableProfile{backStackEntry-valprofile:ProfilebackStackEntry.toRoute()ProfileScreen(userIdprofile.userId)}}}最佳实践✅做使用remember和derivedStateOf来在重组过程中最小化不必要的计算。✅操作如果数据类用于 UI 状态并且包含List或其他不稳定类型请将其标记为Immutable或Stable以启用智能重组跳过。✅做:使用LaunchedEffect来处理由状态变化触发的一次性副作用例如显示 Snackbar。❌不要在 Composable 函数体内直接执行昂贵的操作例如排序列表而不使用remember。❌不要将ViewModel实例传递给子组件。只传递数据状态和 lambda 回调事件。故障排除问题:无限重组循环。解决方案检查是否在组合中创建了新的对象实例例如List或Modifier而没有使用remember或者是否在组合阶段更新了状态而不是在副作用或回调中更新。使用布局检查器Layout Inspector调试重组次数。限制仅当任务明确符合上述描述的范围时才使用此技能。不要将输出视为环境特定验证、测试或专家审查的替代品。如果缺少所需的输入、权限、安全界限或成功标准请停下来并要求澄清。

读完文章,也想定制专属网站?

尧图设计师 24 小时内与您沟通定制方案

免费获取报价 →
↑