Мультиплатформенная ViewModel

Настройка зависимостей

Чтобы сделать ViewModel и пользовательский интерфейс общими для разных платформ:

1. Определите зависимости в файле каталога версий Gradle:

   [versions]
   androidx-viewmodel = "2.10.0"
   
   [libraries]
   androidx-lifecycle-viewmodel-compose = { module = "org.jetbrains.androidx.lifecycle:lifecycle-viewmodel-compose", version.ref = "androidx-viewmodel" }
   androidx-lifecycle-viewmodel-navigation3 = { module = "androidx.lifecycle:lifecycle-viewmodel-navigation3", version.ref = "androidx-viewmodel" }
   

2. В файле build.gradle.kts модуля KMP добавьте следующие зависимости в набор исходного кода commonMain:

   kotlin { // ... sourceSets { // ... commonMain.dependencies { implementation(libs.androidx.lifecycle.viewmodel.compose) implementation(libs.androidx.lifecycle.viewmodel.navigation3) } // ... } }

Если проект предназначен для настольной платформы, добавьте также зависимость kotlinx-coroutines-swing. При запуске корутин в ViewModel значение ViewModel.viewModelScope связано с Dispatchers.Main.immediate, которая может быть недоступна на настольных платформах по умолчанию. Библиотека Kotlinx Coroutines Swing обеспечивает корректную работу корутин ViewModel с Compose Multiplatform.

1. В каталоге версий Gradle:

   [versions]
   kotlinx-coroutines = "1.10.2"
   
   [libraries]
   kotlinx-coroutines-swing = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-swing", version.ref = "kotlinx-coroutines" }
   

2. В файле build.gradle.kts:

   kotlin { // ... sourceSets { // ... jvmMain.dependencies { implementation(libs.kotlinx.coroutines.swing) } // ... } }

   Подробности см. в документации по Dispatchers.Main.

Использование ViewModel в общем коде

Compose Multiplatform предоставляет общую реализацию ViewModelStoreOwner, поэтому использование класса ViewModel в общем коде мало чем отличается от рекомендаций по разработке для Android.

Однако на платформах, отличных от JVM, есть важное отличие: рефлексия типов для создания объектов недоступна. В общем коде нельзя вызывать функцию viewModel() без параметров. При каждом создании экземпляра ViewModel необходимо передавать как минимум инициализатор в качестве аргумента.

Если указан только инициализатор, Compose Multiplatform автоматически создает фабрику по умолчанию. Однако вы можете реализовать собственные фабрики и вызывать более явные варианты общей функции viewModel(), как и в Jetpack Compose.

Определим ViewModel и подключим ее к компонуемой функции:

1. Определите простой класс OrderViewModel, который управляет состоянием пользовательского интерфейса, включая количество и цену заказанного товара:

   data class OrderUiState(val quantity: Int = 0, val price: String = "$0.00")
   
   class OrderViewModel : ViewModel() {
      val uiState: StateFlow<OrderUiState>
          field = MutableStateFlow(OrderUiState())
   
      fun setQuantity(n: Int) {
          uiState.update { it.copy(quantity = n, price = "$${n * 2}.00") }
      }
   }
   

2. Добавьте пользовательскую ViewModel в компонуемую функцию, используя общую функцию viewModel() с инициализатором:

   import com.example.ui.OrderViewModel
   
   @Composable
   fun CupcakeApp(
      viewModel: OrderViewModel = viewModel { OrderViewModel() },
   ) {
      // ...
   }
   

Привязка ViewModel к областям действия в Navigation 3

При использовании ViewModel с Navigation 3 в общем коде по умолчанию ViewModel автоматически не привязываются к записям навигации. Без явной привязки каждая ViewModel будет связана с Activity, а не с экраном, даже после перехода пользователя на другой экран.

Чтобы привязать ViewModel и сохраняемое состояние Compose к каждой записи навигации, передайте декораторы записей Navigation 3 в NavDisplay при определении пунктов назначения навигации:

import androidx.lifecycle.viewmodel.navigation3.rememberViewModelStoreNavEntryDecorator
import androidx.navigation3.runtime.rememberSaveableStateHolderNavEntryDecorator

//...

NavDisplay(
   entryDecorators = listOf(
       // Saves Compose state per entry
       rememberSaveableStateHolderNavEntryDecorator(),
       // Scopes ViewModel per entry
       rememberViewModelStoreNavEntryDecorator()
   ),
   backStack = backStack,
   entryProvider = entryProvider { }
)

ViewModel и внедрение зависимостей

Фреймворк для внедрения зависимостей (DI) позволяет внедрять в компоненты разные зависимости с учетом текущего окружения или целевой платформы. Для управления ViewModel можно использовать Koin, Metro или любой другой DI-фреймворк с поддержкой Kotlin Multiplatform.

Пример расширенного использования внедрения зависимостей см. в руководстве Совместное использование слоя доступа к данным.

@Composable
fun CupcakeApp(
   viewModel: UserViewModel = koinViewModel()
) {
   // ...
}

@Composable
fun CupcakeApp(
   viewModel: UserViewModel = metroViewModel()
) {
   // ...
}

Уровни совместного использования кода

Вы можете выбрать, какие части кода сделать общими, а какие оставить специфичными для платформы:

• Чтобы совместно использовать пользовательский интерфейс и бизнес-логику на разных платформах, см. руководство по совместному использованию логики и пользовательского интерфейса.

• Чтобы совместно использовать часть кода без общей реализации пользовательского интерфейса, см. руководство по совместному использованию логики.

В следующих примерах показано, как использовать ViewModel при разных уровнях совместного использования кода. Все примеры основаны на описанном выше классе OrderViewModel.

@Composable
fun CupcakeApp(
   viewModel: OrderViewModel = viewModel { OrderViewModel() }
) {
   val uiState by viewModel.uiState.collectAsState()
    
   Column(modifier = Modifier.padding(16.dp)) {
       Text("Quantity: ${uiState.quantity}")
       Text("Price: ${uiState.price}")

       Button(onClick = { viewModel.setQuantity(6) }) {
           Text("Set Quantity to '6'")
       }
   }
}

@Composable
fun AndroidCupcakeApp(
   viewModel: OrderViewModel = viewModel { OrderViewModel() }
) {
   val uiState by viewModel.uiState.collectAsState()

   Column {
       Text("Quantity: ${uiState.quantity}")
       Text("Price: ${uiState.price}")
       Button(onClick = { viewModel.setQuantity(6) }) {
           Text("Set Quantity to '6'")
       }
   }
}

Что дальше

• Ознакомьтесь с полным примером.

• Дополнительные рекомендации для Android см. в разделе Настройка ViewModel для Kotlin Multiplatform.

• Узнайте, как интегрировать Compose Multiplatform со SwiftUI при использовании общих ViewModel с нативным пользовательским интерфейсом.