Construindo aplicativos iOS com SwiftUI: um tutorial com exemplos

Neste guia, exploraremos alguns dos principais recursos do SwiftUI e, em seguida, aplicaremos essas habilidades e técnicas criando um aplicativo Swift de demonstração.

O que é SwiftUI?

SwiftUI é uma estrutura que suporta a abordagem moderna de declaração de interfaces de usuário (e criação de aplicativos) para qualquer plataforma Apple-iOS, watchOS e macOS-usando a linguagem de programação Swift.

Uma abordagem declarativa significa que você pode definir o que sua interface de usuário deve fazer. O SwiftUI dá acesso a visualizações, controles e estruturas de layout que você pode usar para declarar interfaces de usuário.

Pertencente à Apple, o SwiftUI é uma estrutura de interface do usuário de plataforma cruzada para iOS, macOS, tvOS e watchOS. Isso significa que você só precisa aprender uma linguagem (Swift) e a estrutura para implantar seu código em qualquer plataforma Apple.

Abaixo está a aparência de um programa “Hello World” em SwiftUI. Este exemplo de código é gerado pelo Xcode quando você cria um aplicativo SwiftUI:

import SwiftUI//usando a estrutura SwiftUI e sua funcionalidade. struct ContentView: View {var body: some View {Text (“Hello, world!”).padding ()}}

Visualizações SwiftUI

No núcleo da interface do usuário de um aplicativo está a visualização. A visualização representa a parte do aplicativo que o usuário vê, como imagens, texto, animações, elementos interativos e gráficos.

No SwiftUI, a Visualização exige que você tenha uma propriedade. No trecho de código abaixo, temos o corpo, que retorna algum View:

var body: some View

Isso também é o que temos no código de amostra “Hello World” acima.

Controles

Os controles no SwiftUI são responsáveis ​​pela interação do usuário com o aplicativo. Exemplos desses controles incluem clicar em um botão, campos de texto, responder a gestos do usuário, etc.

Lembre-se de que o SwiftUI é uma estrutura que permite construir interfaces de usuário em plataformas Apple. Da mesma forma, o SwiftUI vem com controles de IU que permitem criar elementos interativos para os usuários.

Por exemplo, o controle UIButton permite criar um botão que responde aos cliques/interações do usuário. Aqui está a sintaxe:

@MainActor class UIButton: UIControl

Estrutura do layout

O SwiftUI fornece suporte para o layout das visualizações da interface do usuário do seu aplicativo. Podemos definir essas visualizações usando pilhas, como HStack, VStack e/ou ZStack, e listas.

No layout da estrutura de um aplicativo usando SwiftUI, há um contêiner, que é como um elemento pai em HTML. Este contêiner contém crianças, que chamaremos de pilhas.

Vamos dar uma olhada nessas pilhas nas estruturas de layout.

<”HStack

Podemos criar o layout de uma visualização para organizar seus filhos para nosso aplicativo em uma linha horizontal usando HStack. Com o HStack, as visualizações são exibidas de uma só vez.

Aqui está um exemplo de como usar o HStack para distribuir textos horizontalmente:

import SwiftUI struct ContentView: View {var body: some View {HStack {Text (“Apresentando”).font (.title) Texto (“Um aplicativo de demonstração”)}}} Saída de demonstração do HStack.

Um VStack (pilha vertical) é um dos contêineres de layout mais comuns no SwiftUI. VStack permite empilhar visualizações verticalmente.

Usando VStack, podemos criar um layout de visualização para organizar seus filhos em uma linha vertical. Aqui está um exemplo de como usar VStack para fazer layout de textos verticalmente.

import SwiftUI struct ContentView: View {var body: some View {VStack {Text (“Introducing”).font (.title) Text (“A Demo App”) }}} Amostra de demonstração do VStack.

<✓ZStack

ZStack nos permite sobrepor os filhos um sobre o outro e alinhá-los nos eixos xey. O ZStack define os eixos xey de cada filho para o padrão de alinhamento central.

A sintaxe para ZStack é a seguinte:

@frozen struct ZStack onde Content: View

Com o ZStack, uma visualização filha é atribuída a um valor do eixo z maior do que a filha anterior. Portanto, os filhos subsequentes serão empilhados sobre os anteriores.

Você pode usar o ZStack para reproduzir um item, como texto, sobre outro item, como uma imagem ou outro bloco de texto.

No exemplo abaixo, usamos o ZStack para colocar a imagem de um carro em cima do HStack, que contém algum texto. A propriedade de alinhamento é definida como superior para criar espaço para legibilidade. Caso contrário, a imagem se sobreporia ao texto.

struct ContentView: View {var body: some View {ZStack {Image (systemName:”car”).font (.title).frame (width: 100, height: 100, alinhamento:.top) HStack {Text (“Introducing”).font (.title) Text (“A Demo App”)}}}} Amostra de demonstração do ZStack.

Construindo um aplicativo com SwiftUI

Para demonstrar como as técnicas descritas acima evoluem para um aplicativo Swift simplificado e intuitivo, usaremos o SwiftUI para construir um aplicativo que exibe uma lista de tecnologias e/ou estruturas que você pode usar para desenvolver aplicativos móveis. O código para este aplicativo de demonstração será escrito dentro de ContentView.swift.

Primeiro, inicie o Xcode e clique em Criar um novo projeto Xcode .

Em seguida, selecione Aplicativo e clique em Avançar .

No campo Nome do produto , digite “demoapp” e clique em Avançar . Em seguida, espere o Xcode iniciar o projeto inicial.