22.11.2024

Aula 103: Chaves de Preferência e Preferências de Visão no SwiftUI

No SwiftUI, gerenciar e trocar dados entre visualizações pode ser realizado usando várias abordagens. Uma das técnicas úteis é o uso de Chaves de Preferência e Preferências de Visão. Esta aula irá guiá-lo pelo conceito de Chaves de Preferência, como criá-las e como usá-las para passar dados entre visualizações.

O que são Chaves de Preferência?

As Chaves de Preferência são um mecanismo no SwiftUI que permite que as visualizações filhas comuniquem valores de volta para suas visualizações pai. Isso pode ser particularmente útil quando você precisa agregar informações de várias visualizações filhas ou ajustar o layout de uma visualização pai com base nas propriedades de seus filhos.

Como Criar uma Chave de Preferência

Para criar uma Chave de Preferência, você precisa definir uma struct que conforma ao protocolo PreferenceKey. Essa struct precisará especificar o tipo de dado que você vai passar e implementar alguns métodos obrigatórios.

Exemplo: Criando uma Chave de Preferência Personalizada

Vamos criar um exemplo simples onde queremos encontrar a altura máxima de várias visualizações filhas e passar esse valor de volta para a visualização pai.

import SwiftUI

struct MaxHeightPreferenceKey: PreferenceKey {
    typealias Value = CGFloat

    static var defaultValue: CGFloat = 0

    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = max(value, nextValue())
    }
}

No código acima, definimos uma MaxHeightPreferenceKey personalizada que armazena um CGFloat. O método reduce atualiza o valor da altura máxima à medida que as visualizações filhas publicam suas alturas.

Usando Chaves de Preferência nas Visualizações

Depois de definir uma Chave de Preferência, você pode usá-la em suas visualizações para definir e ler os valores de preferência.

Exemplo: Atualizando a Visualização Pai com as Alturas das Filhas

Agora, vamos ver como usar nossa MaxHeightPreferenceKey em uma visualização pai que exibe várias visualizações filhas.

struct ContentView: View {
    @State private var maxHeight: CGFloat = 0

    var body: some View {
        VStack {
            Text("Altura Máxima: \(maxHeight)")
                .padding()

            HStack {
                ChildView()
                    .background(GeometryReader { geometry in
                        Color.clear.preference(key: MaxHeightPreferenceKey.self, value: geometry.size.height)
                    })
                ChildView()
                    .background(GeometryReader { geometry in
                        Color.clear.preference(key: MaxHeightPreferenceKey.self, value: geometry.size.height)
                    })
            }
        }
        .onPreferenceChange(MaxHeightPreferenceKey.self) { value in
            maxHeight = value
        }
    }
}

struct ChildView: View {
    var body: some View {
        Text("Visualização Filha")
            .frame(width: 100, height: CGFloat.random(in: 100...300))
            .background(Color.blue)
            .cornerRadius(10)
            .padding()
    }
}

Explicação do Código

1. ChildView é uma visualização simples que gera uma altura aleatória entre 100 e 300 pontos.
2. Dentro do HStack em ContentView, usamos um GeometryReader para ler o tamanho de cada ChildView, o que nos permite obter sua altura.
3. O valor da altura é passado para cima para a visualização pai usando o método preference(key:value:).
4. O modificador onPreferenceChange escuta por mudanças na chave de preferência. Quando qualquer visualização filha atualiza a preferência, a altura máxima é calculada e armazenada na propriedade de estado maxHeight.

Conclusão

Nesta aula, exploramos as Chaves de Preferência e como elas permitem uma comunicação eficaz entre visualizações pai e filhas no SwiftUI. Ao criar uma Chave de Preferência personalizada, você pode facilmente passar dados para cima na hierarquia de visualizações, possibilitando interfaces mais dinâmicas e responsivas.

Sinta-se à vontade para experimentar com Chaves de Preferência em seus próprios projetos para ver como elas podem aprimorar suas aplicações em SwiftUI!

Video

Navigation