Compose Multiplatform Patterns

affaan-m/ECC/pi/core/skills/compose-multiplatform-patterns

作者 affaan-mef648e01899ba3e8dc6371642deaaf64b4477775無授權條款275K 個星標收錄於 2026年10月9日更新於 2026年10月9日儲存庫4 天前更新

Compose Multiplatform and Jetpack Compose patterns for KMP projects — state management, navigation, theming, performance, and platform-specific UI. Use when building Compose or Jetpack Compose UI, state, navigation, or theming in a KMP project.

僅含說明Software Development

AI 產生的概覽

適用於 KMP 專案的 Compose Multiplatform 與 Jetpack Compose UI 參考模式。

功能: 提供使用 Compose Multiplatform 和 Jetpack Compose 在 Android、iOS、桌面端與 Web 上建構共用 UI 的指引與程式碼模式。內容涵蓋以 ViewModel 與 StateFlow 為基礎的狀態管理、型別安全導覽、可組合項設計、平台專屬的 expect/actual UI、效能調校以及 Material 3 主題。同時列出應避免的反模式。產出為說明與程式碼範例，而非檔案或指令碼。
適用情境: 在 Kotlin Multiplatform 專案中建構或審查 Compose 或 Jetpack Compose UI 時使用。適合 UI 狀態、導覽、可重複使用的可組合項、主題或重組效能相關的工作。
執行需求: 不隨附指令碼或工具，僅為說明文件。套用範例需具備包含 Compose、Compose Navigation 以及 Koin、Material 3 等相關函式庫的 Kotlin Multiplatform 或 Android 專案。

Compose Multiplatform Patterns

Patterns for building shared UI across Android, iOS, Desktop, and Web using Compose Multiplatform and Jetpack Compose. Covers state management, navigation, theming, and performance.

When to Activate

Building Compose UI (Jetpack Compose or Compose Multiplatform)
Managing UI state with ViewModels and Compose state
Implementing navigation in KMP or Android projects
Designing reusable composables and design systems
Optimizing recomposition and rendering performance

State Management

ViewModel + Single State Object

Use a single data class for screen state. Expose it as StateFlow and collect in Compose:

kotlin

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) } }            )        }    }}

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) } }            )        }    }}

Collecting State in Compose

kotlin

@Composablefun ItemListScreen(viewModel: ItemListViewModel = koinViewModel()) {    val state by viewModel.state.collectAsStateWithLifecycle()
    ItemListContent(        state = state,        onSearch = viewModel::onSearch    )}
@Composableprivate fun ItemListContent(    state: ItemListState,    onSearch: (String) -> Unit) {    // Stateless composable — easy to preview and test}

@Composablefun ItemListScreen(viewModel: ItemListViewModel = koinViewModel()) {    val state by viewModel.state.collectAsStateWithLifecycle()
    ItemListContent(        state = state,        onSearch = viewModel::onSearch    )}
@Composableprivate fun ItemListContent(    state: ItemListState,    onSearch: (String) -> Unit) {    // Stateless composable — easy to preview and test}

Event Sink Pattern

For complex screens, use a sealed interface for events instead of multiple callback lambdas:

kotlin

sealed interface ItemListEvent {    data class Search(val query: String) : ItemListEvent    data class Delete(val itemId: String) : ItemListEvent    data object Refresh : ItemListEvent}
// In ViewModelfun 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 manyItemListContent(    state = state,    onEvent = viewModel::onEvent)

sealed interface ItemListEvent {    data class Search(val query: String) : ItemListEvent    data class Delete(val itemId: String) : ItemListEvent    data object Refresh : ItemListEvent}
// In ViewModelfun 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 manyItemListContent(    state = state,    onEvent = viewModel::onEvent)

Navigation

Type-Safe Navigation (Compose Navigation 2.8+)

Define routes as @Serializable objects:

kotlin

@Serializable data object HomeRoute@Serializable data class DetailRoute(val id: String)@Serializable data object SettingsRoute
@Composablefun 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() }    }}

