18.11.2024

Aula 65: Entendendo a UI Declarativa em Swift

Nos últimos anos, observou-se uma mudança na forma como as interfaces de usuário (UIs) são projetadas e implementadas no desenvolvimento de aplicativos. O paradigma de UI declarativa ganhou significativa popularidade, especialmente com a introdução do SwiftUI no ecossistema da Apple. Esta aula irá explorar os conceitos-chave da UI declarativa, suas vantagens e como implementá-la em Swift com exemplos práticos.

O que é UI Declarativa?

UI declarativa é um modelo de programação onde os desenvolvedores descrevem o que a interface deve parecer e como ela deve se comportar, em vez de detalhar os passos para alcançar essa aparência e comportamento. Em contraste com a programação imperativa (onde os desenvolvedores controlam o processo), a programação declarativa permite que o framework gerencie a complexidade subjacente.

Características Principais da UI Declarativa

1. Dirigida por Estado: A UI é renderizada com base no estado atual do aplicativo. Quando o estado muda, a UI é atualizada automaticamente para refletir essas mudanças.

2. Mais Fácil de Compreender: O código declarativo tende a ser mais limpo e conciso, tornando-o mais fácil de ler e entender. Os desenvolvedores podem se concentrar no "o que" em vez do "como".

3. Menos Código Repetitivo: Frameworks declarativos geralmente requerem menos código para alcançar os mesmos resultados em comparação com abordagens imperativas.

Começando com SwiftUI

Vamos usar o SwiftUI, o framework da Apple para construir interfaces de usuário utilizando o paradigma declarativo. Primeiro, certifique-se de ter o Xcode instalado e crie um novo projeto SwiftUI.

Exemplo 1: Exibição Básica de Texto

Vamos começar com um exemplo simples que mostra como é fácil exibir texto usando o SwiftUI.

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Olá, Mundo!")
            .font(.largeTitle)
            .padding()
    }
}

@main
struct MeuApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

Neste exemplo, definimos uma struct ContentView que conforma ao protocolo View. A propriedade body contém uma view Text que exibe "Olá, Mundo!" com um pouco de formatação.

Exemplo 2: Gerenciamento de Estado

Vamos criar um aplicativo contador usando SwiftUI para ilustrar como a UI dirigida por estado funciona.

import SwiftUI

struct ContentView: View {
    @State private var count: Int = 0

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

            Button(action: {
                count += 1
            }) {
                Text("Incrementar")
                    .font(.title)
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }
        }
    }
}

@main
struct MeuApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

Neste exemplo, usamos o wrapper de propriedade @State para criar uma variável de estado reativa count. Quando o botão é pressionado, ele incrementa a contagem, atualizando automaticamente o valor exibido.

Exemplo 3: Views Condicionais

A UI declarativa nos permite exibir ou ocultar views com base em condições de forma simples. Aqui está um exemplo:

import SwiftUI

struct ContentView: View {
    @State private var isShowingGreeting: Bool = false

    var body: some View {
        VStack {
            if isShowingGreeting {
                Text("Olá, Usuário!")
                    .font(.largeTitle)
                    .padding()
            }

            Button(action: {
                isShowingGreeting.toggle()
            }) {
                Text(isShowingGreeting ? "Ocultar Saudação" : "Mostrar Saudação")
                    .font(.title)
                    .padding()
                    .background(Color.green)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }
        }
    }
}

@main
struct MeuApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

Neste exemplo, usamos uma condição if para verificar a variável de estado isShowingGreeting. Dependendo do seu valor, o SwiftUI exibirá a saudação ou não, ilustrando como é fácil gerenciar a renderização condicional.

Conclusão

Frameworks de UI declarativa como o SwiftUI representam uma evolução significativa na forma como os desenvolvedores criam interfaces. Ao focar no resultado em vez do processo, você pode reduzir significativamente a complexidade do seu código de UI. Com os exemplos abordados nesta aula, você deve ter uma base sólida para começar a construir aplicativos usando a abordagem declarativa em Swift. À medida que você continua aprendendo, explore cenários mais complexos envolvendo listas, animações e ligações de dados para aprofundar sua compreensão deste poderoso paradigma.

Video

Navigation