O Guia Ultimate para Swiftui para Novos Desenvolvedores de Ios

Você pode compor várias visualizações usando recipientes de layout como , , e . Por exemplo:

struct ContentView: View {
 var body: some View {
 VStack {
 Text("Welcome")
 .font(.largeTitle)
 Text("Start building with SwiftUI")
 .foregroundColor(.secondary)
 }
 .padding()
 }
}

Aqui, o organiza seus filhos verticalmente, e o modificador adiciona espaço em torno de toda a pilha. Modificadores podem ser acorrentados em qualquer visão para personalizar sua aparência ou comportamento.

Vistas e Modificadores – Os Blocos de Construção Principais

SwiftUI fornece uma biblioteca rica de visualizações construídas , tais como , , , , , , , e muito mais. Cada visão pode ser personalizada com modificadores[] — métodos que retornam uma nova versão da visão com a modificação aplicada. Modificadores comuns incluem:

• – define o estilo de fonte
• – muda a cor do texto
• – adiciona o preenchimento padrão em torno da vista
• – preenche o fundo com uma cor
• – roda os cantos de uma forma ou imagem
• – adiciona uma sombra de gota

Os modificadores podem ser aplicados em qualquer ordem, mas a ordem importa porque cada modificador envolve a janela anterior. Por exemplo, [[FLT: 26]] apara o conteúdo primeiro e depois pinta o fundo, resultando num retângulo vermelho em torno da área acolchoada. Inverta a ordem e você obtém um fundo vermelho com texto dentro, sem enchimento extra.

Containers de layout – VStack, HStack, ZStack

SwiftUI usa três recipientes de pilha primária para organizar visualizações:

• VStack – organiza as crianças verticalmente (de cima para baixo)
• Hstack – organiza as crianças horizontalmente (da esquerda para a direita)
• ZStack – sobrepõe as crianças umas sobre as outras (ordem profunda)

Você pode criar conjuntos de conjuntos arbitrariamente para criar layouts complexos. Cada pilha também suporta os parâmetros e . Por exemplo:

VStack(alignment: .leading, spacing: 20) {
 Text("Top")
 HStack {
 Text("Left")
 Text("Right")
 }
 ZStack {
 Color.blue
 Text("Overlay")
 .foregroundColor(.white)
 }
 .frame(height: 100)
}

Isto produz uma pilha vertical com alinhamento de topo, contendo um título, um par horizontal, e um retângulo azul com texto branco centrado no topo.

Gestão do Estado na SwiftUI

Uma das funcionalidades mais poderosas da SwiftUI é a forma como lida com dados dinâmicos. Em vez de atualizar manualmente a interface quando os dados mudam, você declara os dados como state, e a SwiftUI re-render automaticamente as vistas afetadas. Isto elimina uma classe inteira de bugs relacionados à sincronização da interface.

SwiftUI fornece vários envelopes de propriedade para o estado de gestão, cada um adequado para cenários diferentes:

Usando @State para o Estado Local

[[FLT: 30]] é usado para valores simples que pertencem exclusivamente a uma única visão, como o estado de ligação/desliga de uma opção ou a entrada de um campo de texto. Quando o valor muda, a visão [[FLT: 31]] é novamente introduzida. Exemplo:

struct ToggleExample: View {
 @State private var isOn = false

 var body: some View {
 Toggle("Enable Notifications", isOn: $isOn)
 .padding()
 }
}

Observe o prefixo — cria uma ] vinculando ao estado, permitindo que o ] leia e escreva o valor. Marque sempre com para fazer valer que é interno à visão.

@Binding para Passar Estado para Baixo

Quando uma visão de um filho precisa modificar o estado de propriedade de um pai, você usa . O filho recebe uma ligação ao valor e pode alterá- lo, e a visão do pai atualiza automaticamente. Por exemplo:

struct ParentView: View {
 @State private var showSheet = false

 var body: some View {
 ChildView(showSheet: $showSheet)
 }
}

struct ChildView: View {
 @Binding var showSheet: Bool

 var body: some View {
 Button("Toggle Sheet") {
 showSheet.toggle()
 }
 }
}

