20.11.2024

Lição: 85: Visualizações Personalizadas e Construtores de Visualizações

Nesta aula, vamos explorar como criar visualizações personalizadas no SwiftUI e como aproveitar ao máximo os construtores de visualizações para compor layouts complexos. Criar visualizações personalizadas permite encapsular funcionalidades e reutilizar código, enquanto construtores de visualizações oferecem a flexibilidade de criar layouts dinâmicos e responsivos.

Criando uma Visualização Personalizada

Vamos começar criando uma visualização personalizada simples. Faremos um cartão reutilizável que pode exibir uma imagem e um texto.

import SwiftUI

struct CardView: View {
    var image: String
    var title: String

    var body: some View {
        VStack {
            Image(image)
                .resizable()
                .scaledToFit()
                .frame(width: 100, height: 100)
                .cornerRadius(10)

            Text(title)
                .font(.headline)
                .padding(.top, 5)
        }
        .padding()
        .background(Color.white)
        .cornerRadius(15)
        .shadow(radius: 10)
    }
}

Uso da Visualização Personalizada

Agora que temos nossa CardView, podemos usá-la dentro de uma visualização pai. Por exemplo, vamos criar um layout em grade que exiba vários cartões.

struct ContentView: View {
    var body: some View {
        let itens = [
            ("imagem1", "Título 1"),
            ("imagem2", "Título 2"),
            ("imagem3", "Título 3")
        ]

        LazyVGrid(columns: Array(repeating: GridItem(.flexível()), count: 2)) {
            ForEach(itens, id: \.0) { item in
                CardView(image: item.0, title: item.1)
            }
        }
        .padding()
    }
}

Construtores de Visualizações

O SwiftUI fornece um mecanismo poderoso chamado construtores de visualizações, que permite criar visualizações dinamicamente. Os construtores de visualizações possibilitam compor visualizações de uma maneira mais flexível.

Vamos criar uma visualização personalizada que aceita uma visualização de conteúdo personalizável como parâmetro. Isso permitirá que você defina exatamente o que exibir dentro da visualização personalizada.

struct CustomContainer<Content: View>: View {
    var content: () -> Content

    var body: some View {
        VStack {
            Text("Container Personalizado")
                .font(.title)
                .padding()

            content() // Chama o fechamento de conteúdo para exibir o que foi fornecido
                .padding()
                .background(Color.blue.opacity(0.1))
                .cornerRadius(10)
        }
    }
}

Usando o Construtor de Visualizações

Você pode usar a visualização CustomContainer para agrupar outras visualizações. Aqui está um exemplo de uso com conteúdos diferentes:

struct AnotherContentView: View {
    var body: some View {
        CustomContainer {
            VStack {
                Text("Olá, Mundo!")
                Image(systemName: "star.fill")
                    .foregroundColor(.yellow)
            }
        }

        CustomContainer {
            HStack {
                Image(systemName: "heart.fill")
                    .foregroundColor(.red)
                Text("Amor")
            }
        }
    }
}

Conclusão

Nesta aula, aprendemos como criar visualizações personalizadas e utilizar construtores de visualizações no SwiftUI. As visualizações personalizadas permitem encapsular a lógica e aspectos de apresentação, enquanto os construtores de visualizações oferecem flexibilidade incomparável na composição de visualizações de forma dinâmica. Esses conceitos ajudarão você a construir aplicativos SwiftUI mais reutilizáveis e manuteníveis.

Sinta-se à vontade para experimentar criando visualizações mais complexas e integrando diferentes técnicas de layout para aprimorar sua compreensão do SwiftUI!

Video

Navigation