Spacer i ZStack

Część sekcji Wprowadzenie do SwiftUI ścieżki Swift w Coddy. Lekcja 12 z 50.

Spacer zajmuje całą wolną przestrzeń w stosie. W HStack przesuwa widoki przed nim w lewo, a widoki za nim w prawo:

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

W VStack element Spacer odsuwa od siebie widoki w pionie.

ZStack układa widoki jeden na drugim. Pierwszy widok znajduje się z tyłu, a każdy kolejny na nim:

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

Widok Color.blue wypełnia całą dostępną mu przestrzeń, więc tutaj tworzy niebieskie tło za tekstem.

Wyzwanie

Łatwy

Rozciągnij wiersz z sumą na całą szerokość: dodaj Spacer między Total a $12.50, aby cena przesunęła się do prawej krawędzi.

Spróbuj swoich sił

import SwiftUI

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

Sprawdź się

Ta lekcja zawiera krótki quiz. Zacznij lekcję, żeby na niego odpowiedzieć i śledzić swoje postępy.

Wszystkie lekcje w sekcji Wprowadzenie do SwiftUI

1Wprowadzenie

4Modyfikatory

7Listy

10Projekt – Kawiarnia Coddy

2Wyświetlanie treści

5Stan i przyciski

8Nawigacja

11Wyzwania końcowe

3Stosy i układy

6Dane wejściowe użytkownika

9Udostępnianie danych

Poćwicz samodzielnie: Edytor online SwiftUI