As ligações são a cola que conecta as vistas em uma hierarquia sem introduzir padrões complexos de delegação ou callback.

Objetos observáveis e @StateObject

Para modelos de dados mais complexos compartilhados em várias visualizações, crie uma classe conforme com . Dentro da classe, marque propriedades com para que mude as atualizações da visualização de gatilho. Em seguida, use ] na visão que possui o objeto. Exemplo:

class UserSettings: ObservableObject {
 @Published var username = "Guest"
}

struct SettingsView: View {
 @StateObject private var settings = UserSettings()

 var body: some View {
 VStack {
 Text("Hello, \(settings.username)")
 TextField("Username", text: $settings.username)
 .textFieldStyle(RoundedBorderTextFieldStyle())
 .padding()
 }
 }
}

Use somente quando inicializar o objeto nessa visão. Se o objeto for criado em outro lugar, use para observá-lo sem tomar posse.

@AmbienteObject para o Estado Partilhado

Quando você precisa injetar o mesmo objeto observável em muitas visualizações sem passar por cada inicializador, use . Primeiro, crie o objeto em uma visão pai (por exemplo, o ponto de entrada do aplicativo) e injete-o usando o modificador . Qualquer visão descendente pode então acessá- lo declarando uma propriedade com . Isto é especialmente útil para dados de toda a aplicação, como autenticação ou configurações do usuário.

@main
struct MyApp: App {
 @StateObject private var settings = UserSettings()

 var body: some Scene {
 WindowGroup {
 ContentView()
 .environmentObject(settings)
 }
 }
}

struct DetailView: View {
 @EnvironmentObject var settings: UserSettings

 var body: some View {
 Text(settings.username)
 }
}

Para um mergulho mais profundo na gestão do estado, a documentação Apple sobre a gestão do estado de UI é um excelente recurso.

Construindo sua primeira aplicação SwiftUI – Uma aplicação de anotações

Vamos aplicar o que você aprendeu construindo um aplicativo simples de anotar. O aplicativo exibirá uma lista de notas, permitirá que o usuário adicione novas e mostrará detalhes quando uma nota for grampeada.

Configurar o Modelo de Dados

Criar um novo arquivo Swift chamado e definir um modelo:

import Foundation

struct Note: Identifiable {
 let id = UUID()
 var title: String
 var content: String
}

O protocolo requer uma propriedade , que SwiftUI usa para distinguir itens em uma lista.

Criando a Vista da Lista

Em , use para conter uma matriz de notas e um para exibi-las. Adicione um botão de barra de ferramentas para criar novas notas:

struct ContentView: View {
 @State private var notes = [
 Note(title: "Hello", content: "This is my first note.")
 ]

 var body: some View {
 NavigationStack {
 List {
 ForEach(notes) { note in
 NavigationLink(destination: NoteDetailView(note: note)) {
 Text(note.title)
 }
 }
 .onDelete(perform: removeNote)
 }
 .navigationTitle("Notes")
 .toolbar {
 ToolbarItem(placement: .navigationBarTrailing) {
 Button(action: addNote) {
 Image(systemName: "plus")
 }
 }
 }
 }
 }

 private func addNote() {
 notes.append(Note(title: "New Note", content: ""))
 }

 private func removeNote(at offsets: IndexSet) {
 notes.remove(atOffsets: offsets)
 }
}

Observe o uso de (iOS 16+) para navegação e para empurrar uma visão detalhada. O modificador permite o deslize-para-deletar.

Adicionando navegação e visão de detalhes

Criar um novo arquivo que pega um e permite a edição. Para brevidade, nós vamos exibir o título e conteúdo no modo somente leitura. Você pode mais tarde extendê-lo com ] vinculações para habilitar edição.

struct NoteDetailView: View {
 let note: Note

 var body: some View {
 VStack(alignment: .leading, spacing: 16) {
 Text(note.title)
 .font(.title)
 Text(note.content)
 .font(.body)
 .foregroundColor(.secondary)
 Spacer()
 }
 .padding()
 .navigationTitle("Note")
 }
}

