Lição: 64: Introdução ao SwiftUI
SwiftUI é a moderna estrutura da Apple para construir interfaces de usuário em todas as suas plataformas. Ele fornece uma sintaxe declarativa para criar componentes de UI com eficiência e facilidade. Nesta aula, exploraremos os conceitos fundamentais do SwiftUI, focando em sua estrutura, componentes comuns e como construir uma interface de usuário simples.
O que é SwiftUI?
SwiftUI permite que os desenvolvedores criem interfaces de usuário totalmente interativas e dinâmicas usando Swift. Ele oferece recursos como visualizações ao vivo, facilitando a visualização do seu código em tempo real. O SwiftUI trabalha em perfeita harmonia com o código existente do UIKit e do AppKit, oferecendo opções flexíveis para os desenvolvedores ao transitar para a nova estrutura.
Começando
Para começar a usar o SwiftUI, você precisa criar um novo projeto no Xcode e selecionar o modelo "Aplicativo SwiftUI". Depois que seu projeto estiver configurado, você encontrará um arquivo padrão chamado ContentView.swift
, que é onde você construirá sua interface de usuário.
Estrutura Básica de uma View do SwiftUI
Uma view no SwiftUI é uma struct que conforma ao protocolo View
. Aqui está um exemplo simples de uma view do SwiftUI:
import SwiftUI
struct ContentView: View {
var body: some View {
Text("Olá, SwiftUI!")
.font(.largeTitle)
.foregroundColor(.blue)
.padding()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
No código acima:
ContentView
é uma estrutura que conforma ao protocoloView
.- A propriedade
body
descreve os elementos da UI que a view exibe. Text
é um componente do SwiftUI que exibe uma string. Nós o personalizamos com modificadores comofont
,foregroundColor
epadding
.- A estrutura
ContentView_Previews
nos permite renderizar e visualizar nossa UI dentro do Xcode.
Usando Stacks
O SwiftUI fornece stacks para organizar suas views em um layout vertical ou horizontal. Os dois stacks mais comumente utilizados são VStack
(stack vertical) e HStack
(stack horizontal).
Aqui está um exemplo de uso de ambos os stacks:
struct StackedView: View {
var body: some View {
VStack {
Text("Bem-vindo ao")
.font(.headline)
Text("SwiftUI")
.font(.largeTitle)
.foregroundColor(.orange)
HStack {
Text("Criando")
Text("Stacks")
}
.font(.subheadline)
}
.padding()
}
}
Neste exemplo, um stack vertical (VStack
) contém várias views de texto e um stack horizontal (HStack
). O alinhamento e o espaçamento são gerenciados automaticamente pelo SwiftUI.
Manipulando a Entrada do Usuário
Para manipular a entrada do usuário, você pode usar componentes como TextField
, Button
e Toggle
. Aqui está como criar um formulário simples com um campo de texto e um botão:
struct UserInputView: View {
@State private var name: String = ""
var body: some View {
VStack {
TextField("Digite seu nome", text: $name)
.textFieldStyle(RoundedBorderTextFieldStyle())
.padding()
Button(action: {
print("Olá, \(name)!")
}) {
Text("Enviar")
.font(.headline)
.padding()
.background(Color.blue)
.foregroundColor(.white)
.cornerRadius(8)
}
}
.padding()
}
}
Neste código:
- Declaramos uma variável
@State
chamadaname
, que armazenará a entrada de texto do usuário. - Um
TextField
é criado para o usuário digitar seu nome. A ligação$name
permite que o SwiftUI atualize nossa variável de estado à medida que o usuário digita. - Um
Button
é definido para realizar uma ação quando tocado, imprimindo uma saudação no console.
Visualizando Sua UI
O Xcode oferece um recurso de visualização ao vivo, permitindo que você veja os efeitos do seu código à medida que o escreve. Para invocar a visualização de uma view específica, certifique-se de ter um PreviewProvider
adequado.
Na ContentView_Previews
ou em qualquer estrutura de visualização relevante, você pode ver as mudanças em tempo real à medida que atualiza as views.
Conclusão
SwiftUI é uma estrutura poderosa que simplifica o desenvolvimento de UI com sua sintaxe declarativa. Você pode criar layouts complexos, gerenciar entradas de usuários e aproveitar visualizações ao vivo para aumentar a produtividade. Nesta aula, abordamos os fundamentos do SwiftUI, incluindo a criação de views, stacks e manipulação de entradas do usuário.
Continue explorando a documentação do SwiftUI e praticando a construção de suas interfaces de usuário para se tornar proficiente. Boas codificações!