19.11.2024

Aula 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.

Video

Navigation