18.11.2024

Lição: 67: Criando Seu Primeiro App com SwiftUI

SwiftUI é um poderoso framework introduzido pela Apple para simplificar o processo de construção de interfaces de usuário para iOS, macOS, watchOS e tvOS. Ele utiliza uma sintaxe declarativa, permitindo que os desenvolvedores criem componentes de UI com facilidade. Nesta aula, vamos percorrer os passos para construir seu primeiro app com SwiftUI.

Configurando Seu Projeto

1. Abra o Xcode: Certifique-se de que você tenha a versão mais recente do Xcode instalada em seu macOS.
2. Crie um Novo Projeto: Vá para Arquivo -> Novo -> Projeto.
3. Selecione o Template de App: Na aba iOS, escolha o template "App".
4. Configure Seu Projeto: Nomeie seu projeto (por exemplo, "MeuPrimeiroAppSwiftUI"), assegure-se de que "Swift" está selecionado como a linguagem e escolha "SwiftUI" como a opção de interface do usuário.
5. Escolha um Local: Selecione uma pasta onde deseja salvar seu projeto e clique em "Criar".

Compreendendo a Estrutura do Projeto

Uma vez que seu projeto é criado, você notará alguns arquivos importantes no navegador de projeto:

• ContentView.swift: É aqui que você definirá a UI para seu app.
• MeuPrimeiroAppSwiftUI.swift: Este é o ponto de entrada do seu app, onde o ciclo de vida do app é gerenciado.

Criando Sua Primeira Tela

Agora, vamos personalizar ContentView.swift para criar uma interface de usuário simples. Abra ContentView.swift e substitua seu conteúdo pelo seguinte código:

import SwiftUI

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

            Button(action: {
                print("Botão pressionado!")
            }) {
                Text("Clique em Mim")
                    .font(.title)
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(10)
            }
        }
    }
}

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

Explicação do Código

• VStack: Isso significa Pilha Vertical e é utilizado para organizar as visualizações verticalmente.
• Text: Exibe uma string. Aqui, utilizamos para mostrar "Olá, SwiftUI!".
• Button: Este é um controle interativo que aciona uma ação quando pressionado. Definimos uma ação simples para imprimir "Botão pressionado!" no console.
• Modificadores: Métodos como .font(), .padding(), .background(), e .cornerRadius() são usados para estilizar as visualizações.

Executando Seu App

Agora que configuramos nossa primeira tela, é hora de executar o app.

1. Escolha um simulador (ou seu próprio dispositivo) na barra de ferramentas.
2. Clique no botão "Executar" (o ícone de play).
3. Você deve ver o texto "Olá, SwiftUI!" exibido junto com o botão "Clique em Mim".

Quando você pressionar o botão, verifique o console de depuração no Xcode para ver a saída de print("Botão pressionado!").

Adicionando uma Variável de Estado

O SwiftUI também facilita o gerenciamento de estado. Vamos modificar nosso app para incluir um contador que aumenta quando o botão é pressionado. Atualize ContentView conforme abaixo:

import SwiftUI

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

    var body: some View {
        VStack {
            Text("Olá, SwiftUI!")
                .font(.largeTitle)
                .padding()

            Text("Contagem: \(count)")
                .font(.title)

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

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

Explicação do Estado

• @State: Este wrapper de propriedade é usado para declarar uma variável de estado, count, que acionará a atualização da UI sempre que seu valor mudar.
• O contador exibido agora será atualizado dinamicamente toda vez que o botão for pressionado.

Conclusão

Parabéns! Você criou seu primeiro app com SwiftUI. Esta introdução abordou os fundamentos de configuração de um projeto, construção de uma interface de usuário e gerenciamento de estado. O SwiftUI é um framework poderoso que pode permitir que você construa UIs complexas com facilidade, e isso é apenas a ponta do iceberg.

Nas próximas aulas, você aprenderá mais sobre a construção de estruturas de navegação, estilização de seus componentes e trabalho com modelos de dados. Continue experimentando com SwiftUI e explore todo o seu potencial!

Video

Navigation