20.11.2024

Aula 86: Estilo e Temas no SwiftUI

O SwiftUI oferece uma forma poderosa de projetar e personalizar a aparência visual de suas aplicações de maneira fácil. Nesta aula, vamos explorar como aplicar estilos e temas aos seus componentes SwiftUI, permitindo uma interface de usuário coesa e atraente.

Compreendendo Estilos e Temas

Estilo refere-se à aparência visual das views—cores, fontes, formas, entre outros—enquanto tema se refere a um conceito mais amplo que define uma aparência e sensação consistentes em todo o seu aplicativo. No SwiftUI, podemos realizar tanto a estilização quanto a tematização usando várias ferramentas e técnicas.

Estilização Básica com Modificadores

O SwiftUI fornece uma variedade de modificadores de view que permitem personalizar suas views. Aqui está um exemplo simples:

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Olá, SwiftUI!")
            .font(.largeTitle)
            .foregroundColor(.blue)
            .padding()
            .background(Color.yellow)
            .cornerRadius(10)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Neste exemplo, utilizamos modificadores como .font(), .foregroundColor(), .padding(), e .background() para estilizar uma view de Text.

Criando um Tema Personalizado

Para criar um tema consistente em toda a sua aplicação, é uma boa prática definir um conjunto de estilos reutilizáveis. Isso pode ser feito usando um enum ou um struct.

Aqui está um exemplo de como criar um tema simples usando um struct:

import SwiftUI

struct AppTheme {
    static let primaryColor = Color.blue
    static let secondaryColor = Color.orange
    static let font = Font.system(size: 18, weight: .bold)
}

struct BotaoTematizado: View {
    var title: String

    var body: some View {
        Text(title)
            .font(AppTheme.font)
            .foregroundColor(.white)
            .padding()
            .background(AppTheme.primaryColor)
            .cornerRadius(8)
    }
}

struct ContentView: View {
    var body: some View {
        VStack {
            BotaoTematizado(title: "Botão 1")
            BotaoTematizado(title: "Botão 2")
        }
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Neste exemplo, criamos um struct AppTheme que contém nossa cor primária, cor secundária e fonte. Em seguida, usamos essas propriedades em nossa view BotaoTematizado, que aplica o tema de maneira consistente.

Usando Valores de Ambiente para Tematização

O SwiftUI oferece uma maneira de gerenciar temas usando valores de ambiente, permitindo que você altere o estilo do seu aplicativo dinamicamente. Veja como implementar um tema simples de modo claro e escuro:

import SwiftUI

struct ThemeKey: EnvironmentKey {
    static let defaultValue: AppTheme = .light
}

extension EnvironmentValues {
    var appTheme: AppTheme {
        get { self[ThemeKey.self] }
        set { self[ThemeKey.self] = newValue }
    }
}

enum AppTheme {
    case light
    case dark

    var backgroundColor: Color {
        switch self {
        case .light: return Color.white
        case .dark: return Color.black
        }
    }

    var textColor: Color {
        switch self {
        case .light: return Color.black
        case .dark: return Color.white
        }
    }
}

struct ThemedView: View {
    @Environment(\.appTheme) var theme

    var body: some View {
        VStack {
            Text("View Tematizada")
                .foregroundColor(theme.textColor)
                .padding()
                .background(theme.backgroundColor)
                .cornerRadius(8)
        }
        .padding()
    }
}

struct ContentView: View {
    @State private var isDarkMode = false

    var body: some View {
        VStack {
            Toggle("Modo Escuro", isOn: $isDarkMode)
                .padding()

            ThemedView()
                .environment(\.appTheme, isDarkMode ? .dark : .light)
        }
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Neste exemplo, definimos AppTheme como um enum que pode ser claro ou escuro. Usando o ambiente, podemos alternar dinamicamente o tema quando o toggle é ativado e desativado.

Conclusão

Estilizar e tematizar no SwiftUI é simples e poderoso, graças à natureza declarativa do framework. Ao utilizar modificadores de view, definições de temas reutilizáveis e valores de ambiente, você pode criar um aplicativo visualmente atraente com uma aparência e sensação consistentes.

Na aula de hoje, cobrimos técnicas básicas de estilização, como criar um tema reutilizável e como aproveitar os valores de ambiente para tematização dinâmica. Com essas ferramentas, você pode melhorar significativamente a experiência do usuário em suas aplicações SwiftUI. Boas codificações!

Video

Navigation