Menu
Coddy logo textTech

Spacer e ZStack

Parte da seção Introdução ao SwiftUI do Journey de Swift da Coddy. Lição 12 de 50.

Um Spacer ocupa todo o espaço livre em uma pilha. Em um HStack, ele empurra as visualizações anteriores para a esquerda e as visualizações posteriores para a direita:

HStack {
    Text("Total")
    Spacer()
    Text("$12.50")
}

Em uma VStack, um Spacer afasta as views verticalmente.

ZStack empilha as visualizações umas sobre as outras. A primeira visualização fica atrás e cada uma das seguintes fica por cima:

ZStack {
    Color.blue
    Text("On top")
        .foregroundStyle(.white)
}

Color.blue usado como uma view preenche todo o espaço que recebe, então aqui ele se torna um fundo azul atrás do texto.

challenge icon

Desafio

Fácil

Faça com que a linha do total ocupe toda a largura: adicione um Spacer entre Total e $12.50 para que o preço seja empurrado para a borda direita.

Experimente você mesmo

import SwiftUI

@main
struct CoddyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}
quiz iconTeste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.

Todas as lições de Introdução ao SwiftUI

Pratique por conta própria: Playground de Swift