23.11.2024

Aula 111: SwiftUI no macOS

Nesta aula, vamos explorar como usar o SwiftUI para criar aplicações especificamente para macOS. O SwiftUI simplifica o processo de construção de interfaces de usuário em todas as plataformas da Apple, e o macOS não é exceção. Vamos passar pelos conceitos básicos de criação de um aplicativo com janelas usando SwiftUI e cobrir alguns componentes e recursos importantes que são únicos para o desenvolvimento no macOS.

Configurando Seu Projeto no macOS

1. Abra o Xcode e crie um novo projeto.
2. Escolha o template App na seção do macOS.
3. Certifique-se de selecionar SwiftUI como a opção de Interface de Usuário.
4. Dê um nome ao seu projeto (por exemplo, MeuAppMacOS) e especifique quaisquer outros detalhes conforme desejado.

Uma vez que o projeto é criado, você encontrará uma estrutura padrão do SwiftUI nos arquivos ContentView.swift e MeuAppMacOS.swift.

Criando Seu Primeiro App SwiftUI para macOS

Vamos modificar o ContentView.swift para criar uma interface de usuário simples que contenha um rótulo de texto e um botão. Quando o botão for clicado, o texto do rótulo será atualizado.

import SwiftUI

struct ContentView: View {
    @State private var texto = "Olá, macOS!"

    var body: some View {
        VStack {
            Text(texto)
                .font(.largeTitle)
                .padding()

            Button(action: {
                texto = "Botão Clicado!"
            }) {
                Text("Clique em Mim")
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(8)
            }
        }
        .frame(width: 400, height: 200)
        .padding()
    }
}

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

Análise do Código

• Gerenciamento de Estado: Usamos @State para marcar texto como uma variável de estado, para que quaisquer mudanças nela atualizem automaticamente a interface.
• VStack: Este empilhamento vertical organiza nosso texto e botão de forma vertical.
• Frame e Padding: Definimos um tamanho específico para o tamanho do VStack e adicionamos padding aos elementos individuais da IU para aprimorar a aparência visual.

Trabalhando com Recursos do macOS

Menus e Barras de Ferramentas

Uma das características mais significativas dos aplicativos macOS é a barra de menus. O SwiftUI permite criar menus e barras de ferramentas para sua aplicação de forma fácil. Você pode implementar um menu simples assim:

import SwiftUI

@main
struct MeuAppMacOS: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
        .commands {
            CommandGroup(replacing: .newItem) {
                Button("Fazer Algo") {
                    // Ação para o item do menu
                }
                .keyboardShortcut("N")
            }
        }
    }
}

Adicionando uma Barra de Ferramentas

Para adicionar uma barra de ferramentas, você pode usar o modificador toolbar em seu ContentView:

struct ContentView: View {
    @State private var texto = "Olá, macOS!"

    var body: some View {
        VStack {
            Text(texto)
                .font(.largeTitle)
                .padding()

            Button("Clique em Mim") {
                texto = "Botão Clicado!"
            }
            .padding()
        }
        .toolbar {
            ToolbarItem(placement: .automatic) {
                Button("Redefinir") {
                    texto = "Olá, macOS!"
                }
            }
        }
        .frame(width: 400, height: 200)
        .padding()
    }
}

Observando Mudanças com @ObservedObject

Suponha que você tenha uma aplicação mais complexa onde várias visualizações precisam observar um modelo de dados compartilhado. Você pode criar uma classe que implementa ObservableObject e usar @ObservedObject para se vincular a ela.

import SwiftUI
import Combine

class ViewModel: ObservableObject {
    @Published var texto = "Olá, macOS!"
}

struct ContentView: View {
    @ObservedObject var viewModel = ViewModel()

    var body: some View {
        VStack {
            Text(viewModel.texto)
                .font(.largeTitle)
                .padding()

            Button("Clique em Mim") {
                viewModel.texto = "Botão Clicado!"
            }
            .padding()
        }
        .frame(width: 400, height: 200)
        .padding()
    }
}

Conclusão

Nesta aula, você aprendeu como configurar uma aplicação simples para macOS usando SwiftUI, como gerenciar o estado com @State e @ObservedObject, e como criar menus e barras de ferramentas. O SwiftUI oferece uma maneira poderosa e intuitiva de construir aplicações para macOS, permitindo que os desenvolvedores se concentrem na interface sem se deixar levar por código repetitivo.

Continue experimentando com o SwiftUI, adicionando mais controles, estilos e recursos do macOS para aprimorar ainda mais seu aplicativo! Boas codificações!

Video

Navigation