20.11.2024

Lição 84: Desenho e Gráficos com SwiftUI

SwiftUI oferece uma maneira intuitiva e declarativa de criar interfaces de usuário e gráficos. Nesta lição, exploraremos como desenhar formas, linhas e até mesmo gráficos personalizados usando SwiftUI. Vamos cobrir formas básicas, contornos e cores, juntamente com alguns exemplos para ilustrar os conceitos.

Formas Básicas

SwiftUI fornece várias formas embutidas que você pode usar para criar suas interfaces de usuário. Algumas das formas mais comuns incluem Círculo, Retângulo, RetânguloArredondado e Elipse.

Exemplo 1: Desenhando Formas Básicas

import SwiftUI

struct ExemploFormasBasicas: View {
    var body: some View {
        VStack(spacing: 20) {
            Circle()
                .fill(Color.blue)
                .frame(width: 100, height: 100)

            Rectangle()
                .fill(Color.green)
                .frame(width: 100, height: 100)

            RoundedRectangle(cornerRadius: 20)
                .fill(Color.red)
                .frame(width: 100, height: 100)

            Ellipse()
                .fill(Color.yellow)
                .frame(width: 100, height: 50)
        }
        .padding()
    }
}

struct ExemploFormasBasicas_Previews: PreviewProvider {
    static var previews: some View {
        ExemploFormasBasicas()
    }
}

Neste exemplo, criamos uma pilha vertical de diferentes formas, cada uma preenchida com uma cor diferente.

Desenhando com Contornos

Você pode personalizar as bordas das formas usando stroke() e especificar a cor e a largura da linha. Isso permite gráficos mais elaborados.

Exemplo 2: Personalizando Contornos

import SwiftUI

struct ExemploContornos: View {
    var body: some View {
        VStack(spacing: 20) {
            Circle()
                .stroke(Color.blue, lineWidth: 4)
                .frame(width: 100, height: 100)

            Rectangle()
                .stroke(Color.green, lineWidth: 8)
                .frame(width: 100, height: 100)

            RoundedRectangle(cornerRadius: 20)
                .stroke(Color.red, lineWidth: 12)
                .frame(width: 100, height: 100)

            Ellipse()
                .stroke(Color.yellow, lineWidth: 16)
                .frame(width: 100, height: 50)
        }
        .padding()
    }
}

struct ExemploContornos_Previews: PreviewProvider {
    static var previews: some View {
        ExemploContornos()
    }
}

Este exemplo ilustra como usar o modificador stroke() para aplicar bordas de diferentes cores e larguras nas formas.

Desenhando Caminhos Personalizados

Para gráficos mais avançados, você pode criar caminhos personalizados usando Path. Isso permite desenhar linhas e curvas.

Exemplo 3: Desenhando um Caminho Personalizado

import SwiftUI

struct ExemploCaminhoPersonalizado: View {
    var body: some View {
        Canvas { context, size in
            let path = Path { path in
                path.move(to: CGPoint(x: 50, y: 50))
                path.addLine(to: CGPoint(x: 150, y: 50))
                path.addLine(to: CGPoint(x: 100, y: 100))
                path.closeSubpath()
            }

            context.fill(path, with: .color(Color.blue))
            context.stroke(path, with: .color(Color.black), lineWidth: 2)
        }
        .frame(width: 200, height: 200)
    }
}

struct ExemploCaminhoPersonalizado_Previews: PreviewProvider {
    static var previews: some View {
        ExemploCaminhoPersonalizado()
    }
}

Neste exemplo, usamos o Canvas do SwiftUI para desenhar um triângulo personalizado usando um Path. O triângulo é preenchido com azul e tem um contorno preto.

Combinando Formas

Você também pode combinar várias formas em uma única visualização usando ZStack ou componentes de layout semelhantes.

Exemplo 4: Combinando Formas

import SwiftUI

struct ExemploFormasCombinadas: View {
    var body: some View {
        ZStack {
            Circle()
                .fill(Color.red)
                .frame(width: 200, height: 200)

            Rectangle()
                .fill(Color.blue)
                .frame(width: 150, height: 150)

            Ellipse()
                .fill(Color.white)
                .frame(width: 100, height: 50)
        }
        .padding()
    }
}

struct ExemploFormasCombinadas_Previews: PreviewProvider {
    static var previews: some View {
        ExemploFormasCombinadas()
    }
}

Este exemplo ilustra como sobrepor formas usando um ZStack, criando um efeito visual interessante.

Conclusão

Nesta lição, cobrimos o básico sobre desenho e gráficos em SwiftUI. Exploramos como criar formas básicas, personalizar sua aparência com contornos e desenhar caminhos complexos. Ao combinar esses elementos, você pode criar interfaces de usuário visualmente atraentes para aprimorar a experiência do usuário em suas aplicações SwiftUI.

Experimente esses exemplos e tente criar suas próprias formas e gráficos personalizados para aprofundar sua compreensão das capacidades de desenho do SwiftUI!

Video

Navigation