SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场compose-multiplatform-patterns

compose-multiplatform-patterns

前端与建站

查看项目

更新于 10-15 10:36

技能介绍

用途

本技能面向使用 Compose Multiplatform 和 Jetpack Compose 构建跨 Android、iOS、桌面和 Web 共享 UI 的 KMP 项目，提供经过验证的 UI 模式。当需要构建 Compose UI、使用 ViewModel 与 Compose 状态管理界面、在 KMP 或 Android 项目中实现导航、设计可复用 composable 与设计系统，或优化重组与渲染性能时，可激活本技能。

主要能力

状态管理

  • ViewModel + 单一状态对象：为屏幕状态使用单一 data class，通过 StateFlow 暴露并在 Compose 中收集。示例中定义了 ItemListState 数据类，包含 items、isLoading、error、searchQuery 字段；ItemListViewModel 持有 MutableStateFlow 并暴露只读 StateFlow，通过 viewModelScope.launch 加载数据，使用 fold 处理成功与失败。
  • 在 Compose 中收集状态：使用 collectAsStateWithLifecycle() 收集状态，将状态与事件回调传递给无状态 composable，便于预览和测试。
  • 事件接收器模式：对于复杂屏幕，使用 sealed interface 定义事件（如 Search、Delete、Refresh），在 ViewModel 中通过 onEvent 统一处理，Composable 只接收单个 lambda。

导航

  • 类型安全导航（Compose Navigation 2.8+）：使用 @Serializable 对象定义路由，如 HomeRoute、DetailRoute(val id: String)、SettingsRoute。在 NavHost 中使用 composable<HomeRoute> 等泛型方式声明目的地，通过 backStackEntry.toRoute<DetailRoute>() 获取参数。
  • 对话框与底部表单导航：使用 dialog<ConfirmDeleteRoute> 等声明式模式替代命令式 show/hide，通过 popBackStack() 关闭。

Composable 设计

  • 插槽式 API：设计 composable 时使用插槽参数（如 header、content、actions）提升灵活性。示例 AppCard 接受 modifier、header、content、actions 参数。
  • Modifier 顺序：Modifier 顺序影响效果，建议按布局（padding、size）、形状（clip）、绘制（background、border）、交互（clickable）的顺序应用。

KMP 平台特定 UI

  • expect/actual 平台 Composable：在 commonMain 中声明 expect fun PlatformStatusBar(darkIcons: Boolean)，在 androidMain 中使用 rememberSystemUiController 实现，在 iosMain 中通过 UIKit 互操作或 Info.plist 处理。

性能优化

  • 稳定类型与可跳过重组：当所有属性稳定时，使用 @Immutable 或 @Stable 标记类，如 ItemUiModel。
  • 正确使用 key() 与 Lazy 列表：在 LazyColumn 的 items 中提供稳定 key（如 it.id），以启用项复用和动画。
  • 使用 derivedStateOf 延迟读取：通过 derivedStateOf 派生状态，如根据 listState.firstVisibleItemIndex > 5 决定是否显示滚动到顶部按钮。
  • 避免重组中的分配：使用 remember(items) 缓存过滤结果，并用 key(item.id) 包裹每项，避免每次重组创建新 lambda 和列表。

主题

  • Material 3 动态主题：AppTheme 根据系统深色模式与动态颜色（Android 12+）选择 colorScheme，使用 dynamicDarkColorScheme、dynamicLightColorScheme、darkColorScheme、lightColorScheme。

应避免的反模式

  • 在 ViewModel 中使用 mutableStateOf，而非更安全的 MutableStateFlow 配合 collectAsStateWithLifecycle。
  • 将 NavController 深层传递到 composable 中，应传递 lambda 回调。
  • 在 @Composable 函数内进行重计算，应移至 ViewModel 或 remember {}。
  • 使用 LaunchedEffect(Unit) 替代 ViewModel init，在某些配置下会因配置变更重新运行。
  • 在 composable 参数中创建新对象实例，导致不必要的重组。

使用方式

本技能以模式参考形式提供，包含代码示例与最佳实践。在构建 Compose UI、管理状态、实现导航、设计组件或优化性能时，可参照对应章节的代码模式。技能还引用了 android-clean-architecture（模块结构与分层）和 kotlin-coroutines-flows（协程与 Flow 模式）两个相关技能。

适用场景

  • 使用 Compose Multiplatform 或 Jetpack Compose 构建 UI。
  • 在 KMP 或 Android 项目中管理 UI 状态与导航。
  • 设计可复用 composable 与设计系统。
  • 优化重组与渲染性能。
  • 处理平台特定 UI（如状态栏）。

限制

资料未提供关于收费、价格、平台支持范围、效果保证或具体使用步骤的额外信息。本技能为模式参考，不包含安装命令或独立运行方式。