19.11.2024

Lição: 71: Gerenciamento de Estado com @State

No SwiftUI, o gerenciamento de estado é fundamental para construir aplicações responsivas e interativas. O wrapper de propriedade @State é uma das principais ferramentas fornecidas pelo SwiftUI para gerenciar o estado localmente dentro de uma visualização. Nesta aula, exploraremos como usar o @State de forma eficaz, com exemplos que ilustram sua funcionalidade.

O que é @State?

@State é um wrapper de propriedade que permite criar um estado mutável em uma visualização SwiftUI. Quando o estado muda, a visualização atualiza automaticamente para refletir essas mudanças. Isso é particularmente útil, pois permite que sua interface reaja à entrada do usuário ou a outros eventos sem a necessidade de gerenciar modelos de gerenciamento de estado mais complexos, como ObservableObject ou EnvironmentObject, a menos que isso seja realmente necessário.

Como Usar @State

Para declarar uma variável de estado, basta criar uma variável dentro da sua visualização SwiftUI e anotá-la com @State. Aqui está um exemplo básico:

import SwiftUI

struct ContadorView: View {
    @State private var contagem: Int = 0

    var body: some View {
        VStack {
            Text("Contagem: \(contagem)")
                .font(.largeTitle)
                .padding()

            Button(action: {
                contagem += 1
            }) {
                Text("Incrementar")
            }
            .padding()
        }
    }
}

struct ContadorView_Previews: PreviewProvider {
    static var previews: some View {
        ContadorView()
    }
}

Explicação:

1. Declaração de Estado: A propriedade @State contagem é declarada para armazenar o valor atual da contagem.
2. Atualização da UI: A contagem é exibida em uma visualização Text. Quando o botão é pressionado, a contagem é incrementada.
3. Atualização Automática: Devido ao wrapper de propriedade @State, qualquer alteração em contagem aciona uma atualização da UI.

Múltiplas Variáveis de Estado

Você pode usar várias variáveis @State em uma única visualização. Aqui está um exemplo que demonstra esse recurso:

struct MultiStateView: View {
    @State private var nome: String = ""
    @State private var botaoPressionado: Bool = false

    var body: some View {
        VStack {
            TextField("Digite seu nome", text: $nome)
                .padding()
                .textFieldStyle(RoundedBorderTextFieldStyle())

            Button(action: {
                botaoPressionado.toggle()
            }) {
                Text("Pressione-me")
            }
            .padding()

            if botaoPressionado {
                Text("Olá, \(nome)!")
                    .font(.headline)
            }
        }
        .padding()
    }
}

struct MultiStateView_Previews: PreviewProvider {
    static var previews: some View {
        MultiStateView()
    }
}

Explicação:

1. TextField: O TextField está vinculado à variável @State nome, permitindo uma entrada dinâmica.
2. Ação do Botão: O botão alterna a variável de estado botaoPressionado.
3. UI Condicional: Quando o botão é pressionado, uma saudação é exibida usando o valor da variável de estado nome.

Melhores Práticas para Usar @State

1. Estado Local Apenas: Use @State para o gerenciamento de estado local dentro de uma visualização. Para estados compartilhados entre várias visualizações, considere usar @ObservedObject ou @EnvironmentObject.
2. Evitando Lógica Complexa: Mantenha a lógica relacionada ao gerenciamento de estado simples. Se você perceber que a lógica está se tornando complexa, isso pode ser um sinal de que ela precisa ser abstraída para um modelo ou modelo de visualização separado.
3. Responsabilidade Única: Idealmente, uma visualização deve gerenciar seu próprio estado. Se uma visualização começar a gerenciar muito estado, considere dividi-la em visualizações menores que possam gerenciar seu estado de forma independente.

Conclusão

O wrapper de propriedade @State é uma ferramenta poderosa no SwiftUI para gerenciar estado dentro de uma visualização. Ele simplifica o processo de atualização da UI em resposta a interações do usuário e garante que a interface do seu aplicativo permaneça em sincronia com seus dados subjacentes. Seguindo os exemplos e as melhores práticas apresentadas nesta aula, você estará bem preparado para incorporar o gerenciamento de estado em suas aplicações SwiftUI de forma eficaz.

Video

Navigation