Execute o aplicativo no simulador ou visualização. Você verá uma lista de notas, você pode adicionar novas, toque em para ver detalhes e deslize para excluir. Este aplicativo básico demonstra Lista, NavigationStack, estado e fluxo de dados — todos os padrões SwiftUI principais.

Depuração e Antevisão

A tela de visualização da SwiftUI é sua ferramenta principal de depuração. Se uma visão não parecer correta, inspecione a cadeia modificadora e garanta que você está usando o recipiente de layout correto. Problemas comuns incluem:

• Falta fazendo com que as vistas toquem nas bordas.
• Ordem incorrecta dos modificadores (por exemplo, fundo antes do enchimento).
• Usando sem inicializar o objeto.

Você também pode adicionar instruções dentro de seu ou em botões para verificar as alterações de estado. Para depuração em tempo de execução, use o menu Debug para visualizar a hierarquia de visualização e verificar se há conflitos de layout.

Outra técnica poderosa é usar para ver como sua interface fica em diferentes tamanhos de dispositivos. Você também pode adicionar várias instâncias de visualização para comparar variações:

struct ContentView_Previews: PreviewProvider {
 static var previews: some View {
 Group {
 ContentView()
 .previewDevice("iPhone 15 Pro")
 ContentView()
 .previewDevice("iPhone SE (3rd generation)")
 }
 }
}

Desempenho e melhores práticas

SwiftUI foi projetado para ser eficiente, mas existem práticas para manter seus aplicativos funcionando sem problemas:

• Use modelos identificáveis para listas que ajudam o Diff SwiftUI e atualiza somente linhas alteradas.
• Mantenha as visualizações pequenas – quebre as grandes visualizações em componentes menores e reutilizáveis.Isso melhora a legibilidade e permite que as atualizações incrementais da SwiftUI funcionem de forma mais granular.
• Evitar cálculos caros em – realizar trabalhos pesados em modelos de visualização ou com propriedades ]. SwiftUI reavalia ] sempre que as mudanças de estado, por isso, mantê-lo rápido.
• Prefira ] para dados locais de visualização e mova lógica complexa de negócios para objetos observáveis.
• Usar ] ou para evitar a devolução desnecessária quando as entradas da vista não tiverem mudado.
• Perfil com instrumentos – Modelo do Xcode SwiftUI nos instrumentos ajuda a identificar atualizações de visualização e gargalos de renderização.

Para uma análise completa do desempenho da SwiftUI, confira este guia por Swift com Majid.

Próximos Passos e Recursos

Você agora tem uma base sólida na SwiftUI. Para continuar aprendendo e construindo aplicativos mais avançados:

• Explore tutoriais oficiais da Apple – O SwiftUI Tutoriais da Apple guiá-lo através da construção de um aplicativo completo passo a passo.
• Leia Hacking com Swift – Paul Hudson’s 100 Dias de SwiftUI é um curso gratuito e abrangente.
• Divergir em padrões reativos – Aprender Combine (framework reativo da Apple) para lidar com fluxos de dados assíncronos e pipelines de dados complexos.
• Construir um projeto real – Escolha um conceito de aplicativo simples (tempo, lista de tarefas, rastreador de hábitos) e implementá-lo do zero. A melhor maneira de aprender é fazendo.
• Junte-se à comunidade – Os fóruns Swift, os fóruns de desenvolvedores da Apple e o subreddit r/SwiftUI são ótimos lugares para fazer perguntas e compartilhar seu trabalho.

Conclusão

SwiftUI representa uma mudança de paradigma no desenvolvimento da plataforma Apple. Sua sintaxe declarativa, atualizações automáticas orientadas pelo estado e visualização ao vivo tornam o framework ideal para novos desenvolvedores iOS começarem a construir aplicativos funcionais e bonitos rapidamente. Ao entender visualizações, modificadores, containers de layout e gerenciamento de estado, você pode criar interfaces dinâmicas com menos código e menos erros.

Continue experimentando — modifica os exemplos neste guia, quebra-os e corrige-os. Cada iteração fortalece sua compreensão. À medida que você cresce, você descobrirá como a SwiftUI se integra com outros frameworks da Apple como Core Data, CloudKit e Swift Charts. As habilidades que você desenvolve aqui irão servir você em todas as plataformas da Apple.