Agent skill · software engineering · affaan-m

compose-multiplatform-patterns

KMP项目中的Compose Multiplatform和Jetpack Compose模式——状态管理、导航、主题化、性能优化和平台特定UI。

Why this skill is useful

Provides specific patterns and best practices for state management, navigation, and performance optimization in Jetpack Compose and Compose Multiplatform that are not widely documented.

What it needs

Requires kotlin installed locally. About 3k tokens when loaded. Last updated 2026-08-06. 238,342 stars on the source repository.

What this skill does

Compose 多平台模式 使用 Compose Multiplatform 和 Jetpack Compose 构建跨 Android、iOS、桌面和 Web 的共享 UI 的模式。涵盖状态管理、导航、主题和性能。 何时启用 构建 Compose UI(Jetpack Compose 或 Compose Multiplatform) 使用 ViewModel 和 Compose 状态管理 UI 状态 在 KMP 或 Android 项目中实现导航 设计可复用的可组合项和设计系统 优化重组和渲染性能 状态管理 ViewModel + 单一状态对象 使用单个数据类表示屏幕状态。将其暴露为 StateFlow 并在 Compose 中收集: 在 Compose 中收集状态 事件接收器模式 对于复杂屏幕,使用密封接口表示事件,而非多个回调 lambda: 导航 类型安全导航(Compose Navigation 2.8+) 将路由定义为 @Serializable 对象: 对话框和底部抽屉导航 使用 dialog() 和覆盖层模式,而非命令式的显示/隐藏: 可组合项设计 基于槽位的 API 使用槽位参数设计可组合项以获得灵活性: 修饰符顺序 修饰符顺序很重要 —— 按此顺序应用: KMP 平台特定 UI 平台可组合项的 expect/actual 性能 用于可跳过重组的稳定类型 当所有属性都稳定时,将类标记为 @Stable 或 @Immutable: 正确使用 key() 和惰性列表 使用 derivedStateOf 延迟读取 避免在重组中分配内存 主题 Material 3 动态主题 应避免的反模式 在 ViewModel 中使用 mutableStateOf,而 MutableStateFlow 配合 collectAsStateWithLifecycle 对生命周期更安全 将 NavController 深入传递到可组合项中 —— 应传递 lambda 回调 在 @Composable 函数中进行繁重计算 —— 应移至 ViewModel 或 remember {} 使用 LaunchedEffect(Unit) 作为 ViewModel 初始化的替代 —— 在某些设置中,它会在配置更改时重新运行 在可组合项参数中创建新的对象实例 —— 会导致不必要的重组 参考资料 查看技能:android-clean-architecture 了解模块结构和分层。 查看技能:kotlin-coroutines-flows 了解协程和 Flow 模式。

How to use it

Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:

@skills affaan-m/compose-multiplatform-patterns--dc4284

View the source on GitHub

Browse the @skills marketplace