Android Academy · Aula

Gerenciando o estado de formulários

Mantenha e atualize os valores dos campos com estado.

Gerenciando o estado de formulários é uma aula grátis de Android Academy no CoddyKit. Esta é a aula 2 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 Android Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Android Academy inclui 4 aulas no total.

De um campo para um formulário

Um único campo de texto é fácil. Um formulário real tem vários: nome, e-mail, senha e talvez uma caixa de seleção. Nesta lição, você aprenderá maneiras organizadas de manter e atualizar o estado de um formulário inteiro no Jetpack Compose.

Se você fizer isso corretamente, a validação, o envio e as prévias se tornarão simples.

Vários estados independentes

A abordagem mais simples é ter um mutableStateOf por campo. Cada campo lê e atualiza sua própria parte do estado.

Isso funciona perfeitamente para formulários pequenos, com dois ou três campos.

@Composable
fun LoginForm() {
    var email by remember { mutableStateOf("") }
    var password by remember { mutableStateOf("") }

    Column {
        OutlinedTextField(email, { email = it }, label = { Text("Email") })
        OutlinedTextField(password, { password = it }, label = { Text("Password") })
    }
}

Agrupando o estado em uma classe de dados

À medida que os formulários crescem, muitas variáveis soltas se tornam difíceis de organizar. Uma opção mais limpa é modelar o formulário inteiro como uma única data class imutável.

Você mantém uma única parte do estado contendo esse objeto e o atualiza com copy().

data class SignUpState(
    val name: String = "",
    val email: String = "",
    val agreedToTerms: Boolean = false
)

Atualizando com copy()

Como o objeto de estado é imutável, você nunca o altera diretamente. Em vez disso, cria uma nova cópia com um campo modificado e a atribui novamente.

Isso mantém previsível o modelo de estado do Compose: um novo objeto significa um novo instantâneo, que aciona a recomposição.

var form by remember { mutableStateOf(SignUpState()) }

OutlinedTextField(
    value = form.name,
    onValueChange = { form = form.copy(name = it) },
    label = { Text("Name") }
)

Um formulário completo com uma classe de dados

Aqui, todo o formulário é controlado por um único SignUpState. Cada campo atualiza uma única propriedade por meio de copy().

Observe como é fácil ler o valor completo do formulário a qualquer momento: basta usar form.

var form by remember { mutableStateOf(SignUpState()) }

Column {
    OutlinedTextField(
        value = form.name,
        onValueChange = { form = form.copy(name = it) },
        label = { Text("Name") }
    )
    OutlinedTextField(
        value = form.email,
        onValueChange = { form = form.copy(email = it) },
        label = { Text("Email") }
    )
}

Caixas de seleção e interruptores

Nem toda entrada é texto. Um Checkbox ou Switch funciona da mesma forma: um valor booleano e uma função de retorno de chamada onCheckedChange.

Armazene o booleano no estado do formulário, assim como faria com uma string.

var form by remember { mutableStateOf(SignUpState()) }

Row(verticalAlignment = Alignment.CenterVertically) {
    Checkbox(
        checked = form.agreedToTerms,
        onCheckedChange = { form = form.copy(agreedToTerms = it) }
    )
    Text("I agree to the terms")
}

Derivando valores do estado

Um grande benefício de ter um estado com uma única fonte de verdade é poder calcular valores a partir dele sem armazenar variáveis extras. Por exemplo, se o formulário está pronto para ser enviado.

Use derivedStateOf (ou uma expressão simples) para que o resultado seja atualizado automaticamente conforme o formulário muda.

var form by remember { mutableStateOf(SignUpState()) }

val canSubmit by remember {
    derivedStateOf {
        form.name.isNotBlank() &&
        form.email.isNotBlank() &&
        form.agreedToTerms
    }
}

Button(onClick = { /* submit */ }, enabled = canSubmit) {
    Text("Sign Up")
}

Sobrevivendo a mudanças de configuração

remember mantém o estado entre recomposições, mas ele é perdido em uma mudança de configuração, como a rotação da tela. Para manter valores simples durante a rotação, use rememberSaveable.

Ele funciona imediatamente com tipos primitivos e tipos Parcelable.

var email by rememberSaveable { mutableStateOf("") }

OutlinedTextField(
    value = email,
    onValueChange = { email = it },
    label = { Text("Email") }
)

Elevando o estado do formulário para um ViewModel

Para qualquer formulário que vá além do trivial, mantenha o estado em um ViewModel. Ele sobrevive a mudanças de configuração e mantém a lógica da interface do usuário fora do componente componível.

O componente componível lê o estado e encaminha os eventos; o ViewModel é a fonte da verdade.

class SignUpViewModel : ViewModel() {
    var state by mutableStateOf(SignUpState())
        private set

    fun onNameChange(value: String) {
        state = state.copy(name = value)
    }
}

Conectando o ViewModel

No componente componível, obtenha o ViewModel e associe cada campo ao estado e ao manipulador correspondente. A interface do usuário permanece simples e fácil de testar.

Esta é a estrutura recomendada para formulários de produção.

@Composable
fun SignUpScreen(vm: SignUpViewModel = viewModel()) {
    OutlinedTextField(
        value = vm.state.name,
        onValueChange = vm::onNameChange,
        label = { Text("Name") }
    )
}

Kotlin puro: o uso de copy()

O padrão de atualização com copy() é simplesmente o comportamento padrão das classes de dados do Kotlin. Aqui, ele é executado de forma independente para que você veja como cada atualização produz um objeto completamente novo.

data class SignUpState(
    val name: String = "",
    val email: String = ""
)

fun main() {
    var state = SignUpState()
    state = state.copy(name = "Ada")
    state = state.copy(email = "ada@dev.io")
    println(state)
}

Verificação rápida

Você modela o formulário como uma data class imutável mantida no estado. Como deve atualizar um único campo?

Recapitulação

Você aprendeu a gerenciar o estado de formulários completos:

Formulários pequenos: um mutableStateOf por campo.
Formulários maiores: uma única data class imutável, atualizada com copy().
Booleanos controlam Checkbox e Switch da mesma forma que o texto controla os campos.
Derive valores como "pode enviar" em vez de armazená-los.
Use rememberSaveable para a rotação e um ViewModel para telas reais.

A seguir: validar essa entrada e exibir erros úteis.

Perguntas Frequentes

A aula “Gerenciando o estado de formulários” é grátis?

Sim — o texto completo de “Gerenciando o estado de formulários” é 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 Android Academy, atualize para CoddyKit PRO. O curso de Android Academy inclui 4 aulas no total.

O que vou aprender em “Gerenciando o estado de formulários”?

Mantenha e atualize os valores dos campos com estado. Você pratica Android 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 Android Academy?

Nenhuma experiência prévia é necessária. Android 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 2 de 4.

Quanto tempo leva a aula “Gerenciando o estado de formulários”?

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 Android Academy?

Sim. Cada aula de Android 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

← Voltar para Android Academy