Elevação de estado
Eleve o estado para criar componentes composable reutilizáveis.
Elevação de estado é uma aula grátis de Android Academy no CoddyKit. Esta é a aula 3 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.
O que é elevação de estado?
Elevação de estado significa mover o estado para cima, para fora de um elemento composável, colocando-o no chamador. O elemento composável se torna sem estado: apenas recebe um valor e comunica as alterações.
Com estado versus sem estado
Um elemento composável com estado possui seu estado usando remember. Um elemento sem estado não armazena estado; ele recebe o valor como parâmetro e expõe um evento. Elementos composáveis sem estado são mais fáceis de reutilizar e testar.
O padrão value + onValueChange
O formato padrão da elevação tem dois parâmetros: um value (o estado atual, passado para baixo) e uma lambda onValueChange (o evento, passado para cima).
@Composable
fun NameField(value: String, onValueChange: (String) -> Unit) {
TextField(value = value, onValueChange = onValueChange)
}Antes da elevação
Aqui, o elemento composável possui seu próprio estado. Ele funciona, mas o elemento pai não tem acesso ao texto, e o elemento composável é mais difícil de reutilizar.
@Composable
fun NameField() {
var name by remember { mutableStateOf("") }
TextField(value = name, onValueChange = { name = it })
}Depois da elevação
Agora o estado vive no elemento pai. O campo não tem estado e é reutilizável; o elemento pai controla o valor.
@Composable
fun Parent() {
var name by remember { mutableStateOf("") }
NameField(value = name, onValueChange = { name = it })
}Para baixo e para cima
O padrão é: o estado flui para baixo, os eventos fluem para cima. O valor desce como parâmetro; as alterações sobem por meio do retorno de chamada. Isso é chamado de fluxo de dados unidirecional.
Por que elevar o estado?
A elevação permite que vários elementos composáveis compartilhem o mesmo estado, permite que o elemento pai reaja às alterações e transforma o elemento filho em uma função pura de suas entradas — perfeito para visualizações e testes.
Para onde elevar o estado
Eleve o estado até o ancestral comum mais baixo que precise dele. Se apenas um elemento composável usar o estado, talvez não seja necessário elevá-lo. Faça isso quando algo acima precisar ler ou controlar esse estado.
Um exemplo compartilhado
Aqui, uma única parte do estado controla tanto um campo quanto uma visualização ao vivo, algo possível somente porque o estado foi elevado.
@Composable
fun Editor() {
var text by remember { mutableStateOf("") }
Column {
TextField(value = text, onValueChange = { text = it })
Text(text = "Preview: $text")
}
}Sem estado é reutilizável
Como um elemento composável sem estado recebe seu valor como parâmetro, você pode visualizá-lo com dados de exemplo e usá-lo em qualquer lugar com diferentes responsáveis pelo estado.
@Preview
@Composable
fun NameFieldPreview() {
NameField(value = "Sample", onValueChange = {})
}Juntando tudo
Um contador reutilizável no qual o elemento pai possui a contagem e o botão não tem estado.
@Composable
fun CounterButton(count: Int, onIncrement: () -> Unit) {
Button(onClick = onIncrement) {
Text(text = "Count: $count")
}
}
@Composable
fun Screen() {
var count by remember { mutableStateOf(0) }
CounterButton(count = count, onIncrement = { count++ })
}Verificação rápida
Na elevação de estado, quais são as duas coisas que o elemento composável sem estado normalmente expõe?
Recapitulação
Elevação de estado:
- Mova o estado para o chamador e torne o filho sem estado.
- Use o padrão
value+onValueChange. - Estado para baixo, eventos para cima — fluxo de dados unidirecional.
- Eleve o estado até o ancestral comum mais baixo que precise dele.
Perguntas Frequentes
A aula “Elevação de estado” é grátis?
Sim — o texto completo de “Elevação de estado” é 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 “Elevação de estado”?
Eleve o estado para criar componentes composable reutilizáveis. 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 3 de 4.
Quanto tempo leva a aula “Elevação de estado”?
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.