$ loading_
帮助开发者掌握 KMP 中 Compose Multiplatform 的状态、导航、主题与性能模式。
复制安装指令，让 AI 自动完成配置 · 推荐新手
请帮我安装 askskill 上的 "compose-multiplatform-patterns" 技能： 1. 下载 https://raw.githubusercontent.com/affaan-m/ECC/main/docs/zh-CN/skills/compose-multiplatform-patterns/SKILL.md 2. 保存为 ~/.claude/skills/compose-multiplatform-patterns/SKILL.md 3. 装好后重载技能，告诉我可以用了
请为一个使用 Kotlin Multiplatform 的 Compose Multiplatform 项目设计状态管理方案，包含 UI state、事件处理、ViewModel/Presenter 分层、共享业务逻辑与平台端适配，并给出推荐目录结构和示例代码。
一套清晰的跨平台状态管理模式说明，附带架构建议、目录结构与示例代码。
我在 KMP 项目里使用 Compose Multiplatform，请给我一个支持 Android、Desktop 和 iOS 的导航模式，说明路由定义、页面切换、参数传递、返回栈管理以及平台差异处理，并提供可落地的代码示例。
一个可复用的多平台导航方案，涵盖核心设计原则与关键实现代码。
请审查 Compose Multiplatform 应用的主题化与性能实践，给出统一设计系统、深色模式、平台特定 UI 定制、重组优化、列表性能和资源管理的最佳实践清单，并附示例。
一份主题与性能优化建议清单，包含跨平台 UI 一致性和性能改进示例。
使用 Compose Multiplatform 和 Jetpack Compose 构建跨 Android、iOS、桌面和 Web 的共享 UI 的模式。涵盖状态管理、导航、主题和性能。
使用单个数据类表示屏幕状态。将其暴露为 StateFlow 并在 Compose 中收集：
data class ItemListState(
val items: List<Item> = emptyList(),
val isLoading: Boolean = false,
val error: String? = null,
val searchQuery: String = ""
)
class ItemListViewModel(
private val getItems: GetItemsUseCase
) : ViewModel() {
private val _state = MutableStateFlow(ItemListState())
val state: StateFlow<ItemListState> = _state.asStateFlow()
fun onSearch(query: String) {
_state.update { it.copy(searchQuery = query) }
loadItems(query)
}
private fun loadItems(query: String) {
viewModelScope.launch {
_state.update { it.copy(isLoading = true) }
getItems(query).fold(
onSuccess = { items -> _state.update { it.copy(items = items, isLoading = false) } },
onFailure = { e -> _state.update { it.copy(error = e.message, isLoading = false) } }
)
}
}
}
@Composable
fun ItemListScreen(viewModel: ItemListViewModel = koinViewModel()) {
val state by viewModel.state.collectAsStateWithLifecycle()
ItemListContent(
state = state,
onSearch = viewModel::onSearch
)
}
@Composable
private fun ItemListContent(
state: ItemListState,
onSearch: (String) -> Unit
) {
// Stateless composable — easy to preview and test
}
对于复杂屏幕，使用密封接口表示事件，而非多个回调 lambda：
sealed interface ItemListEvent {
data class Search(val query: String) : ItemListEvent
data class Delete(val itemId: String) : ItemListEvent
data object Refresh : ItemListEvent
}
// In ViewModel
fun onEvent(event: ItemListEvent) {
when (event) {
is ItemListEvent.Search -> onSearch(event.query)
is ItemListEvent.Delete -> deleteItem(event.itemId)
is ItemListEvent.Refresh -> loadItems(_state.value.searchQuery)
}
}
// In Composable — single lambda instead of many
ItemListContent(
state = state,
onEvent = viewModel::onEvent
)
将路由定义为 @Serializable 对象：
@Serializable data object HomeRoute
@Serializable data class DetailRoute(val id: String)
@Serializable data object SettingsRoute
@Composable
fun AppNavHost(navController: NavHostController = rememberNavController()) {
NavHost(navController, startDestination = HomeRoute) {
composable<HomeRoute> {
HomeScreen(onNavigateToDetail = { id -> navController.navigate(DetailRoute(id)) })
}
composable<DetailRoute> { backStackEntry ->
val route = backStackEntry.toRoute<DetailRoute>()
DetailScreen(id = route.id)
}
composable<SettingsRoute> { SettingsScreen() }
}
}
使用 dialog() 和覆盖层模式，而非命令式的显示/隐藏：
NavHost(navController, startDestination = HomeRoute) {
composable<HomeRoute> { /* ... */ }
dialog<ConfirmDeleteRoute> { backStackEntry ->
val route = backStackEntry.toRoute<ConfirmDeleteRoute>()
ConfirmDeleteDialog(
itemId = route.itemId,
onConfirm = { navController.popBackStack() },
onDismiss = { navController.popBackStack() }
)
}
}
使用槽位参数设计可组合项以获得灵活性：
@Composable
fun AppCard(
modifier: Modifier = Modifier,
header: @Composable () -> Unit = {},
content: @Composable ColumnScope.() -> Unit,
actions: @Composable RowScope.() -> Unit = {}
) {
Card(modifier = modifier) {
Column {
header()
Column(content = content)
Row(horizontalArrangement = Arrangement.End, content = actions)
}
…
通过双评审智能体对结果进行对抗式校验，提升输出发布前的可靠性
帮助开发者掌握 Kotlin 协程与 Flow 在 Android 和 KMP 中的实战模式。