Como implementar o padrão MVVM em aplicações que usam Jetpack Compose para a interface de utilizador?

No Jetpack Compose, o padrão MVVM é implementado através da separação em:

• Model — lógica de negócio e dados.
• ViewModel — mantém o estado da interface de utilizador e processa a lógica de interação.
• View (Compose UI) — exibe os dados e reage às mudanças de estado.

Exemplo:

class MyViewModel : ViewModel() {
    // Estado da UI, por exemplo, um campo de texto
    var text by mutableStateOf("")
        private set

    fun onTextChanged(newText: String) {
        text = newText
    }
}

@Composable
fun MyScreen(viewModel: MyViewModel = viewModel()) {
    val text = viewModel.text
    TextField(
        value = text,
        onValueChange = { viewModel.onTextChanged(it) },
        label = { Text("Digite o texto") }
    )
}

Aqui, o ViewModel contém o estado e métodos para alterá-lo. A UI Compose subscreve-se ao estado através de mutableStateOf, atualizando-se automaticamente com as mudanças.

Este método garante uma separação clara de responsabilidades e facilita os testes.