SwiftUI é uma nova maneira conveniente de criar interfaces de usuário no Xcode. Se você deseja uma rápida introdução ao SwiftUI, este post é para você.
Para começar, vamos criar um projeto com suporte ao SwiftUI. Os requisitos mínimos de sistema para isso são macOS Catalina e Xcode 11. Crie um novo projeto
"Arquivo> Novo> Projeto ..." , selecione
"Aplicativo de exibição única" e verifique se
"Interface do usuário: SwiftUI" está selecionado .
O projeto será mais ou menos assim:
Como você deve ter notado, agora você pode ver todas as alterações imediatamente na
visualização . Por exemplo, tente alterar o texto para
"Olá, Habr!" . Legal sim?
Se não houver alterações, clique no botão
Continuar (no canto superior direito). Se a
Visualização não
estiver visível - clique nas
opções do Editor e verifique se
Canvas está selecionado
((Opções + ⌘Command + ⌘Enter) .
Ver, Texto, Pilha ...
Se você selecionar
ContentView.swift , veremos:
struct ContentView: View { var body: some View { Text(", !") } }
Aqui vemos que o
corpo do ContentView> possui um
texto que exibe
"Olá, Habr!" . Vamos adicionar outro texto. Se você tentar adicionar diretamente à
visualização do
corpo , o Xcode jurará. Para fazer isso, primeiro use o
HStack ou o
VStack . Pressione
Command e clique em
Texto (⌘Command + Text) e selecione
“Incorporar no HStack” .
Este comando criará automaticamente um
HStack e adicionará nosso texto lá. Agora você pode adicionar outro texto:
struct ContentView: View { var body: some View { HStack { Text(",") Text("!") } } }
Inspetor Swiftui
Se você clicar em
“mandCommand + Text” e selecionar
“Show SwiftUI Inspector ...” , um inspetor será aberto, onde você poderá alterar visualmente as propriedades do texto. Por exemplo, se no inspetor
"Fonte" foi alterado para
"Título grande" , o código também será alterado para
.font (.largeTitle) . Muito simples:
Para entender o que
é o
Estado , vamos adicionar alguma ação. Repetimos o que fizemos antes:
"mandCommand + HStack" , selecione
"Incorporar no VStack" e , em seguida, adicione Button a este
VStack :
struct ContentView: View { @State var tapCount = 0 var body: some View { VStack { HStack { Text(",") .font(.largeTitle) .foregroundColor(Color.green) Text("!") .font(.largeTitle) .fontWeight(.bold) } Button(action: { self.tapCount += 1 }) { Text("Tap count \(tapCount)") .font(.title) } } } }
Cada vez que você clica no botão,
alteramos o valor de
tapCount . Mas o que significa
estado ? Se quisermos que nossa
visão seja renderizada novamente quando algum valor for alterado, devemos usar
State . Nesse caso, quando clicamos no botão,
alteramos o
tapCount , que é designado como
Estado . É por isso que, a cada clique, nosso
corpo é renderizado novamente.
Visualização ao vivo
No momento, se você clicar no botão, nada acontece. Para consertar isso e funcionar como um simulador, você precisa ativar o
"Live Preview" . O botão de ativação está localizado no canto inferior direito:
Agora tente novamente. Cada vez que você pressiona o botão, o valor muda.
O que vem a seguir?
Agora você tem o conceito básico de SwiftUI. Além disso, recomendo que você leia os
tutoriais do
SwiftUI , assista a um
vídeo da WWDC sobre o SwiftUI . A documentação pode ser encontrada
aqui .
O link para o projeto github está
aqui .