Kotlin Multiplatform Academy · Aula

Vincule o ViewModel a cada interface

Conecte o estado compartilhado ao Compose e ao SwiftUI

Aula 4 de 413 etapas

Vincule o ViewModel a cada interface é uma aula grátis de Kotlin Multiplatform Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Kotlin Multiplatform Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Kotlin Multiplatform Academy inclui 4 aulas no total.

A etapa final

Seu ViewModel compartilhado está pronto. Agora, cada interface nativa só precisa observar seu estado e encaminhar as intenções do usuário. Essa é a configuração final.

O Compose coleta o estado

No Android, use collectAsState para transformar o StateFlow em estado do Compose. Cada emissão recompõe a tela automaticamente.

val state by viewModel.state.collectAsState()

Desenhe a partir desse estado

Seu componente composable lê o state coletado e o renderiza. A interface agora é uma função pura da saída do ViewModel compartilhado.

Text(state.name)
if (state.isLoading) CircularProgressIndicator()

Envie intenções do Compose

Conecte um botão a onIntent. O usuário toca, o Compose encaminha a ação e o ViewModel compartilhado decide o que fazer.

Button(onClick = {
    viewModel.onIntent(HomeIntent.Refresh)
}) { Text("Refresh") }

O iOS precisa de uma ponte

O SwiftUI não pode coletar um Flow do Kotlin diretamente. Um pequeno invólucro observável faz a ponte entre o StateFlow e algo que o SwiftUI pode observar.

Um invólucro ObservableObject

Envolva o ViewModel em um ObservableObject do Swift. Ele mantém uma cópia publicada do estado e fornece atualizações ao SwiftUI.

class HomeObservable: ObservableObject {
    @Published var state = HomeState(isLoading: false, name: "")
}

Colete o fluxo no Swift

Dentro do invólucro, colete o StateFlow do Kotlin e atribua cada valor à propriedade publicada. O SkieKit também pode gerar isso para você.

Renderize no SwiftUI

A tela do SwiftUI observa o invólucro e lê o state da mesma maneira. Uma única verdade compartilhada, desenhada no estilo nativo da Apple.

Text(observable.state.name)

Envie intenções do Swift

Os botões do SwiftUI também chamam o onIntent do ViewModel envolvido, fazendo com que os toques no iOS cheguem exatamente à mesma lógica compartilhada.

Button("Refresh") {
    observable.viewModel.onIntent(intent: .refresh)
}

Limpe ao desaparecer

Quando uma tela for fechada, chame limpar() do ViewModel no ciclo de vida de cada plataforma, para que o escopo seja cancelado e nada fique ativo indevidamente.

Um mesmo cérebro, duas faces

Agora os dois aplicativos compartilham um único ViewModel: estado idêntico, decisões idênticas; apenas a renderização muda. Esse é o KMP em seu melhor. 🎉

Verificação rápida

Vamos confirmar como o SwiftUI consome um StateFlow compartilhado.

Recapitulação

O Compose usa collectAsState; o SwiftUI usa um invólucro ObservableObject. Ambos observam o estado e enviam intenções para um único ViewModel compartilhado. 🚀

Grátis para começar

Aprenda Kotlin com um tutor de IA — grátis

Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.

Cursos
30
Aulas
120

Perguntas Frequentes

A aula “Vincule o ViewModel a cada interface” é grátis?

Sim — o texto completo de “Vincule o ViewModel a cada interface” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Kotlin Multiplatform Academy, atualize para CoddyKit PRO. O curso de Kotlin Multiplatform Academy inclui 4 aulas no total.

O que vou aprender em “Vincule o ViewModel a cada interface”?

Conecte o estado compartilhado ao Compose e ao SwiftUI Você pratica Kotlin Multiplatform Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Kotlin Multiplatform Academy?

Nenhuma experiência prévia é necessária. Kotlin Multiplatform Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “Vincule o ViewModel a cada interface”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Kotlin Multiplatform Academy?

Sim. Cada aula de Kotlin Multiplatform Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Uma base de ViewModel multiplataforma
  2. Exponha o estado da interface como StateFlow
  3. Lide com intenções e ações do usuário
  4. Vincule o ViewModel a cada interface
← Voltar para Kotlin Multiplatform Academy