@State e Binding SwiftUI

Eduarda Mello
Apple Developer Academy PUCPR
3 min readMay 25, 2021

O que é swiftUI?

SwiftUI é uma maneira nova e excepcionalmente simples de construir interfaces de usuário em todas as plataformas Apple com swift.

Um dos princípios do swiftUI é que os dados guiam a interface, ou seja, quando algum dado do seu app muda, a interface que está representando aquele dado precisa mudar também. Então, você nunca manipulará diretamente a UI, você mudará o dado e seu app faz as mudanças necessárias da interface.

Onde o @State entra nisso?

Para entender o @State, uma boa analogia é pensar nas nossas emoções. Quando uma pessoa está feliz, ela estará com um sorriso estampado no rosto. Se as nossas emoções fossem dados, eles podem ser representados por diferentes estados e conforme o meu estado muda, por exemplo de feliz para triste, a minha expressão facial, vai mudar também. Analogamente, mudando o estado(state) a interface será automaticamente atualizada!

Vamos começar exemplificar isso com código, o que eu quero é ter um Text com uma frase que irá mudar de acordo com o que o usuário inserir no TextField.

⭐️ Para isso, vamos precisar utilizar o @State para que meu programa saiba que eu quero atualizar a minha interface assim que a minha variável que possui o @State mude.

⭐️ Além disso, preciso ter um binding na minha variável dentro do TextField para conectar a variável com o meu elemento da interface.

Exemplo de código que atende minhas condições

Então, explicando melhor o código, na linha 5 colocamos o @State na variável name, visto que queremos que quando ela mude de valor, em algum momento na execução do programa, a minha interface mude também!

Já na linha 10 tivemos que adicionar o cifrão($), para fazer o binding, que vai conectar o TextField com a variável name.

Programa rodando no simulador

Exemplo com Toggle

Podemos fazer essas aplicações com todos os elementos visuais, vamos fazer agora um exemplo com um toggle, que ao invés de receber um texto vai receber um Booleano, ou seja, verdadeiro ou falso, e isso vai refletir em algo na nossa interface.

A lógica aqui é a mesma, utilizamos o @State para fazer com que a view dependa do estado da variável, ou seja, no momento em que a variável mudar, a view vai ser automaticamente atualizada. E o toggle precisa do binding para permitir que a interação com o toggle mude a variável.

Exemplo com o toggle
Programa rodando no simulador

--

--

Eduarda Mello
Apple Developer Academy PUCPR

Desenvolvedora mobile, graduanda em Engenharia Eletrônica ⚡️ Compartilho mais conteúdos no Instagram @dudadev.