{"id":332628,"date":"2022-04-30T15:00:12","date_gmt":"2022-04-30T15:00:12","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=332628"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=332628","title":{"rendered":"\u041a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Kotlin Multiplatform ViewModel \u0432 SwiftUI \u0438 Jetpack Compose<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
\n

\u041c\u044b \u0432\u00a0IceRock Development<\/a>\u00a0\u0443\u0436\u0435 \u043c\u043d\u043e\u0433\u043e \u043b\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u043c MVVM, \u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 4 \u0433\u043e\u0434\u0430 \u043d\u0430\u0448\u0438\u00a0ViewModel<\/code>\u00a0\u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u044b \u0432 \u043e\u0431\u0449\u0435\u043c \u043a\u043e\u0434\u0435, \u0437\u0430 \u0441\u0447\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430\u0448\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438\u00a0moko-mvvm<\/a>. \u0412 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0433\u043e\u0434 \u043c\u044b \u0430\u043a\u0442\u0438\u0432\u043d\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 Jetpack Compose \u0438 SwiftUI \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f UI \u0432 \u043d\u0430\u0448\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445. \u0418 \u044d\u0442\u043e \u043f\u043e\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u043e \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f MOKO MVVM, \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u043c \u043d\u0430 \u043e\u0431\u0435\u0438\u0445 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430\u0445 \u0431\u044b\u043b\u043e \u0443\u0434\u043e\u0431\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0442\u0430\u043a\u0438\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u043e\u043c.<\/p>\n

30 \u0430\u043f\u0440\u0435\u043b\u044f 2022 \u0432\u044b\u0448\u043b\u0430\u00a0\u043d\u043e\u0432\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f MOKO MVVM — 0.13.0<\/a>. \u0412 \u044d\u0442\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 Jetpack Compose \u0438 SwiftUI. \u0420\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c ViewModel \u0438\u0437 \u043e\u0431\u0449\u0435\u0433\u043e \u043a\u043e\u0434\u0430 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u043c\u0438.<\/p>\n

\u041f\u0440\u0438\u043c\u0435\u0440 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 — \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u044d\u043a\u0440\u0430\u043d\u043e\u043c \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438. \u0414\u0432\u0430 \u043f\u043e\u043b\u044f \u0432\u0432\u043e\u0434\u0430 — \u043b\u043e\u0433\u0438\u043d \u0438 \u043f\u0430\u0440\u043e\u043b\u044c, \u043a\u043d\u043e\u043f\u043a\u0430 \u0412\u043e\u0439\u0442\u0438 \u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u043c \u0432\u0445\u043e\u0434\u0435 \u043f\u043e\u0441\u043b\u0435 \u0441\u0435\u043a\u0443\u043d\u0434\u044b \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u044f (\u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043e\u0436\u0438\u0434\u0430\u043d\u0438\u044f \u043a\u0440\u0443\u0442\u0438\u043c \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441 \u0431\u0430\u0440).<\/p>\n

\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442<\/h3>\n

\u041f\u0435\u0440\u0432\u044b\u0439 \u0448\u0430\u0433 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 — \u0431\u0435\u0440\u0435\u043c Android Studio, \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c\u00a0Kotlin Multiplatform Mobile IDE \u043f\u043b\u0430\u0433\u0438\u043d<\/a>, \u0435\u0441\u043b\u0438 \u0435\u0449\u0435 \u043d\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d. \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442 \u043f\u043e \u0448\u0430\u0431\u043b\u043e\u043d\u0443 «Kotlin Multiplatform App» \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c\u00a0CocoaPods integration<\/code>\u00a0(\u0441 \u043d\u0438\u043c\u0438 \u0443\u0434\u043e\u0431\u043d\u0435\u0435, \u043f\u043b\u044e\u0441 \u043d\u0430\u043c \u0432\u0441\u0435 \u0440\u0430\u0432\u043d\u043e \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 CocoaPod).<\/p>\n

\"KMM
KMM wizard<\/figcaption><\/figure>\n

git commit<\/a><\/p>\n

\u042d\u043a\u0440\u0430\u043d \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0430 Android \u0441 Jetpack Compose<\/h3>\n

\u0412 \u0448\u0430\u0431\u043b\u043e\u043d\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u0441 Android View, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c Jetpack Compose \u043f\u0435\u0440\u0435\u0434 \u043d\u0430\u0447\u0430\u043b\u043e\u043c \u0432\u0435\u0440\u0441\u0442\u043a\u0438.<\/p>\n

\u0412\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0432\u00a0androidApp\/build.gradle.kts<\/code>\u00a0\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 Compose:<\/p>\n

val composeVersion = \"1.1.1\"  android {     \/\/ ...      buildFeatures {         compose = true     }     composeOptions {         kotlinCompilerExtensionVersion = composeVersion     } }<\/code><\/pre>\n
\u0418 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0435 \u043d\u0430\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438, \u0443\u0434\u0430\u043b\u044f\u044f \u0441\u0442\u0430\u0440\u044b\u0435 \u043d\u0435\u043d\u0443\u0436\u043d\u044b\u0435 (\u043e\u0442\u043d\u043e\u0441\u044f\u0449\u0438\u0435\u0441\u044f \u043a \u043e\u0431\u044b\u0447\u043d\u043e\u043c\u0443 \u043f\u043e\u0434\u0445\u043e\u0434\u0443 \u0441 View):<\/p>\n
dependencies {     implementation(project(\":shared\"))      implementation(\"androidx.compose.foundation:foundation:$composeVersion\")     implementation(\"androidx.compose.runtime:runtime:$composeVersion\")     \/\/ UI     implementation(\"androidx.compose.ui:ui:$composeVersion\")     implementation(\"androidx.compose.ui:ui-tooling:$composeVersion\")     \/\/ Material Design     implementation(\"androidx.compose.material:material:$composeVersion\")     implementation(\"androidx.compose.material:material-icons-core:$composeVersion\")     \/\/ Activity     implementation(\"androidx.activity:activity-compose:1.4.0\")     implementation(\"androidx.appcompat:appcompat:1.4.1\") }<\/code><\/pre>\n
\u041f\u0440\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0438 Gradle Sync \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e \u043d\u0435\u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u0438 \u0432\u0435\u0440\u0441\u0438\u0438 Jetpack Compose \u0438 Kotlin. \u042d\u0442\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u043e \u0441 \u0442\u0435\u043c \u0447\u0442\u043e Compose \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 compiler plugin \u0434\u043b\u044f Kotlin, \u0430 \u0438\u0445 API \u043f\u043e\u043a\u0430 \u043d\u0435 \u0441\u0442\u0430\u0431\u0438\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043e. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0442\u0443 \u0432\u0435\u0440\u0441\u0438\u044e Kotlin, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0430\u044f \u043d\u0430\u043c\u0438 \u0432\u0435\u0440\u0441\u0438\u044f Compose —\u00a01.6.10<\/code>.<\/p>\n
\u0414\u0430\u043b\u0435\u0435 \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0441\u0432\u0435\u0440\u0441\u0442\u0430\u0442\u044c \u044d\u043a\u0440\u0430\u043d \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438, \u043f\u0440\u0438\u0432\u043e\u0436\u0443 \u0441\u0440\u0430\u0437\u0443 \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u043a\u043e\u0434:<\/p>\n
@Composable fun LoginScreen() {     val context: Context = LocalContext.current     val coroutineScope: CoroutineScope = rememberCoroutineScope()      var login: String by remember { mutableStateOf(\"\") }     var password: String by remember { mutableStateOf(\"\") }     var isLoading: Boolean by remember { mutableStateOf(false) }      val isLoginButtonEnabled: Boolean = login.isNotBlank() && password.isNotBlank() && !isLoading      Column(         modifier = Modifier.padding(16.dp),         horizontalAlignment = Alignment.CenterHorizontally     ) {         TextField(             modifier = Modifier.fillMaxWidth(),             value = login,             enabled = !isLoading,             label = { Text(text = \"Login\") },             onValueChange = { login = it }         )         Spacer(modifier = Modifier.height(8.dp))         TextField(             modifier = Modifier.fillMaxWidth(),             value = password,             enabled = !isLoading,             label = { Text(text = \"Password\") },             visualTransformation = PasswordVisualTransformation(),             onValueChange = { password = it }         )         Spacer(modifier = Modifier.height(8.dp))         Button(             modifier = Modifier                 .fillMaxWidth()                 .height(48.dp),             enabled = isLoginButtonEnabled,             onClick = {                 coroutineScope.launch {                     isLoading = true                     delay(1000)                     isLoading = false                     Toast.makeText(context, \"login success!\", Toast.LENGTH_SHORT).show()                 }             }         ) {             if (isLoading) CircularProgressIndicator(modifier = Modifier.size(24.dp))             else Text(text = \"Login\")         }     } }<\/code><\/pre>\n
\u0418 \u0432\u043e\u0442 \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f Android \u0441 \u044d\u043a\u0440\u0430\u043d\u043e\u043c \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u0433\u043e\u0442\u043e\u0432\u043e \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0438\u0440\u0443\u0435\u0442 \u043a\u0430\u043a \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f, \u043d\u043e \u0431\u0435\u0437 \u043e\u0431\u0449\u0435\u0433\u043e \u043a\u043e\u0434\u0430.<\/p>\n
\"\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435
\u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 Android<\/figcaption><\/figure>\n
git commit<\/a><\/p>\n
\u042d\u043a\u0440\u0430\u043d \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 iOS \u0441 SwiftUI<\/h3>\n
\u0421\u0434\u0435\u043b\u0430\u0435\u043c \u0442\u043e\u0442 \u0436\u0435 \u044d\u043a\u0440\u0430\u043d \u0432 SwiftUI. \u0428\u0430\u0431\u043b\u043e\u043d \u0443\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u043b SwiftUI \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u043c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434 \u044d\u043a\u0440\u0430\u043d\u0430. \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n
struct LoginScreen: View {     @State private var login: String = \"\"     @State private var password: String = \"\"     @State private var isLoading: Bool = false     @State private var isSuccessfulAlertShowed: Bool = false          private var isButtonEnabled: Bool {         get {             !isLoading && !login.isEmpty && !password.isEmpty         }     }          var body: some View {         Group {             VStack(spacing: 8.0) {                 TextField(\"Login\", text: $login)                     .textFieldStyle(.roundedBorder)                     .disabled(isLoading)                                  SecureField(\"Password\", text: $password)                     .textFieldStyle(.roundedBorder)                     .disabled(isLoading)                                  Button(                     action: {                         isLoading = true                         DispatchQueue.main.asyncAfter(deadline: .now() + 1) {                             isLoading = false                             isSuccessfulAlertShowed = true                         }                     }, label: {                         if isLoading {                             ProgressView()                         } else {                             Text(\"Login\")                         }                     }                 ).disabled(!isButtonEnabled)             }.padding()         }.alert(             \"Login successful\",             isPresented: $isSuccessfulAlertShowed         ) {             Button(\"Close\", action: { isSuccessfulAlertShowed = false })         }     } }<\/code><\/pre>\n
\u041b\u043e\u0433\u0438\u043a\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0438\u0434\u0435\u043d\u0442\u0438\u0447\u043d\u0430 Android \u0432\u0435\u0440\u0441\u0438\u0438 \u0438 \u0442\u0430\u043a\u0436\u0435 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043d\u0438\u043a\u0430\u043a\u043e\u0439 \u043e\u0431\u0449\u0435\u0439 \u043b\u043e\u0433\u0438\u043a\u0438.<\/p>\n
<\/figcaption><\/figure>\n
git commit<\/a><\/p>\n
\u0420\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u043c \u043e\u0431\u0449\u0443\u044e ViewModel<\/h3>\n
\u0412\u0441\u0435 \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0448\u0430\u0433\u0438 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u044b. \u041f\u043e\u0440\u0430 \u0432\u044b\u043d\u0435\u0441\u0442\u0438 \u0438\u0437 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c \u043b\u043e\u0433\u0438\u043a\u0443 \u0440\u0430\u0431\u043e\u0442\u044b \u044d\u043a\u0440\u0430\u043d\u0430 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 \u043e\u0431\u0449\u0438\u0439 \u043a\u043e\u0434.<\/p>\n
\u041f\u0435\u0440\u0432\u043e\u0435, \u0447\u0442\u043e \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u0435\u043c — \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u0432 \u043e\u0431\u0449\u0438\u0439 \u043c\u043e\u0434\u0443\u043b\u044c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c moko-mvvm \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0435\u0435 \u0432 \u0441\u043f\u0438\u0441\u043e\u043a export’\u0430 \u0434\u043b\u044f iOS framework (\u0447\u0442\u043e\u0431\u044b \u0432 Swift \u043c\u044b \u0432\u0438\u0434\u0435\u043b\u0438 \u0432\u0441\u0435 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0435 \u043a\u043b\u0430\u0441\u0441\u044b \u0438 \u043c\u0435\u0442\u043e\u0434\u044b \u044d\u0442\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438).<\/p>\n
val mokoMvvmVersion = \"0.13.0\"  kotlin {     \/\/ ...      cocoapods {         \/\/ ...                  framework {             baseName = \"MultiPlatformLibrary\"              export(\"dev.icerock.moko:mvvm-core:$mokoMvvmVersion\")             export(\"dev.icerock.moko:mvvm-flow:$mokoMvvmVersion\")         }     }      sourceSets {         val commonMain by getting {             dependencies {                 api(\"org.jetbrains.kotlinx:kotlinx-coroutines-core:1.6.1-native-mt\")                  api(\"dev.icerock.moko:mvvm-core:$mokoMvvmVersion\")                 api(\"dev.icerock.moko:mvvm-flow:$mokoMvvmVersion\")             }         }         \/\/ ...         val androidMain by getting {             dependencies {                 api(\"dev.icerock.moko:mvvm-flow-compose:$mokoMvvmVersion\")             }         }         \/\/ ...     } }<\/code><\/pre>\n
\u0422\u0430\u043a\u0436\u0435 \u043c\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438\u00a0baseName<\/code>\u00a0\u0443 iOS Framework \u043d\u0430\u00a0MultiPlatformLibrary<\/code>. \u042d\u0442\u043e \u0432\u0430\u0436\u043d\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435, \u0431\u0435\u0437 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u044b \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u043d\u0435 \u0441\u043c\u043e\u0436\u0435\u043c \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c CocoaPod \u0441 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 Kotlin \u0438 SwiftUI.<\/p>\n
\u041e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0430\u043c\u0443\u00a0LoginViewModel<\/code>. \u0412\u043e\u0442 \u043a\u043e\u0434:<\/p>\n
class LoginViewModel : ViewModel() {     val login: MutableStateFlow<String> = MutableStateFlow(\"\")     val password: MutableStateFlow<String> = MutableStateFlow(\"\")      private val _isLoading: MutableStateFlow<Boolean> = MutableStateFlow(false)     val isLoading: StateFlow<Boolean> = _isLoading      val isButtonEnabled: StateFlow<Boolean> =         combine(isLoading, login, password) { isLoading, login, password ->             isLoading.not() && login.isNotBlank() && password.isNotBlank()         }.stateIn(viewModelScope, SharingStarted.Eagerly, false)      private val _actions = Channel<Action>()     val actions: Flow<Action> get() = _actions.receiveAsFlow()      fun onLoginPressed() {         _isLoading.value = true         viewModelScope.launch {             delay(1000)             _isLoading.value = false             _actions.send(Action.LoginSuccess)         }     }      sealed interface Action {         object LoginSuccess : Action     } }<\/code><\/pre>\n
\u0414\u043b\u044f \u043f\u043e\u043b\u0435\u0439 \u0432\u0432\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u0435\u0442 \u043c\u0435\u043d\u044f\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c, \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438\u00a0MutableStateFlow<\/code>\u00a0\u0438\u0437 kotlinx-coroutines (\u043d\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u00a0MutableLiveData<\/code>\u00a0\u0438\u0437\u00a0moko-mvvm-livedata<\/code>). \u0414\u043b\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 UI \u0434\u043e\u043b\u0436\u0435\u043d \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c, \u043d\u043e \u043d\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u043c\u0435\u043d\u044f\u0442\u044c — \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u00a0StateFlow<\/code>. \u0410 \u0434\u043b\u044f \u043e\u043f\u043e\u0432\u0435\u0449\u0435\u043d\u0438\u044f \u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0447\u0442\u043e-\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c (\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043e \u0443\u0441\u043f\u0435\u0445\u0435 \u0438\u043b\u0438 \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u0439 \u044d\u043a\u0440\u0430\u043d) \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438\u00a0Channel<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u0434\u0430\u0435\u0442\u0441\u044f \u043d\u0430 UI \u0432 \u0432\u0438\u0434\u0435\u00a0Flow<\/code>. \u0412\u0441\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043c\u044b \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u043c \u043f\u043e\u0434 \u0435\u0434\u0438\u043d\u044b\u0439\u00a0sealed interface Action<\/code>, \u0447\u0442\u043e\u0431\u044b \u0442\u043e\u0447\u043d\u043e \u0431\u044b\u043b\u043e \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e \u043a\u0430\u043a\u0438\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u043e\u0431\u0449\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u0430\u044f\u00a0ViewModel<\/code>.<\/p>\n
git commit<\/a><\/p>\n
\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u043e\u0431\u0449\u0443\u044e ViewModel \u043a Android<\/h3>\n
\u041d\u0430 Android \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0438\u0437\u00a0ViewModelStorage<\/code>\u00a0\u043d\u0430\u0448\u0443\u00a0ViewModel<\/code>\u00a0(\u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0430\u0445 \u044d\u043a\u0440\u0430\u043d\u0430 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u043b\u0438 \u0442\u0443\u0436\u0435-\u0441\u0430\u043c\u0443\u044e ViewModel) \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u0443\u044e \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u0432\u00a0androidApp\/build.gradle.kts<\/code>:<\/p>\n
dependencies {     \/\/ ...     implementation(\"androidx.lifecycle:lifecycle-viewmodel-compose:2.4.1\") }<\/code><\/pre>\n
\u0414\u0430\u043b\u0435\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u0432 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b \u043d\u0430\u0448\u0435\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430\u00a0LoginViewModel<\/code>:<\/p>\n
@Composable fun LoginScreen(     viewModel: LoginViewModel = viewModel() )<\/code><\/pre>\n
\u0417\u0430\u043c\u0435\u043d\u0438\u043c \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u044d\u043a\u0440\u0430\u043d\u0430, \u043d\u0430 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438\u0437\u00a0LoginViewModel<\/code>:<\/p>\n
val login: String by viewModel.login.collectAsState() val password: String by viewModel.password.collectAsState() val isLoading: Boolean by viewModel.isLoading.collectAsState() val isLoginButtonEnabled: Boolean by viewModel.isButtonEnabled.collectAsState()<\/code><\/pre>\n
\u041f\u043e\u0434\u043f\u0438\u0448\u0435\u043c\u0441\u044f \u043d\u0430 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u043e\u0442 ViewModel’\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f\u00a0observeAsAction<\/code>\u00a0\u0438\u0437 moko-mvvm:<\/p>\n
viewModel.actions.observeAsActions { action ->     when (action) {         LoginViewModel.Action.LoginSuccess ->             Toast.makeText(context, \"login success!\", Toast.LENGTH_SHORT).show()     } }<\/code><\/pre>\n
\u0417\u0430\u043c\u0435\u043d\u0438\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0432\u0432\u043e\u0434\u0430 \u0443\u00a0TextField<\/code>‘\u043e\u0432 \u0441 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043d\u0430 \u0437\u0430\u043f\u0438\u0441\u044c \u0432\u00a0ViewModel<\/code>:<\/p>\n
TextField(     \/\/ ...     onValueChange = { viewModel.login.value = it } )<\/code><\/pre>\n
\u0418 \u0432\u044b\u0437\u043e\u0432\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438:<\/p>\n
Button(     \/\/ ...     onClick = viewModel::onLoginPressed ) {     \/\/ ... }<\/code><\/pre>\n
\u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0438 \u0432\u0438\u0434\u0438\u043c \u0447\u0442\u043e \u0432\u0441\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u0447\u043d\u043e \u0442\u0430\u043a\u0436\u0435, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e \u0434\u043e \u043e\u0431\u0449\u0435\u0433\u043e \u043a\u043e\u0434\u0430, \u043d\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u0432\u0441\u044f \u043b\u043e\u0433\u0438\u043a\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u044d\u043a\u0440\u0430\u043d\u0430 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u0449\u0435\u0439 ViewModel.<\/p>\n
git commit<\/a><\/p>\n
\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u043e\u0431\u0449\u0443\u044e ViewModel \u043a iOS<\/h3>\n
\u0414\u043b\u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f\u00a0LoginViewModel<\/code>\u00a0\u043a SwiftUI \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u044e\u0442\u0441\u044f Swift \u0434\u043e\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043e\u0442 MOKO MVVM. \u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u044e\u0442\u0441\u044f \u043e\u043d\u0438 \u0447\u0435\u0440\u0435\u0437 CocoaPods:<\/p>\n
pod 'mokoMvvmFlowSwiftUI', :podspec => 'https:\/\/raw.githubusercontent.com\/icerockdev\/moko-mvvm\/release\/0.13.0\/mokoMvvmFlowSwiftUI.podspec'<\/code><\/pre>\n
\u0410 \u0442\u0430\u043a\u0436\u0435, \u0432 \u0441\u0430\u043c\u043e\u0439\u00a0LoginViewModel<\/code>\u00a0\u043d\u0443\u0436\u043d\u043e \u0432\u043d\u0435\u0441\u0442\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f — \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u044b Swift\u00a0MutableStateFlow<\/code>,\u00a0StateFlow<\/code>,\u00a0Flow<\/code>\u00a0\u043f\u043e\u0442\u0435\u0440\u044f\u044e\u0442 generic type, \u0442\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b. \u0427\u0442\u043e\u0431\u044b generic \u043d\u0435 \u0431\u044b\u043b \u043f\u043e\u0442\u0435\u0440\u044f\u043d \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043b\u0430\u0441\u0441\u044b. MOKO MVVM \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u043b\u0430\u0441\u0441\u044b\u00a0CMutableStateFlow<\/code>,\u00a0CStateFlow<\/code>\u00a0\u0438\u00a0CFlow<\/code>\u00a0\u0434\u043b\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f generic type \u0432 iOS. \u041f\u0440\u0438\u0432\u0435\u0434\u0435\u043c \u0442\u0438\u043f\u044b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435\u043c:<\/p>\n
class LoginViewModel : ViewModel() {     val login: CMutableStateFlow<String> = MutableStateFlow(\"\").cMutableStateFlow()     val password: CMutableStateFlow<String> = MutableStateFlow(\"\").cMutableStateFlow()      \/\/ ...     val isLoading: CStateFlow<Boolean> = _isLoading.cStateFlow()      val isButtonEnabled: CStateFlow<Boolean> =         \/\/ ...         .cStateFlow()          \/\/ ...     val actions: CFlow<Action> get() = _actions.receiveAsFlow().cFlow()      \/\/ ... }<\/code><\/pre>\n
\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u0432 Swift \u043a\u043e\u0434. \u0414\u043b\u044f \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0434\u0435\u043b\u0430\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435:<\/p>\n
import MultiPlatformLibrary import mokoMvvmFlowSwiftUI import Combine  struct LoginScreen: View {     @ObservedObject var viewModel: LoginViewModel = LoginViewModel()     @State private var isSuccessfulAlertShowed: Bool = false          \/\/ ... }<\/code><\/pre>\n
\u041c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c\u00a0viewModel<\/code>\u00a0\u0432\u00a0View<\/code>\u00a0\u043a\u0430\u043a\u00a0@ObservedObject<\/span><\/code>, \u0442\u0430\u043a\u0436\u0435 \u043a\u0430\u043a \u043c\u044b \u0434\u0435\u043b\u0430\u0435\u043c \u0441 Swift \u0432\u0435\u0440\u0441\u0438\u044f\u043c\u0438 ViewModel, \u043d\u043e \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0435, \u0437\u0430 \u0441\u0447\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f\u00a0mokoMvvmFlowSwiftUI<\/code>\u00a0\u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0441\u0440\u0430\u0437\u0443 Kotlin \u043a\u043b\u0430\u0441\u0441\u00a0LoginViewModel<\/code>.<\/p>\n
\u0414\u0430\u043b\u0435\u0435 \u043c\u0435\u043d\u044f\u0435\u043c \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0443 \u043f\u043e\u043b\u0435\u0439:<\/p>\n
TextField(\"Login\", text: viewModel.binding(\\.login))     .textFieldStyle(.roundedBorder)     .disabled(viewModel.state(\\.isLoading))<\/code><\/pre>\n
mokoMvvmFlowSwiftUI<\/code>\u00a0\u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u043a\u00a0ViewModel<\/code>:<\/p>\n