@Serializable data object HomeRoute@Serializable data class DetailRoute(val id: String)@Serializable data object SettingsRoute
@Composablefun 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 and Bottom Sheet Navigation

Use dialog() and overlay patterns instead of imperative show/hide:

kotlin

NavHost(navController, startDestination = HomeRoute) {    composable<HomeRoute> { /* ... */ }    dialog<ConfirmDeleteRoute> { backStackEntry ->        val route = backStackEntry.toRoute<ConfirmDeleteRoute>()        ConfirmDeleteDialog(            itemId = route.itemId,            onConfirm = { navController.popBackStack() },            onDismiss = { navController.popBackStack() }        )    }}

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 Design

Slot-Based APIs

Design composables with slot parameters for flexibility:

kotlin

@Composablefun 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)        }    }}

@Composablefun 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)        }    }}

Modifier Ordering

Modifier order matters — apply in this sequence:

kotlin

Text(    text = "Hello",    modifier = Modifier        .padding(16.dp)          // 1. Layout (padding, size)        .clip(RoundedCornerShape(8.dp))  // 2. Shape        .background(Color.White) // 3. Drawing (background, border)        .clickable { }           // 4. Interaction)

Text(    text = "Hello",    modifier = Modifier        .padding(16.dp)          // 1. Layout (padding, size)        .clip(RoundedCornerShape(8.dp))  // 2. Shape        .background(Color.White) // 3. Drawing (background, border)        .clickable { }           // 4. Interaction)

KMP Platform-Specific UI

expect/actual for Platform Composables

kotlin

// commonMain@Composableexpect fun PlatformStatusBar(darkIcons: Boolean)
// androidMain@Composableactual fun PlatformStatusBar(darkIcons: Boolean) {    val systemUiController = rememberSystemUiController()    SideEffect { systemUiController.setStatusBarColor(Color.Transparent, darkIcons) }}
// iosMain@Composableactual fun PlatformStatusBar(darkIcons: Boolean) {    // iOS handles this via UIKit interop or Info.plist}

// commonMain@Composableexpect fun PlatformStatusBar(darkIcons: Boolean)
// androidMain@Composableactual fun PlatformStatusBar(darkIcons: Boolean) {    val systemUiController = rememberSystemUiController()    SideEffect { systemUiController.setStatusBarColor(Color.Transparent, darkIcons) }}
// iosMain@Composableactual fun PlatformStatusBar(darkIcons: Boolean) {    // iOS handles this via UIKit interop or Info.plist}

Performance

Stable Types for Skippable Recomposition

Mark classes as @Stable or @Immutable when all properties are stable:

kotlin

@Immutabledata class ItemUiModel(    val id: String,    val title: String,    val description: String,    val progress: Float)

@Immutabledata class ItemUiModel(    val id: String,    val title: String,    val description: String,    val progress: Float)

Use `key()` and Lazy Lists Correctly

kotlin

LazyColumn {    items(        items = items,        key = { it.id }  // Stable keys enable item reuse and animations    ) { item ->        ItemRow(item = item)    }}

LazyColumn {    items(        items = items,        key = { it.id }  // Stable keys enable item reuse and animations    ) { item ->        ItemRow(item = item)    }}

Defer Reads with `derivedStateOf`

kotlin

val listState = rememberLazyListState()val showScrollToTop by remember {    derivedStateOf { listState.firstVisibleItemIndex > 5 }}

val listState = rememberLazyListState()val showScrollToTop by remember {    derivedStateOf { listState.firstVisibleItemIndex > 5 }}

Avoid Allocations in Recomposition

kotlin

// BAD — new lambda and list every recompositionitems.filter { it.isActive }.forEach { ActiveItem(it, onClick = { handle(it) }) }
// GOOD — key each item so callbacks stay attached to the right rowval activeItems = remember(items) { items.filter { it.isActive } }activeItems.forEach { item ->    key(item.id) {        ActiveItem(item, onClick = { handle(item) })    }}

// BAD — new lambda and list every recompositionitems.filter { it.isActive }.forEach { ActiveItem(it, onClick = { handle(it) }) }
// GOOD — key each item so callbacks stay attached to the right rowval activeItems = remember(items) { items.filter { it.isActive } }activeItems.forEach { item ->    key(item.id) {        ActiveItem(item, onClick = { handle(item) })    }}

Theming

Material 3 Dynamic Theming

kotlin

@Composablefun AppTheme(    darkTheme: Boolean = isSystemInDarkTheme(),    dynamicColor: Boolean = true,    content: @Composable () -> Unit) {    val colorScheme = when {        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {            if (darkTheme) dynamicDarkColorScheme(LocalContext.current)            else dynamicLightColorScheme(LocalContext.current)        }        darkTheme -> darkColorScheme()        else -> lightColorScheme()    }
    MaterialTheme(colorScheme = colorScheme, content = content)}

@Composablefun AppTheme(    darkTheme: Boolean = isSystemInDarkTheme(),    dynamicColor: Boolean = true,    content: @Composable () -> Unit) {    val colorScheme = when {        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {            if (darkTheme) dynamicDarkColorScheme(LocalContext.current)            else dynamicLightColorScheme(LocalContext.current)        }        darkTheme -> darkColorScheme()        else -> lightColorScheme()    }
    MaterialTheme(colorScheme = colorScheme, content = content)}

Anti-Patterns to Avoid

Using mutableStateOf in ViewModels when MutableStateFlow with collectAsStateWithLifecycle is safer for lifecycle
Passing NavController deep into composables — pass lambda callbacks instead
Heavy computation inside @Composable functions — move to ViewModel or remember {}
Using LaunchedEffect(Unit) as a substitute for ViewModel init — it re-runs on configuration change in some setups
Creating new object instances in composable parameters — causes unnecessary recomposition

References

See skill: android-clean-architecture for module structure and layering. See skill: kotlin-coroutines-flows for coroutine and Flow patterns.

來源與署名

來源：affaan-m/ECC位於pi/core/skills/compose-multiplatform-patterns提交ef648e0

授權條款：無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架

Compose Multiplatform Patterns

Compose Multiplatform Patterns

When to Activate

State Management

ViewModel + Single State Object

Collecting State in Compose

Event Sink Pattern

Navigation

Type-Safe Navigation (Compose Navigation 2.8+)

Dialog and Bottom Sheet Navigation

Composable Design

Slot-Based APIs

Modifier Ordering

KMP Platform-Specific UI

expect/actual for Platform Composables

Performance

Stable Types for Skippable Recomposition

Use `key()` and Lazy Lists Correctly

Defer Reads with `derivedStateOf`

Avoid Allocations in Recomposition

Theming

Material 3 Dynamic Theming

Anti-Patterns to Avoid

References

來源與署名

更多來自 affaan-m/ECC 的技能

Unified Notifications Ops

Verification Loop

Ui To Vue

Unified Memory

Visa Doc Translate

Team Builder

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices

Compose Multiplatform Patterns

Compose Multiplatform Patterns

When to Activate

State Management

ViewModel + Single State Object

Collecting State in Compose

Event Sink Pattern

Navigation

Type-Safe Navigation (Compose Navigation 2.8+)

Dialog and Bottom Sheet Navigation

Composable Design

Slot-Based APIs

Modifier Ordering

KMP Platform-Specific UI

expect/actual for Platform Composables

Performance

Stable Types for Skippable Recomposition

Use key() and Lazy Lists Correctly

Defer Reads with derivedStateOf

Avoid Allocations in Recomposition

Theming

Material 3 Dynamic Theming

Anti-Patterns to Avoid

References

來源與署名

更多來自 affaan-m/ECC 的技能

Unified Notifications Ops

Verification Loop

Ui To Vue

Unified Memory

Visa Doc Translate

Team Builder

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices

Use `key()` and Lazy Lists Correctly

Defer Reads with `derivedStateOf`