Lição: 70: Sistema de Layout no SwiftUI (Stacks)
No SwiftUI, o sistema de layout é altamente flexível e robusto, permitindo que os desenvolvedores criem interfaces de usuário que funcionam perfeitamente em diferentes dispositivos. Um dos conceitos fundamentais do sistema de layout do SwiftUI é o uso de Stacks. Esta aula explorará os três tipos principais de Stacks disponíveis no SwiftUI: HStack
, VStack
e ZStack
.
HStack
HStack
organiza suas views filhas em uma linha horizontal. Se as views excederem a largura da tela, elas transbordarão, a menos que configuradas de outra forma.
Exemplo de HStack
import SwiftUI
struct HStackExemplo: View {
var body: some View {
HStack {
Text("Olá")
.padding()
.background(Color.blue)
.foregroundColor(.white)
.cornerRadius(10)
Text("Mundo")
.padding()
.background(Color.green)
.foregroundColor(.white)
.cornerRadius(10)
}
}
}
Neste exemplo, duas views de texto são colocadas dentro de um HStack
, estilizadas com padding, cor de fundo e raio de canto.
VStack
VStack
organiza suas views filhas verticalmente. Assim como o HStack
, se as views excederem a altura da tela, elas também transbordarão, a menos que especificado de outra forma.
Exemplo de VStack
import SwiftUI
struct VStackExemplo: View {
var body: some View {
VStack {
Text("Bem-vindo ao SwiftUI")
.font(.largeTitle)
.padding()
Spacer() // Cria um espaço entre as views
Text("Aproveite a aprendizagem!")
.font(.subheadline)
.padding()
}
}
}
Neste exemplo, o VStack
contém um título grande e uma view de texto com subtítulo, com um espaçador para empurrar a segunda view de texto para baixo.
ZStack
ZStack
sobrepõe suas views filhas uma sobre a outra, com a última view adicionada no topo. Isso é útil para criar efeitos em camadas ou fundos.
Exemplo de ZStack
import SwiftUI
struct ZStackExemplo: View {
var body: some View {
ZStack {
Color.blue
.edgesIgnoringSafeArea(.all) // Preenche toda a tela
Text("Olá, SwiftUI!")
.font(.largeTitle)
.foregroundColor(.white)
.padding()
}
}
}
Aqui, o ZStack
tem um fundo azul que preenche a tela, e uma view de texto que é exibida em cima dela na cor branca.
Combinando Stacks
Você pode combinar diferentes stacks para alcançar layouts mais complexos. Por exemplo, você pode colocar um HStack
dentro de um VStack
.
Exemplo de Stacks Combinados
import SwiftUI
struct StacksCombinadosExemplo: View {
var body: some View {
VStack {
Text("Perfil")
.font(.largeTitle)
.padding()
HStack {
Image(systemName: "person.circle")
.resizable()
.frame(width: 50, height: 50)
.padding()
Text("João Silva")
.font(.title)
.padding()
}
Spacer()
Button(action: {
print("Botão pressionado!")
}) {
Text("Editar Perfil")
.padding()
.background(Color.green)
.foregroundColor(.white)
.cornerRadius(10)
}
}
}
}
Neste exemplo, um VStack
contém um título e um HStack
que combina uma imagem e um texto representando um perfil de usuário, juntamente com um botão na parte inferior.
Conclusão
O sistema de layout do SwiftUI usando stacks é poderoso e oferece a capacidade de criar diversos layouts com facilidade. Ao utilizar HStack
, VStack
e ZStack
, você pode construir interfaces de usuário complexas adaptadas para diferentes tamanhos de tela e orientações. Experimentar com esses stacks e suas combinações é fundamental para dominar os layouts no SwiftUI.