18.11.2024

Aula 64: Introdução ao SwiftUI

SwiftUI é a moderna estrutura da Apple para construir interfaces de usuário em todas as suas plataformas. Ele fornece uma sintaxe declarativa para criar componentes de UI com eficiência e facilidade. Nesta aula, exploraremos os conceitos fundamentais do SwiftUI, focando em sua estrutura, componentes comuns e como construir uma interface de usuário simples.

O que é SwiftUI?

SwiftUI permite que os desenvolvedores criem interfaces de usuário totalmente interativas e dinâmicas usando Swift. Ele oferece recursos como visualizações ao vivo, facilitando a visualização do seu código em tempo real. O SwiftUI trabalha em perfeita harmonia com o código existente do UIKit e do AppKit, oferecendo opções flexíveis para os desenvolvedores ao transitar para a nova estrutura.

Começando

Para começar a usar o SwiftUI, você precisa criar um novo projeto no Xcode e selecionar o modelo "Aplicativo SwiftUI". Depois que seu projeto estiver configurado, você encontrará um arquivo padrão chamado ContentView.swift, que é onde você construirá sua interface de usuário.

Estrutura Básica de uma View do SwiftUI

Uma view no SwiftUI é uma struct que conforma ao protocolo View. Aqui está um exemplo simples de uma view do SwiftUI:

import SwiftUI

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

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

No código acima:

• ContentView é uma estrutura que conforma ao protocolo View.
• A propriedade body descreve os elementos da UI que a view exibe.
• Text é um componente do SwiftUI que exibe uma string. Nós o personalizamos com modificadores como font, foregroundColor e padding.
• A estrutura ContentView_Previews nos permite renderizar e visualizar nossa UI dentro do Xcode.

Usando Stacks

O SwiftUI fornece stacks para organizar suas views em um layout vertical ou horizontal. Os dois stacks mais comumente utilizados são VStack (stack vertical) e HStack (stack horizontal).

Aqui está um exemplo de uso de ambos os stacks:

struct StackedView: View {
    var body: some View {
        VStack {
            Text("Bem-vindo ao")
                .font(.headline)
            Text("SwiftUI")
                .font(.largeTitle)
                .foregroundColor(.orange)
            HStack {
                Text("Criando")
                Text("Stacks")
            }
            .font(.subheadline)
        }
        .padding()
    }
}

Neste exemplo, um stack vertical (VStack) contém várias views de texto e um stack horizontal (HStack). O alinhamento e o espaçamento são gerenciados automaticamente pelo SwiftUI.

Manipulando a Entrada do Usuário

Para manipular a entrada do usuário, você pode usar componentes como TextField, Button e Toggle. Aqui está como criar um formulário simples com um campo de texto e um botão:

struct UserInputView: View {
    @State private var name: String = ""

    var body: some View {
        VStack {
            TextField("Digite seu nome", text: $name)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()

            Button(action: {
                print("Olá, \(name)!")
            }) {
                Text("Enviar")
                    .font(.headline)
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(8)
            }
        }
        .padding()
    }
}

Neste código:

• Declaramos uma variável @State chamada name, que armazenará a entrada de texto do usuário.
• Um TextField é criado para o usuário digitar seu nome. A ligação $name permite que o SwiftUI atualize nossa variável de estado à medida que o usuário digita.
• Um Button é definido para realizar uma ação quando tocado, imprimindo uma saudação no console.

Visualizando Sua UI

O Xcode oferece um recurso de visualização ao vivo, permitindo que você veja os efeitos do seu código à medida que o escreve. Para invocar a visualização de uma view específica, certifique-se de ter um PreviewProvider adequado.

Na ContentView_Previews ou em qualquer estrutura de visualização relevante, você pode ver as mudanças em tempo real à medida que atualiza as views.

Conclusão

SwiftUI é uma estrutura poderosa que simplifica o desenvolvimento de UI com sua sintaxe declarativa. Você pode criar layouts complexos, gerenciar entradas de usuários e aproveitar visualizações ao vivo para aumentar a produtividade. Nesta aula, abordamos os fundamentos do SwiftUI, incluindo a criação de views, stacks e manipulação de entradas do usuário.

Continue explorando a documentação do SwiftUI e praticando a construção de suas interfaces de usuário para se tornar proficiente. Boas codificações!

Video

Navigation